文件CommerceCommerce KB

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

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

  • 開發人員

本文針對​ 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