ドキュメントCommerceCommerce KB

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

Last update: Wed May 01 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • Developer

ここでは、でチェックアウトページを表示する際のAdobe Commerce 2.4.7 の問題に関する説明と修正点を説明します。 CSP restricted mode、「コンテンツセキュリティポリシーディレクティブ「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. 買い物かごに商品を追加し、チェックアウトに進みます。

期待される結果:

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

実際の結果:

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

原因：

Adobe CommerceおよびMagento Open Sourceバージョン 2.4.7 以降では、 CSP はで設定されています restrict-modeデフォルトでは、ストアフロントおよび管理領域およびの支払いページ用 report-only その他すべてのページのモード。
対応する CSP ヘッダーにが含まれていない unsafe-inline 内のキーワード script-src 支払いページのディレクティブ。 また、のみ 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 ヘッダー。

    の使用 generateNonce 関数 Magento\Csp\Helper\CspNonceProvider 手に入れる 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. 支払方法を選択します。

期待される結果:

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

実際の結果:

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

原因：

Adobe CommerceおよびMagento Open Sourceバージョン 2.4.7 以降では、 CSP はで設定されています restrict-modeデフォルトでは、ストアフロントおよび管理領域およびの支払いページ用 report-only その他すべてのページのモード。
対応する CSP ヘッダーにが含まれていない unsafe-inline 内のキーワード script-src 支払いページのディレクティブ。 また、のみ 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 ヘッダー。

    の使用 generateNonce 関数 Magento\Csp\Helper\CspNonceProvider 手に入れる 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 ヘッダーにが含まれていない unsafe-inline 内のキーワード script-src 支払いページのディレクティブ。 また、のみ 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 ヘッダー。

    の使用 generateNonce 関数 Magento\Csp\Helper\CspNonceProvider 手に入れる 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