diff --git a/frontend/asset_mapper.rst b/frontend/asset_mapper.rst index 1b0329d402d..b488fc76d11 100644 --- a/frontend/asset_mapper.rst +++ b/frontend/asset_mapper.rst @@ -402,6 +402,8 @@ from inside ``app.js``: // things on "window" become global variables window.$ = $; +.. _asset-mapper-handling-css: + Handling CSS ------------ @@ -1103,6 +1105,24 @@ it in the CSP header, and then pass the same nonce to the Twig function: {# the csp_nonce() function is defined by the NelmioSecurityBundle #} {{ importmap('app', {'nonce': csp_nonce('script')}) }} +Content Security Policy and CSS Files +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +If your importmap includes CSS files, AssetMapper uses a trick to load those by +adding ``data:application/javascript`` to the rendered importmap (see +:ref:`Handling CSS `). +This can cause browsers to report CSP violations and block the CSS files from +being loaded. +To prevent this, you can add `strict-dynamic`_ to the ``script-src`` directive +of your Content Security Policy, to tell the browser that the importmap is +allowed to load other resources. + +.. note:: + + When using ``strict-dynamic``, the browser will ignore any other sources in + ``script-src`` such as ``'self'`` or ``'unsafe-inline'``, so any other + ``