文件

Adobe Commerce：在內容安全性原則(CSP)限制模式下，結帳頁面出現內嵌JavaScript問題

Last update: Mon Sep 30 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

本文提供在結帳期間，當啟用 CSP限制模式 時，透過Adobe Commerce 2.4.7中的Adobe Commerce Admin和Google Tag Manager新增自訂JavaScript所遇到問題的詳細解釋和解決方案。 具體來說，它會處理​ 拒絕執行內嵌指令碼，因為它違反了瀏覽器主控台記錄中顯示的下列內容安全性原則directiv e錯誤訊息。 此錯誤表示內嵌指令碼因嚴格的CSP設定而遭到封鎖，這些設定是專為防止執行未經授權的指令碼而設計，藉此增強安全性。

從Adobe Commerce 2.4.7開始，CSP已設定為針對店面和管理區域中的付款頁面，預設以 限制模式 運作。 對於所有其他頁面，它以 僅報告 模式運作。 此增強功能需要列入所有JavaScript的白名單，包括與協力廠商服務或擴充功能的自訂整合。 未將自訂JavaScript列入白名單會導致瀏覽器在管理員和店面區域的結帳和付款頁面上阻止執行這些指令碼。

本文提供的解決方案不限於解決透過Google Admin的「設計設定」新增的Commerce Tag Manager (GTM)內嵌JavaScript或JavaScript問題。 它們也可以套用至內嵌JavaScript已新增至Commerce程式碼的其他情況。 這包括直接內嵌在範本、模組或Adobe Commerce生態系統的任何其他部分中的自訂指令碼。 透過遵循概述的步驟，您可以確保所有內嵌指令碼都已適當列入白名單並允許執行，因此在遵守CSP限制的同時仍能維持自訂程式碼的功能。

注意：強烈建議您透過內容安全性原則 Adobe Commerce檔案中說明的方法匯入新的JavaScript。 這些方法可確保您的指令碼符合CSP准則，增強Commerce網站的安全性。 透過遵循指令碼包含的最佳實務，例如使用具有適當Nonce或雜湊屬性的外部指令碼，您可以將安全漏洞的風險降至最低，並確保更順暢、更安全的使用者體驗。

說明 description

檢視有關環境和要再現的步驟的詳細資訊。

環境

雲端基礎結構和Adobe Commerce內部部署上的Adobe Commerce：

  • 2.4.7及更高版本
  • 2.4.6畫素
  • 2.4.5畫素
  • 2.4.4畫素

問題/症狀

以下是因為CSP限制而封鎖指令碼在結帳和付款頁面上執行時的常見問題及其解決方案清單：

  • 使用內嵌JavaScript的GTMHTML標籤
  • 佈景主題設定中的內嵌JS

內嵌JavaScript的 GTMHTML標籤

在Google Tag Manager中設定的自訂HTML標籤中的JavaScript在店面結帳或付款頁面上無法正常執行。

重現問題的步驟

  1. 使用包含內嵌JavaScript的自訂HTML標籤來設定Google Tag Manager。
  2. 將Google Tag Manager與Adobe Commerce整合。 如需相關步驟，請參閱Adobe Commerce銷售與促銷指南中的設定您的Google Analytics帳戶。
  3. 將產品新增到購物車並繼續結帳。
  4. 在任何支援的瀏覽器中開啟Developer Console。

預期結果

主控台中未出現與自訂JavaScript相關的錯誤，且指令碼會成功執行。

實際結果

錯誤​ 拒絕執行指令碼，因為它的雜湊、nonce或'unsafe-inline'未出現在內容安全性原則 ​的script-src指示詞中。 存在於主控台中，且指令碼不會執行。

注意：確切的錯誤訊息可能會因瀏覽器而異，但通常表示指令碼已被CSP封鎖。 這些訊息會強調指出由於目前的CSP設定，不允許執行此指令碼。

原因

Google Tag Manager自訂HTML標籤的JavaScript會由Google Tag Manager本身插入店面。 因此，此指令碼不會預先列於CSP設定中，且瀏覽器隨後會封鎖此指令碼以防止執行。 發生此狀況是因為CSP會限制執行任何明確允許的內嵌指令碼，確保增強安全性，但需要自訂指令碼的額外設定。

解決方案

  • 將JavaScript雜湊加入白名單。 如需詳細資訊，請參閱本文中的解決方法一節。
  • 使用Nonce簽署Google Tag Manager自訂HTMLJavaScript 。 如需詳細資訊，請參閱本文中的解決方法一節。

佈景主題組態中的內嵌JS

