Skip to content

[AssetMapper] Document usage of strict-dynamic in a CSP #20362

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions frontend/asset_mapper.rst
Original file line number Diff line number Diff line change
Expand Up @@ -402,6 +402,8 @@ from inside ``app.js``:
// things on "window" become global variables
window.$ = $;

.. _asset-mapper-handling-css:

Handling CSS
------------

Expand Down Expand Up @@ -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 <asset-mapper-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
``<script>`` tags will also need to be trusted via a nonce.

The AssetMapper Component Caching System in dev
-----------------------------------------------

Expand Down Expand Up @@ -1186,5 +1206,6 @@ command as part of your CI to be warned anytime a new vulnerability is found.
.. _`package.json configuration file`: https://docs.npmjs.com/creating-a-package-json-file
.. _Content Security Policy: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
.. _NelmioSecurityBundle: https://symfony.com/bundles/NelmioSecurityBundle/current/index.html#nonce-for-inline-script-handling
.. _strict-dynamic: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#strict-dynamic
.. _kocal/biome-js-bundle: https://github.com/Kocal/BiomeJsBundle
.. _`SensioLabs Minify Bundle`: https://github.com/sensiolabs/minify-bundle
Loading