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管理およびGoogle タグマネージャーから追加されたカスタム JavaScriptで発生する問題について詳しく説明し、解決策を示します。具体的には、ブラウザーコンソールログに表示される次のコンテンツセキュリティポリシー directiv e エラーメッセージに違反するので、「インラインスクリプトの実行を拒否」というメッセージに対処します。このエラーは、権限のないスクリプトの実行を防ぐことでセキュリティを強化するように設計された厳格な CSP 設定に起因して、インラインスクリプトがブロックされていることを示しています。

Adobe Commerce 2.4.7 以降、CSP は、ストアフロントおよび管理領域の支払いページに対して、デフォルトで restrict-mode で動作するように設定されます。その他のすべてのページでは、 レポートのみ モードで動作します。この機能強化により、サードパーティのサービスや拡張機能とのカスタム統合を含む、すべてのJavaScriptを許可リストに登録する必要があります。カスタム JavaScriptを許可リストに登録しないと、ブラウザーが管理エリアとストアフロントエリアの両方のチェックアウトおよび支払いページでそれらのスクリプトの実行をブロックします。

この記事で提供されるソリューションは、Commerce管理者のデザイン設定で追加されたGoogle Tag Manager （GTM）インラインJavaScriptまたはJavaScriptの問題を解決することに限定されません。また、Commerce コードにインライン JavaScriptが追加されたその他のシナリオにも適用できます。これには、テンプレート、モジュール、またはAdobe Commerce エコシステムのその他の部分に直接埋め込まれるカスタムスクリプトが含まれます。説明した手順に従うことで、すべてのインラインスクリプトが適切に許可リストに登録され、実行できるようになり、CSP 制限に準拠しながらカスタムコードの機能を維持できます。

注意 : コンテンツセキュリティポリシーJavaScriptのドキュメントに記載されている方法で、新しいAdobe Commerceを導入することを強くお勧めします。これらの手法により、スクリプトは CSP ガイドラインに準拠するようになり、Commerce サイトのセキュリティが強化されます。適切な nonce またはハッシュ属性を持つ外部スクリプトの使用など、スクリプトを含めるためのベストプラクティスに従うことで、セキュリティの脆弱性のリスクを最小限に抑え、よりスムーズで安全なユーザーエクスペリエンスを確保できます。

説明 description

環境と再現手順の詳細を確認します。

環境

Adobe Commerce on cloud infrastructure およびAdobe Commerce オンプレミス：

2.4.7 以降
2.4.6-pX
2.4.5-pX
2.4.4-pX

問題／症状

以下は、CSP 制限が原因でスクリプトがチェックアウトおよび支払いページでの実行がブロックされた場合の、一般的な問題とその解決策のリストです。

インラインJavaScriptを使用した GTMHTMLタグ
テーマ設定のインライン JS

インラインJavaScriptを使用した GTMHTMLタグ

Google Tag Manager で設定されたカスタムHTMLタグのJavaScriptが、ストアフロントのチェックアウトページまたは支払いページで正しく実行されていません。

再現手順

インライン JavaScriptを含むカスタムHTMLタグを使用してGoogle タグマネージャーを設定します。
Google Tag Manager とAdobe Commerceの統合手順については、Adobe Commerce マーチャンダイジングおよびプロモーションガイドの Google Analyticsアカウントの設定を参照してください。
商品を買い物かごに追加し、チェックアウトに進みます。
サポートされている任意のブラウザーで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 Tag Manager 管理でJavaScriptを追加する代わりに、使用可能ないずれかのスコープの、スクリプトがAdobe Commerce管理のデザイン設定ページに追加される点です。この方法を使用すると、インラインHTMLスニペット、JavaScript、またはスタイルシートをテーマのヘッダーまたはフッターに追加できます。他のインラインJavaScriptと同様に、チェックアウトページで許可リストへの登録を実行する必要があります。

再現手順

インライン JavaScriptを含むように 🔗 デザイン設定 🔗 で HTML ヘッドまたはフッターを設定します。
商品を買い物かごに追加し、チェックアウトに進みます。
サポートされている任意のブラウザーでDeveloper Consoleを開きます。

期待される結果

カスタム JavaScriptに関連するエラーはコンソールに表示されず、スクリプトは正常に実行されます。

実際の結果

注意：正確なエラーメッセージはブラウザーによって異なりますが、通常はスクリプトが CSP によってブロックされていることを示します。これらのメッセージは、現在の CSP 設定が原因でスクリプトの実行が許可されていないことを示します。

原因：

HTMLヘッドのスクリプトおよびスタイルシートと、デザインHTMLのフッターセクションのその他の設定は、混在した入力フィールドです。これらのフィールドには、HTML、スタイルシートまたはJavaScriptを含めることができます。この動的コンテンツにより、これらのフィールドの内容を自動的にハッシュ化して許可リストに加えることは不可能です。したがって、JavaScriptがこれらのフィールドのいずれかに追加された場合、チェックアウトページで実行するには、手動でホワイトリストに登録する必要があります。明示的に許可されていないインラインスクリプトの実行は CSP によって制限されているので、このようなスクリプトが必要になります。これによりセキュリティが強化されますが、カスタムスクリプトを許可するには追加の設定も必要です。

ソリューション

JavaScript ハッシュを許可リストに加えます。詳しくは、この記事の「解決策」の節を参照してください。

解決策 resolution

提供される各ソリューションは、それぞれ独立して動作します。特定のニーズに最適なものを慎重に評価して選択します。実装のコンテキスト、関連するスクリプトの特性、Adobe Commerce サイトのセキュリティ要件を考慮して、適切なソリューションを決定してください。

