ドキュメントCommerceCommerce KB

制限モードでのストアフロントのチェックアウトページ CSP トラブルシューティング

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 開発者

ここでは、CSP restricted mode でチェックアウトページを表示している際に発生するAdobe Commerce 2.4.7 の問題と、「Refused to execute inline script that it permissions to following Content Security Policy directive: "script-src …"」というエラーメッセージについて説明します。

影響を受ける製品とバージョン

Adobe Commerce on cloud infrastructure、Adobe Commerce オンプレミス、およびMagento Open Source:

  • 2.4.7
  • 2.4.6-pX
  • 2.4.5-pX
  • 2.4.4-pX

問題 – ストアフロントのチェックアウトページが壊れているか、読み込めません

ストアフロントのチェックアウト ページが壊れているか、読み込めません。その際、「インラインスクリプトの実行を拒否しました：ブラウザーコンソールログに表示されるコンテンツセキュリティポリシーディレクティブ「script-src …」エラーメッセージに違反しているためです。

再現手順 :

  1. ストアフロントに移動します。
  2. 買い物かごに商品を追加し、チェックアウトに進みます。

期待される結果 :

チェックアウトページが正常に読み込まれる。

実際の結果 :

チェックアウトページが空白であるか、コンポーネントがありません。 「コンテンツセキュリティポリシーディレクティブ「script-src …」に違反しているので、インラインスクリプトの実行を拒否しました」という JS エラーがブラウザーコンソールログに表示されます

原因：

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. SecureHtmlRenderer クラスを使用して、ブロックされたスクリプトを Whitelist きます。

  2. スクリプトの実行を許可するには、CSPNonceProvider クラスを使用します。
    Adobe CommerceおよびMagento Open Source 2.4.7 以降には、各リクエストに一意の nonce 文字列を容易に生成できる Content Security Policy (CSP) 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. モジュールの csp_whitelist.xml ファイルに a hash を追加します。

問題 – 支払い方法が見つからないか、機能していません

支払い方法がないか、「インラインスクリプトの実行を拒否しました​ が表示される ​ストアフロントのチェックアウト」ページで機能しません。これは、ブラウザーコンソールログの「script-src …」エラーメッセージに違反しているためです。

再現手順 :

  1. ストアフロントに移動します。
  2. 買い物かごに商品を追加し、チェックアウトに進みます。
  3. 支払方法を選択します。

期待される結果 :

お支払い方法を選択し、正常に注文に進むことができます。

実際の結果 :

支払い方法がないか、機能していません。 「コンテンツセキュリティポリシーディレクティブ「script-src …」に違反しているので、インラインスクリプトの実行を拒否しました」という JS エラーがブラウザーコンソールログに表示されます

原因：

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. SecureHtmlRenderer クラスを使用して、ブロックされたスクリプトを Whitelist きます。

  2. スクリプトの実行を許可するには、CSPNonceProvider クラスを使用します。
    Adobe CommerceおよびMagento Open Source 2.4.7 以降には、各リクエストに一意の nonce 文字列を容易に生成できる Content Security Policy (CSP) 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. モジュールの csp_whitelist.xml ファイルに a hash を追加します。

問題 – 顧客が注文できない

顧客は、ブラウザーコンソールログのコンテンツセキュリティポリシーディレクティブ「script-src …」に違反するので、「 インラインスクリプトの実行を拒否されました」というエラーメッセージで注文できません。

再現手順 :

  1. ストアフロントに移動します。
  2. 買い物かごに商品を追加し、チェックアウトに進みます。
  3. 支払方法を選択します。
  4. Place Order をクリックします。

期待される結果 :

注文は正常に行われます。

実際の結果 :

注文することはできません。 「コンテンツセキュリティポリシーディレクティブ「script-src …」に違反しているので、インラインスクリプトの実行を拒否しました」という JS エラーがブラウザーコンソールログに表示されます

原因：

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. SecureHtmlRenderer クラスを使用して、ブロックされたスクリプトを Whitelist きます。

  2. スクリプトの実行を許可するには、CSPNonceProvider クラスを使用します。
    Adobe CommerceおよびMagento Open Source 2.4.7 以降には、各リクエストに一意の nonce 文字列を容易に生成できる Content Security Policy (CSP) 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. モジュールの csp_whitelist.xml ファイルに a hash を追加します。

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