疑難排解CSP限制模式中的storefront結帳頁面

本文針對​ CSP restricted mode ​中檢視結帳頁面時Adobe Commerce 2.4.7問題提供說明和修正,其中的"拒絕執行內嵌指令碼,因為它違反下列內容安全性原則指示:「script-src …」錯誤訊息在瀏覽器主控台記錄中。

受影響的產品和版本

雲端基礎結構、Adobe Commerce內部部署和Magento Open Source上的Adobe Commerce:

  • 2.4.7
  • 2.4.6畫素
  • 2.4.5畫素
  • 2.4.4畫素

問題 — Storefront結帳頁面已損毀或無法載入

storefront checkout ​頁面已損毀或無法載入,因為「拒絕執行內嵌指令碼,因為它違反了下列內容安全性原則指令:瀏覽器主控台記錄檔中的「script-src …」錯誤訊息。

要再現的步驟

  1. 前往店面。
  2. 新增產品至購物車並繼續結帳。

預期結果

結帳頁面會正常完整載入。

實際結果

簽出頁面為空白或缺少元件。 瀏覽器主控台記錄中顯示下列JS錯誤: "拒絕執行內嵌指令碼,因為它違反下列內容安全性原則指令: "script-src …"

原因

在Adobe Commerce和Magento Open Source版本2.4.7及更新版本中,CSP ​預設會針對店面和管理區域中的付款頁面設定為restrict-mode,針對所有其他頁面則設定為report-only模式。
對應​ CSP ​標題在付款頁面的script-src指示詞內不包含unsafe-inline關鍵字。 此外,僅允許whitelisted個內嵌指令碼。

解決方案

使用者可能會看到瀏覽器錯誤,因為某些指令碼因為​ CSP ​而被封鎖:

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

若要修正此問題,您必須

  1. Whitelist使用SecureHtmlRenderer類別的封鎖指令碼。

  2. 使用CSPNonceProvider類別允許執行指令碼。
    Adobe Commerce和Magento Open Source 2.4.7及更新版本包含一個​ Content Security Policy (CSP) nonce提供者,以便為每個請求產生唯一的nonce字串。 然後會將這nonce個字串附加至CSP標頭。

    Magento\Csp\Helper\CspNonceProvider中使用generateNonce函式以取得nonce字串。

    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. 新增 hash至模組的csp_whitelist.xml檔案。

問題 — 付款方式遺失或無法運作

storefront checkout ​頁面上缺少付款方法或付款方法無法運作,且「Refused to execute inline script,因為它違反了下列內容安全性原則指令:「script-src …」瀏覽器主控台記錄檔中的錯誤訊息。

要再現的步驟

  1. 前往店面。
  2. 新增產品至購物車並繼續結帳。
  3. 選取付款方式。

預期結果

您可以選取付款方式並繼續成功下訂單。

實際結果

付款方式遺失或無法運作。 瀏覽器主控台記錄中顯示下列JS錯誤: "拒絕執行內嵌指令碼,因為它違反下列內容安全性原則指令: "script-src …"

原因

在Adobe Commerce和Magento Open Source版本2.4.7及更新版本中,CSP ​預設會針對店面和管理區域中的付款頁面設定為restrict-mode,針對所有其他頁面則設定為report-only模式。
對應​ CSP ​標題在付款頁面的script-src指示詞內不包含unsafe-inline關鍵字。 此外,僅允許whitelisted個內嵌指令碼。

解決方案

使用者可能會看到瀏覽器錯誤,因為某些指令碼因為​ CSP ​而被封鎖:

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

若要修正此問題,您必須

  1. Whitelist使用SecureHtmlRenderer類別的封鎖指令碼。

  2. 使用CSPNonceProvider類別允許執行指令碼。
    Adobe Commerce和Magento Open Source 2.4.7及更新版本包含一個​ Content Security Policy (CSP) nonce提供者,以便為每個請求產生唯一的nonce字串。 然後會將這nonce個字串附加至CSP標頭。

    Magento\Csp\Helper\CspNonceProvider中使用generateNonce函式以取得nonce字串。

    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. 新增 hash至模組的csp_whitelist.xml檔案。

問題 — 客戶無法下訂單

客戶無法下訂單,因為"拒絕執行內嵌指令碼,因為它違反了下列內容安全性原則指令:瀏覽器主控台記錄檔中的"script-src …"錯誤訊息。

要再現的步驟

  1. 前往店面。
  2. 新增產品至購物車並繼續結帳。
  3. 選取付款方式。
  4. 按一下​ 下訂單

預期結果

您可以成功下訂單。

實際結果

您無法下訂單。 瀏覽器主控台記錄中顯示下列JS錯誤: "拒絕執行內嵌指令碼,因為它違反下列內容安全性原則指令: "script-src …"

原因

在Adobe Commerce和Magento Open Source版本2.4.7及更新版本中,CSP ​預設會針對店面和管理區域中的付款頁面設定為restrict-mode,針對所有其他頁面則設定為report-only模式。
對應​ CSP ​標題在付款頁面的script-src指示詞內不包含unsafe-inline關鍵字。 此外,僅允許whitelisted個內嵌指令碼。

解決方案

使用者可能會看到瀏覽器錯誤,因為某些指令碼因為​ CSP ​而被封鎖:

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

若要修正此問題,您必須

  1. Whitelist使用SecureHtmlRenderer類別的封鎖指令碼。

  2. 使用CSPNonceProvider類別允許執行指令碼。
    Adobe Commerce和Magento Open Source 2.4.7及更新版本包含一個​ Content Security Policy (CSP) nonce提供者,以便為每個請求產生唯一的nonce字串。 然後會將這nonce個字串附加至CSP標頭。

    Magento\Csp\Helper\CspNonceProvider中使用generateNonce函式以取得nonce字串。

    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. 新增 hash至模組的csp_whitelist.xml檔案。

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