此問題非常類似於包含內嵌JavaScript的自訂HTML標籤問題。 不同之處在於，此指令碼不會在Google標籤管理員中新增JavaScript，而是會新增到其中一個可用範圍之設計設定頁面的Adobe Commerce管理員中。 使用此方法，您可以將內嵌HTML片段、JavaScript或樣式表新增至主題的頁首或頁尾。 如同任何其他內嵌JavaScript一樣，這需要在結帳頁面上執行白名單。

要再現的步驟

  1. 將設計組態中的HTML頁首或頁尾設定為包含內嵌JavaScript。
  2. 將產品新增到購物車並繼續結帳。
  3. 在任何支援的瀏覽器中開啟Developer Console。

預期結果

主控台中未出現與自訂JavaScript相關的錯誤，且指令碼會成功執行。

實際結果

錯誤​ 拒絕執行指令碼，因為它的雜湊、nonce或'unsafe-inline'未出現在內容安全性原則 ​的script-src指示詞中。 存在於主控台中，且指令碼不會執行。

注意：確切的錯誤訊息可能會因瀏覽器而異，但通常表示指令碼正被CSP封鎖。 這些訊息會強調指出由於目前的CSP設定，不允許執行此指令碼。

原因

設計組態HTML標題中的指令碼和樣式表以及頁尾區段中的雜項HTML是混合輸入欄位。 這些欄位可包含HTML、樣式表或JavaScript。 由於此動態內容，這些欄位的內容無法自動雜湊並加入白名單。 因此，如果將JavaScript新增至其中一個欄位，則必須手動將其加入白名單，才能在結帳頁面上執行。 這是必要的，因為CSP會限制任何明確允許的內嵌指令碼執行。 雖然這樣可以確保增強安全性，但還需要額外的設定以允許自訂指令碼。

解決方案

將JavaScript雜湊加入白名單。 如需詳細資訊，請參閱本文中的解決方法一節。

解決方法 resolution

每個提供的解決方案都獨立運作。 請仔細評估並選取最符合您特定需求的解決方案。 考量實作的內容、相關指令碼的性質，以及Adobe Commerce網站的安全性需求，以決定適當的解決方案。

將JavaScript雜湊加入白名單

若要解決此問題，自訂內嵌JavaScripts在CSP設定中必須是白名單。 如此可確保指令碼可明確允許執行，而略過預設的安全性限制。

將GTM自訂HTML指令碼加入白名單相當困難，因為GTM可能會在將JavaScript插入檔案物件模型(DOM)前修改它，包括移除分行符號和註解。 此外，Google的演演算法可能會隨時間變更，恕不另行通知，這可能會讓雜湊失效。 您需要使用步驟C所述的Google Chrome產生的雜湊，並準備好定期更新白名單中的雜湊。 或者，考慮使用Nonce簽署Google Tag Manager自訂HTMLJavaScript，以獲得更強大的解決方案。

  1. 產生JavaScript內文的雜湊。

    注意：若要成功產生雜湊，您必須將指令碼加入雜湊產生器。 請務必謹慎複製指令碼。 在複製所有分行符號和任何可能的隱藏字元時，排除JavaScript的開頭和結尾指令碼標籤。 這包括開頭script或其他標籤之後的分行符號（如果有的話）。 如果雜湊與指令碼不完全相符，則會拒絕執行。

    1. 在Mac上，您可以將整個指令碼內文（包括開頭script標籤之後的任何分行符號）複製到剪貼簿，然後在終端機中執行以下命令。

      php -r "echo base64_encode(hash('sha256'， shell_exec('pbpaste')， true)) 。 PHP_EOL；」

      此PHP指令會取用剪貼簿內容、計算其SHA-256雜湊、將雜湊轉換為二進位，然後以base64格式加以編碼，最後列印結果。

    2. 您可以使用各種線上雜湊產生器，為您的指令碼建立所需的雜湊。

      警告： 請務必瞭解，如果您決定使用協力廠商線上服務來產生CSP的雜湊，您必須考慮隱私權影響。 有些服務可能會將您的指令碼上傳至其伺服器以進行雜湊處理，可能會影響指令碼中包含的敏感資料。 若要降低此風險，建議使用受信任的工具或指令碼在本機產生雜湊，以確保您的資料安全無虞且隱私。

    3. 您可以使用Google Chrome瀏覽器來擷取已針對JavaScript產生的雜湊；此雜湊在結帳頁面上遭到Developer Console拒絕執行。

      1. 使用已新增封鎖的Google ChromeJavaScript瀏覽器，前往結帳頁面。

      2. 按Cmd+Option+J (在macOS上)或Ctrl+Shift+J （在Windows/Linux上）以開啟Developer Console。

      3. 在主控台中找到CSP錯誤訊息。

      4. 在錯誤訊息的最後一個句子中，您會找到為封鎖的指令碼產生的雜湊代碼。

      5. 複製sha256-之後的程式碼，省略引號。

        注意： 如果您有多個遭封鎖的JavaScript檔案，主控台中會顯示多個錯誤訊息。 請確定您確實找出需要列入白名單的JavaScript。 建議您逐一新增及測試每個JavaScript檔案，以免誤將錯誤的指令碼列入白名單。

        有關如何為內嵌JavaScript產生雜湊的詳細資訊，請參閱Adobe Commerce開發人員內容安全性原則指南中的進階CSP設定。

  2. 將指令碼雜湊加入白名單。 首先將雜湊新增至模組的csp_whitelist.xml檔案：

    <值>

    < value id="my-script" type="hash" algorithm="sha256"> YOUR-HASH-1< /value>

    < /values>

    您應該將YOUR-HASH-1取代為您在上一步中取得的雜湊。
    若要將多個指令碼列入白名單，請為每個指令碼新增<值> < /value>標籤，例如：

    <值>

    < value id="my-script" type="hash" algorithm="sha256"> YOUR-HASH-1< /value>

    < value id="my-new-script" type="hash" algorithm="sha256"> YOUR-HASH-2< /value>

    <值>

    如果檔案不存在，請建立包含下列內容的檔案。

    < ？xml version="1.0" encoding="UTF-8"？>

    < csp_whitelist xmlns：xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi：noNamespaceSchemaLocation="urn:magento:模組:Magento_Csp:etc/csp_whitelist.xsd">

    <原則>

    <原則識別碼="script-src">

    <值>

    < value id="my-script" type="hash" algorithm="sha256"> YOUR-HASH-1< /value>

    < value id="my-new-script" type="hash" algorithm="sha256"> YOUR-HASH-2< /value>

    < /values>

    < /policy>

    < /policies>

    < /csp_whitelist>

  3. 清除快取：將雜湊新增到csp_whitelist.xml檔案後，必須清除快取以確保變更生效。 排清快取會清除儲存的資料，以允許立即套用更新的CSP設定。 您可以導覽至 系統 以清除快取 > 工具 在Commerce管理面板中> 快取管理，並選取 排清Magento快取 按鈕。  或者，使用命令列：

    bin/magento cache:flush

    這個命令會清除所有快取型別，確保系統可辨識您的新CSP設定。

