Troubleshoot storefront checkout page in CSP restricted mode

Last update: April 4, 2024

CREATED FOR:

  • Developer

This article provides explanations and fixes for the Adobe Commerce 2.4.7 issues while viewing the checkout page in CSP restricted mode, with the “Refused to execute inline script because it violates the following Content Security Policy directive: "script-src …” error message in the browser console log.

Affected products and versions

Adobe Commerce on cloud infrastructure, Adobe Commerce on-premises, and Magento Open Source:

  • 2.4.7
  • 2.4.6-pX
  • 2.4.5-pX
  • 2.4.4-pX

Issue - Storefront Checkout page is broken or isn’t able to load

The storefront checkout page is broken or isn’t able to load, with the “Refused to execute inline script because it violates the following Content Security Policy directive: "script-src …” error message in the browser console log.

Steps to reproduce:

  1. Go to the storefront.
  2. Add a product to the cart and proceed to the checkout.

Expected results:

The checkout page fully loads normally.

Actual results:

The checkout page is blank or is missing components. The following JS error is displayed in the browser console log: “Refused to execute inline script because it violates the following Content Security Policy directive: "script-src …”

Cause

In Adobe Commerce and Magento Open Source version 2.4.7 and later, CSP is configured in restrict-mode, by default, for payment pages in the storefront and admin areas, and in report-only mode for all other pages.
The corresponding CSP header does not contain the unsafe-inline keyword inside the script-src directive for payment pages. Also, only whitelisted inline scripts are allowed.

Solution

Users might see browser errors due to certain scripts being blocked because of CSP:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src

To fix this issue, you must either:

  1. Whitelist the blocked scripts using the SecureHtmlRenderer class.

  2. Use the CSPNonceProvider class to allow scripts to be executed.
    Adobe Commerce and Magento Open Source 2.4.7 and later include a Content Security Policy (CSP) nonce provider to facilitate the generation of unique nonce strings for each request. These nonce strings are then attached to the CSP header.

    Use the generateNonce function in Magento\Csp\Helper\CspNonceProvider to obtain a nonce string.

    use Magento\Csp\Helper\CspNonceProvider;

class MyClass
{

    /**
     * @var CspNonceProvider
     */
    private $cspNonceProvider;

    /**
     * @param CspNonceProvider $cspNonceProvider
     */
    public function __construct(CspNonceProvider $cspNonceProvider)
    {
        $this->cspNonceProvider = $cspNonceProvider
    }

    /**
     * Get CSP Nonce
     *
     * @return String
     */
    public function getNonce(): string
    {
        return $this->cspNonceProvider->generateNonce();
    }
}

  3. Add a hash to your module’s csp_whitelist.xml file.