From 358ece7b1547c74ddb53e01ad81cfe7879fe21ef Mon Sep 17 00:00:00 2001 From: Nic Wortel Date: Wed, 30 Oct 2024 16:21:49 +0100 Subject: [PATCH] [AssetMapper] Document usage of `strict-dynamic` in a CSP AssetMapper will include special importmap entries for CSS files, which get resolved to `data:application/javascript`. See https://symfony.com/doc/current/frontend/asset_mapper.html#handling-css. Browsers will report those as CSP violations, as `data:` scripts can also be used for XSS attacks. For the same reason, allowing `data:` in the CSP is not a safe solution. https://github.com/symfony/symfony/issues/58416#issuecomment-2383265152 provides a solution: using `strict-dynamic` in the `script-src` directive will allow the importmap to include other resources. This commit adds that solution to the documentation. --- frontend/asset_mapper.rst | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) 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 + ``