コンテンツセキュリティポリシー設定

コンテンツセキュリティポリシー（CSP）は、Rokt Adsの統合に2つの独立した方法で影響を与える可能性があります。1つ目はアウトバウンドです：CSPは、あなたのページがRokt SDKをロードし、Roktにイベントを送信できるかどうかを決定します。2つ目はインバウンドです：CSPは、あなたのページをiframe内でロードできるサイトを決定します。これは、パートナーサイトでオファーが埋め込み体験として実行される場合に適用されます。この2つは異なるディレクティブを使用し、しばしば異なるチームによって管理され、独立して設定されます。一方を許可しても、もう一方が許可されるわけではありません。

方向	制御内容	CSPディレクティブ	必要な場合
アウトバウンド	あなたのページがRokt SDKをロードし、Roktにイベントを送信できるかどうか	script-src, connect-src	あなたのCSPがこれらのディレクティブを制限している場合、Web SDKの統合が必要です
インバウンド	Roktがパートナーサイトであなたのページをiframe内で表示できるかどうか	frame-ancestors	埋め込み体験、顧客がRoktの配置内であなたのファネルを完了する場合

このページでは両方について説明します。

注記

以下の変更は通常、SDKを統合するチームではなく、あなたのウェブサーバーまたはCDN設定を管理するチームによって行われます。さらなる支援が必要な場合は、Roktアカウントマネージャーにお問い合わせください。

注記

このページは広告主向けです。あなた自身のサイトでRoktの配置をホストしているパートナーの場合、あなたのページに適用されるディレクティブについてはWeb SDKのセキュリティを参照してください。

Rokt SDKのロードとデータ送信の許可

あなたのCSPがscript-srcを定義している場合、Roktのドメインがリストにない限り、ブラウザはRokt SDKスクリプトのロードを拒否します。connect-src（またはdefault-srcがconnect-srcにフォールバックする場合）を定義している場合、SDKはロードされるかもしれませんが、そのイベントとアイデンティティの呼び出しはブロックされます。どちらの場合も、ブラウザコンソールは何が起こったかを報告し、Refused to loadまたはRefused to connectエラーが責任を持つディレクティブを名前で示します。

これを解決するには、すでに定義しているディレクティブにRoktのドメインを追加します：

script-src https://apps.rokt.com https://apps.rokt-api.com https://apps.roktecommerce.com;
connect-src https://apps.rokt.com https://apps.rokt-api.com https://apps.roktecommerce.com;

apps.rokt-api.comは、SDKがロードされ、通信する主要なドメインです。apps.roktecommerce.comは、主要ドメインが到達不能な場合に試みるフォールバックです。使用されることは稀ですが、両方を含めてください。

注記

あなたのポリシーがすでに定義しているディレクティブのみを変更してください。あなたのCSPにscript-src、connect-src、またはdefault-srcがない場合、何もブロックされておらず、ここで変更する必要はありません。

ファーストパーティドメインを使用する場合

SDKをファーストパーティドメイン設定を使用して独自のサブドメインを通じてルーティングする場合、SDKはそのサブドメインからロードされ、イベントもそのサブドメインに送信されます。カスタムサブドメインをscript-srcとconnect-srcに追加し、サブドメインが応答しなくなった場合に備えて、Roktドメインもリストに残しておいてください。

CSPがサードパーティスクリプトを全く許可できない場合

特に規制産業において、一部の広告主はサードパーティのJavaScriptを完全にブロックするCSPを運用していますが、画像リクエストは許可しています。それが該当する場合、Pixel Serviceはこの状況に対応するように設計されています。

Roktがあなたのページを埋め込むことを許可する

埋め込み体験とは

埋め込み体験では、サインアップ、アプリケーション、またはアカウント開設ページが、通常は支払いまたは注文確認ページのような高意図の瞬間に、パートナーサイト上のRoktプレースメント内に直接表示されます。オファーをクリックしてサイトにリダイレクトされる代わりに、顧客はパートナーのページを離れることなく、既存のフローをその場で完了します。

技術的には、あなたのページURLはRoktプラットフォームで設定され、プレースメントコンテナ内のサンドボックス化されたクロスオリジンiframeでレンダリングされます。あなたのページは独自のオリジンを保持し、変更されずに動作します。リダイレクトフローと同様に、フォーム、分岐フロー、意思決定状態を完全に制御できます。サンドボックスは双方向の隔離を強制します：パートナーのページはあなたのコンテンツにアクセスできず、あなたのコンテンツも彼らのコンテンツにアクセスできません。

