ドキュメントCommerceCommerce KB

PaaS のみ

制限モードでの注文ページの作成のトラブルシューティ CSP グ

最終更新日： 2024年7月15日
  • トピック：

作成対象：

  • 開発者

この記事では、CSP restricted mode が 有効 で、かつ「Refused to execute inline script that it refused to been following Content Security Policy directive: "script-src …"」というエラーメッセージがブラウザーコンソールログに記録される場合に、管理者側で注文を行う際のAdobe Commerce 2.4.7 の問題について説明し、修正を示します。

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

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. Sales/Orders に移動します。
  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 文字列を取得します。

    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. Sales/Orders に移動します。
  2. 新しい注文を作成します。
  3. 顧客を新規作成します。
  4. 顧客詳細を入力します。
  5. 注文の詳細（製品、発送方法）を入力します。
  6. 支払方法を選択します。

期待される結果 :

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

実際の結果 :

支払い方法がないか、機能していません。 「コンテンツセキュリティポリシーディレクティブ「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 文字列を取得します。

    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. Sales/Orders に移動します。
  2. 新しい注文を作成します。
  3. 顧客を新規作成します。
  4. 顧客詳細を入力します。
  5. 注文の詳細（製品、発送方法）を入力します。
  6. 支払方法を選択します。
  7. 注文を送信します。

期待される結果 :

注文を正常に送信できます。

実際の結果 :

注文を送信できません。 「コンテンツセキュリティポリシーディレクティブ「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 文字列を取得します。

    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