Skip to main content

概要

コンテンツセキュリティポリシー(CSP)は、クロスサイトスクリプティング(XSS)を含む特定の種類の攻撃を検出して軽減するのに役立つ重要なセキュリティレイヤーです。厳格な CSP ディレクティブは、On-Site Messaging(OSM)、Web Personalization(WebP)、Cards などの MoEngage のアセットをブロックすることがよくあります。これは、これらのコンポーネントが従来、インラインイベントハンドラーや動的なスクリプト実行に依存しているためです。 サイトのセキュリティを損なうことなくシームレスな統合を実現するために、MoEngage Web SDK は暗号化 Nonce をサポートしています。初期化時に Nonce が指定されると、SDK は次の処理を行います。
  1. 属性の挿入: 動的に作成されるすべての <script> タグに Nonce を自動的に付与します。
  2. ハンドラーのリファクタリング: SDK によって作成されたアセットのインラインイベントハンドラー(onclick など)を、CSP に準拠した内部スクリプトにリファクタリングします。

CSP ヘッダーの設定

Nonce を設定する前に、CSP ヘッダー(script-src、connect-src、img-src など)で MoEngage のドメインがホワイトリストに登録されていることを確認してください。詳細については、Web SDK Integration を参照してください。
この機能を実装するには、セッション用に生成された特定の Nonce を信頼するように、サーバー側の CSP ヘッダーを設定する必要があります。
効果的なセキュリティを確保するため、Nonce はページの読み込みごとに生成される、暗号学的に強力な一意の値である必要があります。本番環境では、ハードコードされた Nonce を決して使用しないでください。

初期化と設定

CSP のサポートを有効にするには、生成された Nonce を Web SDK 統合スクリプトと SDK 初期化設定の両方に渡す必要があります。

1. Web SDK の統合

SDK が後続の DOM 操作やコンポーネントのレンダリングに Nonce を適用できるように、初期化フェーズで Nonce を渡します。

2. Web Personalization(WebP)

Web Personalization を利用している場合は、DOM にデプロイされたパーソナライズコンテンツがブラウザによってブロックされないように、WebP スクリプトの URL に Nonce を付加する必要があります。
以下のスクリプトを、実際のデータセンターの値と app_id で更新してください。詳細については、Web Personalization を参照してください。

フレームワークとプラットフォームの互換性

この機能は、次のフレームワークで利用できます。
  • NPM
  • GTM
  • Flutter Web

検証

次のようにコンソールを分析することで、実装が成功したかどうかを検証できます。 コンソールの分析: Nonce が欠落しているか一致しない場合、ブラウザは Refused to execute inline event handler because it violates the following Content Security Policy directive…” という違反をログに記録します。

よくある質問

Nonce が指定されていない場合はどうなりますか? コンテンツセキュリティポリシー(CSP)に script-src が含まれているものの ‘unsafe-inline’ が含まれていない場合、Nonce を指定しないと、On-site Messaging や Cards などの SDK によって生成される機能が CSP によってブロックされます。