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