@@ -415,6 +415,8 @@ from inside ``app.js``:
415
415
// things on "window" become global variables
416
416
window .$ = $;
417
417
418
+ .. _asset-mapper-handling-css :
419
+
418
420
Handling CSS
419
421
------------
420
422
@@ -1093,6 +1095,24 @@ it in the CSP header, and then pass the same nonce to the Twig function:
1093
1095
{# the csp_nonce() function is defined by the NelmioSecurityBundle #}
1094
1096
{{ importmap('app', {'nonce': csp_nonce('script')}) }}
1095
1097
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
+
1096
1116
The AssetMapper Component Caching System in dev
1097
1117
-----------------------------------------------
1098
1118
@@ -1172,5 +1192,6 @@ command as part of your CI to be warned anytime a new vulnerability is found.
1172
1192
.. _`package.json configuration file` : https://docs.npmjs.com/creating-a-package-json-file
1173
1193
.. _Content Security Policy : https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
1174
1194
.. _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
1175
1196
.. _kocal/biome-js-bundle : https://github.com/Kocal/BiomeJsBundle
1176
1197
.. _`SensioLabs Minify Bundle` : https://github.com/sensiolabs/minify-bundle
0 commit comments