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

最終更新日： 2026年7月30日

トピック：
Checkout
Security
Orders
Payments

作成対象：

Developer

この記事では、次のContent Security Policy ディレクティブに違反しているため、「インラインスクリプトの実行を拒否しました："script-src …"」を使用して、CSP restricted modeのチェックアウトページを表示する際のAdobe Commerce 2.4.7の問題に関する説明と修正について説明します。ブラウザーコンソールのログにエラーメッセージが表示されます。

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

Adobe Commerce on cloud infrastructure、Adobe Commerce on-premises、Magento Open Source:

2.4.7
2.4.6-pX
2.4.5-pX
2.4.4-pX

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

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

複製する手順:

ストアフロントに移動します。
商品をカートに追加し、チェックアウトに進みます。

期待される結果:

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

実際の結果:

チェックアウトページが空白であるか、コンポーネントが欠落しています。次のJS エラーがブラウザーコンソールのログに表示されます。「次のContent Security Policy ディレクティブに違反しているため、インラインスクリプトの実行を拒否しました："script-src …"

原因

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

Solution

CSPが原因で特定のスクリプトがブロックされているため、ブラウザーのエラーが表示される場合があります。

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src

この問題を修正するには、のいずれかを実行する必要があります。

Whitelistは、SecureHtmlRenderer クラスを使用してブロックされたスクリプトです。

スクリプトの実行を許可するには、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

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(); } }`

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();
    }
}

モジュールのcsp_whitelist.xml ファイルに hashを追加します。

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

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

複製する手順:

ストアフロントに移動します。
商品をカートに追加し、チェックアウトに進みます。
支払い方法を選択します。

期待される結果:

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

実際の結果:

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

原因

Solution

CSPが原因で特定のスクリプトがブロックされているため、ブラウザーのエラーが表示される場合があります。

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src

この問題を修正するには、のいずれかを実行する必要があります。

Whitelistは、SecureHtmlRenderer クラスを使用してブロックされたスクリプトです。

Magento\Csp\Helper\CspNonceProviderのgenerateNonce関数を使用して、nonce文字列を取得します。

code language-php

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(); } }`

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();
    }
}

モジュールのcsp_whitelist.xml ファイルに hashを追加します。

問題 – お客様が注文できません

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

複製する手順:

ストアフロントに移動します。
商品をカートに追加し、チェックアウトに進みます。
支払い方法を選択します。
「注文を配置」をクリックします。

期待される結果:

正常に注文できるようになりました。

実際の結果:

注文はできません。次のJS エラーがブラウザーコンソールのログに表示されます。「次のContent Security Policy ディレクティブに違反しているため、インラインスクリプトの実行を拒否しました："script-src …"

原因

Solution

CSPが原因で特定のスクリプトがブロックされているため、ブラウザーのエラーが表示される場合があります。

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src

この問題を修正するには、のいずれかを実行する必要があります。

Whitelistは、SecureHtmlRenderer クラスを使用してブロックされたスクリプトです。

Magento\Csp\Helper\CspNonceProviderのgenerateNonce関数を使用して、nonce文字列を取得します。

code language-php

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(); } }`

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();
    }
}

モジュールのcsp_whitelist.xml ファイルに hashを追加します。

recommendation-more-help

commerce-knowledge-base-help