使用Nonce簽署Google Tag Manager自訂HTMLJavaScript

允許在GTM中執行JavaScript的另一種方式是在指令碼的開始標籤中新增Nonce。 Nonce屬性提供動態地將特定內嵌指令碼列入白名單的方法，以確保允許執行這些指令碼。 如需詳細資訊，請參閱使用CSP Nonce提供者以允許內嵌指令碼檔案。

警告： 請記住，如果GTM帳戶遭到破壞，攻擊者可能會將惡意JavaScript插入店面，並使用Nonce簽署，以便執行。 這可能會在結帳過程中導致敏感資料被盜。

Adobe Commerce開發元件

注意： CSP Nonce變數插入功能將在Adobe Commerce 2.4.8及更新版本中立即可用。 如果您在舊版Adobe Commerce中實作此自訂插入，請在升級至Adobe Commerce 2.4.8或更新版本前復原這些自訂。 如果您正在執行Adobe Commerce 2.4.8或更新版本，請繼續前往GTM設定區段。

  1. 在您的自訂模組中，利用CSP Nonce提供者，並將Nonce傳遞至JavaScript。 如需詳細資訊，請參閱Adobe Commerce開發人員檔案中的基本範本概念。

  2. 使用JavaScript將全域變數插入Nonce：

    <指令碼>

    window.cspNonce = config.cspNonce；

    < /script>

  3. 此指令碼會使用目前Nonce的值設定全域變數cspNonce，然後可以在Google標籤管理員變數中擷取該變數，並用來簽署自訂HTML指令碼，以確保它們可以在CSP下執行。 應將其插入所有頁面。

GTM組態元件

  1. 從GTM擷取此變數的值：

    1. 建立 Google變數 型別的JavaScript標籤管理員變數。 請為變數指定清楚的名稱，因為稍後會參照此變數。 在此範例中，它是gtmNonce。

    2. 將 全域變數名稱 設定為上一步驟中插入的JavaScript全域變數名稱。 在此範例中，它是cspNonce。

  2. 修改包含您在結帳時需要執行的JavaScript的自訂HTML區塊，加入Nonce屬性，並參照您先前建立的GTM變數。

<指令碼nonce="{{gtmNonce}}">
                     console.log（「這是測試」）；
              < /script>

注意：請務必勾選 支援document.write 核取方塊，因為這是指令碼正常運作的必要條件。

新增Nonce屬性後，指令碼就會使用提供的Nonce簽名，以便根據內容安全性原則(CSP)安全執行。

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f