文件CommerceCommerce KB

疑難排解在CSP限制模式下建立訂單頁面

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

建立對象：

  • 開發人員

本文針對Adobe Commerce 2.4.7問題提供說明及修正，當​ CSP restricted mode ​在Admin端建立訂單時，其狀態為​ 已啟用，且「拒絕執行內嵌指令碼，因為它違反了以下內容安全性原則指令：瀏覽器主控台記錄檔中的「script-src …」錯誤訊息。

受影響的產品和版本

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

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

問題 — 管理員​ 建立訂單 ​頁面損毀或無法載入

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

要再現的步驟：

  1. 前往​ Sales > Orders。
  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檔案。

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

管理​ 訂單建立頁面 ​上的付款方法遺失或無法運作，且有'''拒絕執行內嵌指令碼，因為它違反下列內容安全性原則指令：瀏覽器主控台記錄檔中的"script-src …"錯誤訊息。

要再現的步驟：

  1. 前往​ Sales > Orders。
  2. 建立新訂單。
  3. 建立新客戶。
  4. 輸入客戶明細。
  5. 輸入訂單明細（產品、送貨方式）。
  6. 選取付款方式。

預期結果：

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

實際結果：

付款方式遺失或無法運作。 瀏覽器主控台記錄中顯示下列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. 前往​ Sales > Orders。
  2. 建立新訂單。
  3. 建立新客戶。
  4. 輸入客戶明細。
  5. 輸入訂單明細（產品、送貨方式）。
  6. 選取付款方式。
  7. 提交訂單。

預期結果：

您可以成功提交訂單。

實際結果：

您無法提交訂單。 瀏覽器主控台記錄中顯示下列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