@@ -415,6 +415,8 @@ from inside ``app.js``:
415415 // things on "window" become global variables
416416 window .$ = $;
417417
418+ .. _asset-mapper-handling-css :
419+
418420Handling 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+
10961116The 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