@@ -393,6 +393,8 @@ from inside ``app.js``:
393393 // things on "window" become global variables
394394 window .$ = $;
395395
396+ .. _asset-mapper-handling-css :
397+
396398Handling CSS
397399------------
398400
@@ -1071,6 +1073,24 @@ it in the CSP header, and then pass the same nonce to the Twig function:
10711073 {# the csp_nonce() function is defined by the NelmioSecurityBundle #}
10721074 {{ importmap('app', {'nonce': csp_nonce('script')}) }}
10731075
1076+ Content Security Policy and CSS Files
1077+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1078+
1079+ If your importmap includes CSS files, AssetMapper uses a trick to load those by
1080+ adding ``data:application/javascript `` to the rendered importmap (see
1081+ :ref: `Handling CSS <asset-mapper-handling-css >`).
1082+
1083+ This can cause browsers to report CSP violations and block the CSS files from
1084+ being loaded. To prevent this, you can add `strict-dynamic `_ to the ``script-src ``
1085+ directive of your Content Security Policy, to tell the browser that the importmap
1086+ is allowed to load other resources.
1087+
1088+ .. note ::
1089+
1090+ When using ``strict-dynamic ``, the browser will ignore any other sources in
1091+ ``script-src `` such as ``'self' `` or ``'unsafe-inline' ``, so any other
1092+ ``<script> `` tags will also need to be trusted via a nonce.
1093+
10741094The AssetMapper Component Caching System in dev
10751095-----------------------------------------------
10761096
@@ -1150,5 +1170,6 @@ command as part of your CI to be warned anytime a new vulnerability is found.
11501170.. _`package.json configuration file` : https://docs.npmjs.com/creating-a-package-json-file
11511171.. _Content Security Policy : https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
11521172.. _NelmioSecurityBundle : https://symfony.com/bundles/NelmioSecurityBundle/current/index.html#nonce-for-inline-script-handling
1173+ .. _strict-dynamic : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#strict-dynamic
11531174.. _kocal/biome-js-bundle : https://github.com/Kocal/BiomeJsBundle
11541175.. _`SensioLabs Minify Bundle` : https://github.com/sensiolabs/minify-bundle
0 commit comments