Skip to content

Commit 4726300

Browse files
committed
Merge branch '7.1' into 7.2
* 7.1: [AssetMapper] Document usage of `strict-dynamic` in a CSP
2 parents a665414 + 3e2d1e6 commit 4726300

File tree

1 file changed

+21
-0
lines changed

1 file changed

+21
-0
lines changed

frontend/asset_mapper.rst

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -415,6 +415,8 @@ from inside ``app.js``:
415415
// things on "window" become global variables
416416
window.$ = $;
417417
418+
.. _asset-mapper-handling-css:
419+
418420
Handling CSS
419421
------------
420422

@@ -1093,6 +1095,24 @@ it in the CSP header, and then pass the same nonce to the Twig function:
10931095
{# the csp_nonce() function is defined by the NelmioSecurityBundle #}
10941096
{{ importmap('app', {'nonce': csp_nonce('script')}) }}
10951097
1098+
Content Security Policy and CSS Files
1099+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1100+
1101+
If your importmap includes CSS files, AssetMapper uses a trick to load those by
1102+
adding ``data:application/javascript`` to the rendered importmap (see
1103+
:ref:`Handling CSS <asset-mapper-handling-css>`).
1104+
1105+
This can cause browsers to report CSP violations and block the CSS files from
1106+
being loaded. To prevent this, you can add `strict-dynamic`_ to the ``script-src``
1107+
directive of your Content Security Policy, to tell the browser that the importmap
1108+
is allowed to load other resources.
1109+
1110+
.. note::
1111+
1112+
When using ``strict-dynamic``, the browser will ignore any other sources in
1113+
``script-src`` such as ``'self'`` or ``'unsafe-inline'``, so any other
1114+
``<script>`` tags will also need to be trusted via a nonce.
1115+
10961116
The AssetMapper Component Caching System in dev
10971117
-----------------------------------------------
10981118

@@ -1172,5 +1192,6 @@ command as part of your CI to be warned anytime a new vulnerability is found.
11721192
.. _`package.json configuration file`: https://docs.npmjs.com/creating-a-package-json-file
11731193
.. _Content Security Policy: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
11741194
.. _NelmioSecurityBundle: https://symfony.com/bundles/NelmioSecurityBundle/current/index.html#nonce-for-inline-script-handling
1195+
.. _strict-dynamic: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#strict-dynamic
11751196
.. _kocal/biome-js-bundle: https://github.com/Kocal/BiomeJsBundle
11761197
.. _`SensioLabs Minify Bundle`: https://github.com/sensiolabs/minify-bundle

0 commit comments

Comments
 (0)