JavaScript ハッシュを許可リストに加える

この問題を解決するには、CSP 設定でカスタムインライン JavaScripts をホワイトリストに登録する必要があります。これにより、スクリプトの実行が明示的に許可され、デフォルトのセキュリティ制限が回避されます。

GTM では、改行やコメントの削除など、JavaScriptをドキュメントオブジェクトモデル（DOM）に挿入する前に変更する可能性があるので、GTM カスタムHTMLスクリプトを許可リストに登録するのは困難です。また、Googleのアルゴリズムは、通知なしに時間の経過と共に変化する可能性があり、ハッシュが無効になる可能性があります。手順 C で説明しているように、Google Chromeが生成したハッシュを使用し、許可リストのハッシュを定期的に更新する準備をする必要があります。または、より堅牢なソリューションを実現するには、Google Tag Manager カスタムHTMLJavaScriptに Nonce を署名することを検討してください。

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. ブロックされたJavaScriptが追加されたGoogle Chrome ブラウザーを使用して、チェックアウトページに移動します。
  2. Cmd+Option+J （macOSの場合）または Ctrl+Shift+J （Windows/Linux の場合）を押して、Developer Consoleを開きます。
  3. コンソールで CSP エラーメッセージを見つけます。
  4. エラーメッセージの最後の文に、ブロックされたスクリプトに生成されたハッシュコードが表示されます。
  5. 引用符を省略して、sha256- の後にコードをコピーします。
    
    メモ： JavaScript ファイルが複数ブロックされている場合、コンソールに複数のエラーメッセージが表示されます。許可リストに登録する必要がある正確なJavaScriptを特定してください。誤ったスクリプトを誤って許可リストに登録しないように、各JavaScript ファイルを 1 つずつ追加してテストすることをお勧めします。
    
    インライン JavaScriptのハッシュを生成する方法について詳しくは、『Adobe Commerce Developer Content Security Policies Guide 』の詳細な CSP 設定を参照してください。
スクリプトハッシュを許可リストに加えます。まず、モジュールの 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:module:Magento_Csp:etc/csp_whitelist.xsd">

< ポリシー >

< policy id="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>
キャッシュをフラッシュします。csp_whitelist.xml ファイルにハッシュを追加した後は、変更が有効になるようにキャッシュをフラッシュする必要があります。キャッシュをフラッシュすると、保存されているデータがクリアされ、更新された CSP 設定を直ちに適用できます。 System に移動して、キャッシュをフラッシュできます。 > ツール Commerce管理パネルの キャッシュ管理 を > リックし、「Magentoキャッシュをフラッシュ 」ボタンを選択します。または、次のコマンドラインを使用します。

bin/magento cache:flush

このコマンドは、すべてのキャッシュタイプをクリアし、新しい CSP 設定がシステムで認識されるようにします。

Nonce を使用したGoogle Tag Manager カスタムHTMLJavaScriptへの署名

GTM でJavaScriptを実行できるようにするもう 1 つの方法は、スクリプトの開始タグに nonce を追加することです。 nonce 属性は、特定のインラインスクリプトを動的に許可リストに登録し、実行を許可する方法を提供します。詳しくは、CSP nonce プロバイダーを使用したインラインスクリプトの許可ドキュメントを参照してください。

警告： GTM アカウントが侵害された場合、攻撃者は悪意のあるJavaScriptをストアフロントに挿入し、nonce で署名して実行を許可する可能性があることに注意してください。これにより、チェックアウトプロセス中に機密データが盗まれる可能性があります。

Adobe Commerce開発第 部

注意 :Adobe Commerce 2.4.8 以降のバージョンでは、CSP Nonce 変数のインジェクションが標準で提供されます。以前のバージョンのAdobe Commerceにこのカスタムインジェクションを実装する場合は、Adobe Commerce 2.4.8 以降にアップグレードする前に、これらのカスタマイズをロールバックしてください。 Adobe Commerce 2.4.8 以降を使用している場合は、GTM の設定の節に進んでください。

カスタムモジュールで、CSP Nonce Provider を使用し、nonce をJavaScriptに渡します。詳しくは、Adobe Commerce開発者向けドキュメントの基本テンプレートの概念を参照してください。
JavaScriptを使用して nonce でグローバル変数を挿入します。

< スクリプト >

window.cspNonce = config.cspNonce;

< /script>
このスクリプトは、現在の nonce の値を使用してグローバル変数 cspNonce を設定します。その後、Google タグマネージャー変数に取り込み、カスタムHTMLスクリプトに署名して、CSP 下で実行できるようにします。すべてのページに挿入する必要があります。

GTM 設定パート

この変数の値を GTM から取得します。
1. 型 Google変数 のJavaScript タグマネージャー変数を作成します。変数には明確な名前を付けます。後で参照します。この例では、gtmNonce です。
2. グローバル変数名 を、前の手順で挿入したJavaScript グローバル変数の名前に設定します。この例では、cspNonce です。
チェックアウト時に実行する必要があるJavaScriptを含むカスタムHTMLブロックを変更して、nonce 属性を含め、前に作成した GTM 変数を参照します。

< スクリプト nonce="{{gtmNonce}}">
console.log （"This is a test"）;
< /script>

メモ：「 Support document.write」チェックボックスをオンにします。これは、スクリプトが正しく機能するために不可欠です。

nonce 属性を追加すると、スクリプトは指定された nonce で署名され、コンテンツセキュリティポリシー（CSP）の下で安全に実行できます。

recommendation-more-help

3d58f420-19b5-47a0-a122-5c9dab55ec7f