コンテンツ セキュリティ ポリシーと統合する

コンテンツ セキュリティ ポリシー（CSP）は、読み込みと実行が許可されるリソースとスクリプトを制限することで、ウェブページを保護する手段です。CSP を有効にするには、ウェブサーバーからの HTTP レスポンスで Content-Security-Policy ヘッダーを設定します。

CSP を構成する標準的な方法は 2 つあります。

  1. ページにリソースを挿入できるドメインの許可リストを指定します。

  2. ランダムなノンスを指定し、ページ上のリソースを読み込むためにマークする必要があります。このアプローチは厳格な CSP と呼ばれます。

Google パブリッシャー タグ（GPT）が使用するドメインは時間の経過とともに変化するため、厳格な CSP（オプション 2）のみがサポートされています。このアプローチでは、古くなってサイトを損なう可能性があるドメインのローリング リストを維持する必要がなくなります。

GPT で CSP を設定する

  1. ウェブサーバーで CSP を有効にします。

    厳格な CSP の導入で説明されている手順に沿って、CSP ヘッダーを設定し、gpt.js を含むページ上のすべてのスクリプトタグにノンスを適用します。GPT は、特に次の CSP ディレクティブをサポートしています。

    Content-Security-Policy:
  object-src 'none';
  script-src 'nonce-{random}' 'unsafe-inline' 'unsafe-eval' 'strict-dynamic' https: http:;
  base-uri 'none';
  report-uri https://your-report-collector.example.com/

    ユースケースに適している場合は、より寛容なポリシーを選択できます。より制限の厳しいポリシーが予告なく適用される場合があります。

  2. クロスドメイン レンダリングを有効にします。

    広告 iframe は、CSP で許可されていない外部リソースを読み込む可能性があります。同じドメインの iframe は最上位ウィンドウの CSP を継承し、GPT はクリエイティブのコンテンツを制御できないため、通常、同じドメインのクリエイティブは CSP ヘッダーで適切に機能しません。

    すべてのクリエイティブでクロスドメイン レンダリングを有効にするには、広告スロットを読み込む前に googletag.pubads().setForceSafeFrame(true) を実行します。

    <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello GPT</title>
    <script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" nonce="KC7tcz53FHqumKP1" async></script>
    <script nonce="KC7tcz53FHqumKP1">
      window.googletag = window.googletag || {cmd: []};
      googletag.cmd.push(function() {
        googletag.pubads().setForceSafeFrame(true);
      });
    </script>
  </head>

テスト

Content-Security-Policy ではなく Content-Security-Policy-Report-Only ヘッダーを設定して、ポリシーをテストすることをおすすめします。ヘッダーは違反を報告しますが、ページでの違反は許可されます。