Skip to content

[AssetMapper] Document how to make it work with a Content Security Policy #19865

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.

Sign up for GitHub

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 1 commit into from
May 7, 2024
Merged

[AssetMapper] Document how to make it work with a Content Security Policy #19865

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
23 changes: 23 additions & 0 deletions frontend/asset_mapper.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1061,6 +1061,27 @@ have *one* importmap, so ``importmap()`` must be called exactly once.
If, for some reason, you want to execute *only* ``checkout.js``
and *not* ``app.js``, pass only ``checkout`` to ``importmap()``.

Using a Content Security Policy (CSP)
-------------------------------------

If you're using a `Content Security Policy`_ (CSP) to prevent cross-site
scripting attacks, the inline ``<script>`` tags rendered by the ``importmap()``
function will likely violate that policy and will not be executed by the browser.

To allow these scripts to run without disabling the security provided by
the CSP, you can generate a secure random string for every request (called
a *nonce*) and include it in the CSP header and in a ``nonce`` attribute on
the ``<script>`` tags.
The ``importmap()`` function accepts an optional second argument that can be
used to pass attributes to the rendered ``<script>`` tags.
You can use the `NelmioSecurityBundle`_ to generate the nonce and include
it in the CSP header, and then pass the same nonce to the Twig function:

.. code-block:: twig

{# the csp_nonce() function is defined by the NelmioSecurityBundle #}
{{ importmap('app', {'nonce': csp_nonce('script')}) }}
Copy link
Contributor Author

@nicwortel nicwortel May 6, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The csp_nonce function is unknown because it is part of the NelmioSecurityBundle.

Should I remove it from the example and instead just refer to the documentation of the NelmioSecurityBundle?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's OK because you linked to the bundle in the previous paragraph ... but I'd add a comment in this code to explain that this function comes from that bundle:

.. code-block:: twig

    {# the csp_nonce() function is defined by the NelmioSecurityBundle #}
    {{ importmap('app', {'nonce': csp_nonce('script')}) }}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added the comment 👍 however, that doesn't solve the error reported by the "Code Blocks" workflow, so the build still fails.


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

Expand Down Expand Up @@ -1143,3 +1164,5 @@ command as part of your CI to be warned anytime a new vulnerability is found.
.. _`dist/css/bootstrap.min.css file`: https://www.jsdelivr.com/package/npm/bootstrap?tab=files&path=dist%2Fcss#tabRouteFiles
.. _`dynamic import`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import
.. _`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
Loading