CSP Script authorization

Strict mode requires scripts to be authorized to be executed. Unauthorized scripts on the page will not be executed, and an error is logged to the browser console.

This applies to inline scripts as well as external third-party scripts. Inline scripts are authorized by a nonce attribute. The nonce has to match the value specified in the Content-Security-Policy HTTP header.
Also, nonces must not be re-used. The nonce has to be distinct for every request.

Evaluated code

Consider a button with an onclick event to navigate to the homepage.

<button onclick="window.location = '/'">Bring me home</button>`

Your browser evaluates the inline event callback when the button is clicked. If the unsafe-eval policy is disabled, it will not be executed. In order to keep the behavior intact despite strict CSP, the code must be migrated ´to a script with a valid nonce.

<button id="bring-me-home">Bring me home</button>`

<!-- a header Content-Security-Policy: script-src 'nonce-fdaef31321' must be included -->
<script nonce="fdaef31321">
    document.getElementById('bring-me-home').addEventListener('click', () => {
        window.location = '/';
    }
</script>

Do not hardcode nonces

The above is a code code to clarify a concept. Never use a hardcoded nonce.

Injected scripts

With strict CSP, inline scripts can not be added to the page content once it is loaded.
This is especially relevant to Magewire component templates. All scripts must be extracted into separate templates and be included in the initial page load.

More on that in the next section Move scripts to page load

Authorization of inline scripts

To authorize a script to be executed with strict CSP in place, add a <?php $hyvaCsp->registerInlineScript() ?> statement directly after the closing </script> tag.

This will automatically add the nonce attribute for the current request.

Loading scripts from external source

External scripts must be added to the authorized, too. In Magento, this is usually done by adding the source domain to the csp_whitelist.xml. Please refer to the Magento documentation for details, found at add domains to the whitelist.