あなたのページはプレースメントコンテナの寸法内でレスポンシブにレンダリングされるべきです：

• デスクトップ: 幅 min(1024px, calc(100% - 128px)), 高さ min(900px, calc(100% - 128px))
• モバイル (768px画面幅以下): 幅 99%, 高さ 90%, ビューポートの下部にアンカー

このセクションで説明されているCSPの変更は、埋め込み体験を機能させるための4つの要素のうちの1つです：

#	要件	概要
1	iframeレンダリング可能なURL	あなたのページはクロスオリジンiframeでロードされ、上記のコンテナ寸法内でレスポンシブにレンダリングされます。
2	CSP frame-ancestors	あなたのページはRoktとパートナーのオリジンがフレームすることを許可します。これはこのセクションの主題です。
3	Rokt Web SDK	あなたのページは標準のWeb SDK統合を実行します。すでにログしているページビューとコンバージョンイベントは、進捗と意思決定状態を追跡するために必要なすべてをプレースメントに提供し、インセンティブが有効な場合には承認時に即座に報酬を提供します。追加の統合コードは必要ありません。
4	コンバージョントラッキング	リアルタイムのコンバージョンはWeb SDKコンバージョンイベントを通じて追跡されます。遅延した意思決定は、Event APIなどの既存のループクローズ統合を通じて報告されます。

あなたのRoktアカウントマネージャーは、残りの完全な統合仕様と、frame-ancestorsディレクティブのための完全で最新のオリジンリストを提供し、パートナーサイトが追加されるたびにそのリストを最新の状態に保ちます。

ブラウザがフレーミングを制御する方法

あるページがiframe内に別のページを読み込むとき、ブラウザはフレーム化されるページのレスポンスヘッダーをチェックし、フレーム化が許可されているかどうかを判断します。許可を持つヘッダーは2つあります:

• Content-Security-Policy: frame-ancestors ... は現代的なメカニズムです。フレーム化を許可するオリジンのリストを取り、特定のパートナーを許可しつつ他のすべてをブロックし続けることができます。これはRoktの統合で使用されます。
• X-Frame-Options はレガシーメカニズムです。すべてか何もないかの値（DENY, SAMEORIGIN）のみをサポートするため、Roktのような特定のパートナーを許可することはできません。あなたのページがこのヘッダーを送信する場合、埋め込み体験をレンダリングする前にframe-ancestorsディレクティブに置き換える必要があります。

あなたのページがどちらのヘッダーも送信しない場合、今日どのサイトでもフレーム化でき、起動するために変更する必要はありません。

注記

frame-ancestorsはdefault-srcから継承されません。あなたのCSPがdefault-srcを定義しているがframe-ancestorsを定義していない場合、フレーミングは無制限です。frame-ancestorsを追加することは、既存のポリシーへの追加であり、既にあるディレクティブの変更ではありません。

チェーン内のすべてのオリジンが重要な理由

あなたのページはパートナーのページの中に直接存在するわけではありません。それはRoktの配置の中にあり、さらにパートナーのページの中にあり、ブラウザはあなたのframe-ancestorsリストをそのチェーン内のすべてのオリジンと照合します。直近の親だけではありません。チェーン内のどのオリジンがリストから欠けていても、ブラウザはあなたのページのレンダリングを拒否します。

実際には、リストには3つのエントリーグループがあります:

1. あなた自身のオリジン。 'self'とあなたのサインアップドメインを含めます。例えばhttps://*.yourdomain.com。Roktの統合がなくてもあなたのページにはこれが必要です。
2. Roktドメイン。 これらは安定しており、すべての統合に対して同じです（以下参照）。
3. あなたのオファーが実行されるパートナーサイト。 これらは配置をホストするパブリッシャードメインです。Roktはこのリストを提供し、最新の状態を保ちます。

Roktドメイン

最も簡単な形式はワイルドカードを使用します:

https://*.rokt.com
https://*.rokt-api.com
https://roktdemo.com

https://*.rokt-api.comが含まれていることを確認してください。これは現在のRokt SDKで使用されており、以前のガイダンスに基づいて書かれたポリシーでは時々省略されます。これがないと、最新のSDKがブロックされます。

セキュリティチームがワイルドカードを許可しない場合

一部のチームはワイルドカードサブドメインを許可しないことを好みます。これが該当する場合は、ワイルドカードエントリを削除し、代わりに明示的なRoktドメインを使用してください：

https://wsdk.rokt.com
https://apps.rokt.com
https://apps.rokt-api.com
https://playground.rokt.com
https://apps.stage.rokt.com
https://apps.stage.rokt-api.com
https://playground.stage.rokt.com
https://apps-demo.rokt.com
https://roktdemo.com

