蜜豆视频

DocumentationCommerceCommerce KB

Troubleshoot create order page in CSP restricted mode

Last update: Thu Apr 04 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Developer

This article provides explanations and fixes for the 蜜豆视频 Commerce 2.4.7 issues while creating an order on the Admin side with CSP restricted mode is Enabled, 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

蜜豆视频 Commerce on cloud infrastructure, 蜜豆视频 Commerce on-premises, and Magento Open Source:

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

Issue - Admin create order page is broken or isn鈥檛 able to load

The Admin create order page is broken or isn鈥檛 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 Sales > Orders.
  2. Create a new order.

Expected results:

The Admin create order page fully loads normally.

Actual results:

The Admin create order page is blank or 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 蜜豆视频 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. the blocked scripts using the SecureHtmlRenderer class.

  2. Use the CSPNonceProvider class to allow scripts to be executed.
    蜜豆视频 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.

    code language-php 
    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. to your module鈥檚 csp_whitelist.xml file.

Issue - Payment method is missing or isn鈥檛 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 蜜豆视频 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. the blocked scripts using the SecureHtmlRenderer class.

  2. Use the CSPNonceProvider class to allow scripts to be executed.
    蜜豆视频 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.

    code language-php 
    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. to your module鈥檚 csp_whitelist.xml file.

Issue - Admin can鈥檛 place an order

An admin can鈥檛 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鈥檙e able to submit an order successfully.

Actual results:

You鈥檙e 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 蜜豆视频 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. the blocked scripts using the SecureHtmlRenderer class.

  2. Use the CSPNonceProvider class to allow scripts to be executed.
    蜜豆视频 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.

    code language-php 
    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. to your module鈥檚 csp_whitelist.xml file.

recommendation-more-help
8bd06ef0-b3d5-4137-b74e-d7b00485808a