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.

Issue - Payment method is missing or isn’t working

Payment method is missing or not working on the Admin order create page, 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 Sales > Orders.
  2. Create a new order.
  3. Create a new customer.
  4. Enter the customer details.
  5. Enter the order details (products, shipping method).
  6. Select a payment method.

Expected results:

You are able to select a payment method and proceed to place an order successfully.

Actual results:

The payment method is missing or not working. 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.

Issue - Admin can’t place an order

An admin can’t submit an order on the Admin create order page, 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 Sales > Orders.
  2. Create a new order.
  3. Create a new customer.
  4. Enter the customer details.
  5. Enter the order details (products, shipping method).
  6. Select a payment method.
  7. Submit the order.

Expected results:

You’re able to submit an order successfully.

Actual results:

You’re not able to submit an order. 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.

Previous pageRead Replicas issues on Adobe Commerce Cloud 2.4.6 with MariaDB 10.6
Next pageTroubleshoot storefont checkout page in CSP restricted mode

Commerce


Put the Customer at the Center and Build Relationships That Last a Lifetime

Online | Strategy Keynote | General Audience

First impressions last a lifetime. Great first impressions feel personal, connected, and relevant right from the start. From the first...

Wed, Mar 19, 2:30 PM PDT (9:30 PM UTC)

Register

Elevate and Empower Teams with Agentic AI for Exceptional Experiences

Online | Strategy Keynote | General Audience

Elevate and empower your CX teams with AI that transforms creativity, personalization, and productivity. Discover how Adobe is...

Tue, Mar 18, 1:00 PM PDT (8:00 PM UTC)

Register

Connect with Experience League at Summit!

Get front-row access to top sessions, hands-on activities, and networking—wherever you are!

Learn more