パートナーエントリは依然として必要であり、アカウントマネージャーがそれらを明示的でワイルドカードを使用しない形式でも提供できます。

パートナードメイン

オファーをホストするパブリッシャードメインはキャンペーンに特有であり、Roktがパートナーを追加するにつれて変更されるため、ここには公開しません。アカウントマネージャーが、デプロイ準備が整った完全なframe-ancestors値と、パートナーリストが変更されるたびに更新されたエントリを送信します。

各パートナーについて、通常はベアドメインとワイルドカード形式の両方が表示されます。どちらの形式も含まれているため、特定のサイトがwwwからトラフィックを提供するかどうかに関係なくポリシーが適用されます。両方を保持することもできますし、各パートナーが使用する正確な形式をアカウントマネージャーに確認してリストを削減することもできます。

現在のポリシーの確認

何かを変更する前に、今日実際にページが送信しているものを確認してください。ホームページではなく、実際のファネルページ（サインアップまたはアプリケーションのURL自体）を確認してください。ポリシーはパスごとに異なることがよくあります。

1. ブラウザでファネルページを開きます。
2. 開発者ツールパネルを開き、ネットワークタブを選択します。
3. ページをリロードし、最初のリクエスト（タイプはドキュメント）を選択します。
4. レスポンスヘッダーの下で、x-frame-optionsとcontent-security-policyを探します。

SDKの方向については、script-src、connect-src、またはdefault-srcがポリシーに現れるかどうか、そしてRoktドメインがそれらに含まれているかどうかを確認してください。コンソールタブを使用すると簡単です：SDKがブロックされている場合、Refused to loadまたはRefused to connectエラーがどのディレクティブが原因かを示します。

フレーミングについては、見つかった内容が次に何をすべきかに直接対応します：

ページが送信するもの	意味	すべきこと
X-Frame-Optionsなし、frame-ancestorsなし	フレーミングは無制限	起動に必要なものはありません。より厳密に制御するために、オプションでRoktとパートナーのエントリを含むframe-ancestorsを追加できます。
frame-ancestorsに許可リストがある	リストされたオリジンのみがページをフレーム化できる	既存のリストにRoktとパートナーのエントリを追加します。
frame-ancestors 'none'	すべてのフレーミングがブロックされる	'none'をアカウントマネージャーからのオリジンの許可リストに置き換えます。
X-Frame-Options: SAMEORIGINまたはDENY	レガシーヘッダー、全か無か	ヘッダーを削除し、代わりにframe-ancestorsの許可リストを使用します。すべての最新ブラウザはframe-ancestorsをサポートしており、両方が存在する場合はそれが優先されます。

注記

curlのようなコマンドラインツールは、アプリケーションの実際のヘッダーではなく、ボット保護チャレンジを返すことがあります。これは、保護レイヤーがアプリケーションよりも先に応答するためです。上記のブラウザメソッドは、常に実際のユーザーが受け取るものを反映します。

変更のデプロイ

ヘッダーが設定される場所は、スタックによって異なります。CDNやエッジの設定（CloudFront、Cloudflare、Akamai）、Webサーバー（nginx、Apache）、またはアプリケーションフレームワーク自体である可能性があります。どこであっても、このページで説明されているディレクティブにのみRoktのエントリを追加し、ポリシーの他の部分は変更しないでください。

もしCSPが<meta http-equiv>タグで設定されている場合、frame-ancestorsはそこで無視されることに注意してください。ブラウザはそれをHTTPレスポンスヘッダーとしてのみ認識します。

クイックチェックリスト

SDKの読み込みとデータ収集（すべてのWeb SDK統合）：

• CSPがscript-srcを定義している場合、Roktドメインが存在する
• CSPがconnect-srcまたはdefault-srcを定義している場合、Roktドメインが存在する
• ファーストパーティドメインを使用している場合、カスタムサブドメインが両方に存在する
• ファネルページのブラウザコンソールにRefused to loadまたはRefused to connectエラーがない

埋め込み（埋め込み体験のみ）：

• 'self'と自身のサインアップドメインがframe-ancestorsに存在する
• https://*.rokt.comが存在する（または上記の明示的なRoktドメイン）
• https://*.rokt-api.comが存在する（現在のSDKに必要）
• https://roktdemo.comが存在する
• アカウントマネージャーから提供されたパートナードメインが存在する
• ファネルページからX-Frame-Optionsヘッダーが削除されている
• ホームページだけでなく、ファネルURL自体で変更が確認されている