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

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

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 async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" nonce="KC7tcz53FHqumKP1"></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 ヘッダーを設定します。ヘッダーでは違反が報告されますが、ページでは引き続き許可されます。