コンテンツ セキュリティ ポリシーが設定されているページでタグ マネージャーを使用する

コンテンツ セキュリティ ポリシー（CSP）は、広くサポートされているウェブ セキュリティ標準で、特定のタイプのインジェクション攻撃を防ぐことを目的としています。CSP を使うと、デベロッパーはアプリケーションで読み込まれるリソースを管理できるようになります。このガイドでは、CSP を使用しているサイトに Google タグ マネージャーをデプロイする方法を説明します。

注: CSP が期待どおりに動作していることを確認するには、report-uri や report-to ディレクティブを指定して、ポリシー違反の発生時にレポートが送信されるように設定することをおすすめします。

コンテナタグを有効にして CSP を使用する

CSP が設定されているページで Google タグ マネージャーを使用するには、タグ マネージャー コンテナコードの実行を許可する必要があります。このコードは、gtm.js スクリプトを挿入するインライン JavaScript コードとして構築されています。コード実行を許可する方法はいくつかあり、たとえばノンスまたはハッシュの使用が考えられます。推奨されるのは、ノンスを使用する方法です。レスポンスごとにサーバーが生成する推測できないランダムな値をノンスとして使用しましょう。ノンスの値は、Content-Security-Policy script-src ディレクティブで指定します。

Content-Security-Policy: script-src 'nonce-{SERVER-GENERATED-NONCE}'; img-src www.googletagmanager.com

次に、インラインのタグ マネージャー コンテナコードのノンス対応バージョンを使用し、インライン スクリプト要素のノンス属性を以下と同じ値に設定します。

<!-- Google Tag Manager -->
<script nonce='{SERVER-GENERATED-NONCE}'>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;var n=d.querySelector('[nonce]');
n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

その後、タグ マネージャーはすべてのスクリプトにノンスを伝播し、それがページに追加されます。

インライン スクリプトの実行を有効にするには、CSP でインライン スクリプトのハッシュを指定するなどの方法もあります。

ノンスまたはハッシュを使用した推奨方法に対応できない場合は、CSP の script-src セクションに 'unsafe-inline' ディレクティブを追加することで、タグ マネージャーのインライン スクリプトを有効にできます。

「unsafe-inline」の使用は推奨されません。このディレクティブを CSP に追加する際には、セキュリティ上の影響を慎重に考慮したうえでこの方法を選択してください。

この方法を使用する場合は、CSP で以下のディレクティブが必要になります。

script-src: 'unsafe-inline' https://www.googletagmanager.com
img-src: www.googletagmanager.com

注: タグによっては、他のオリジンからコンテンツを読み込んだり、他のオリジンにリクエストを行ったりするため、正常に機能させるには、追加の CSP ディレクティブを使用することが必要になります。

カスタム JavaScript 変数

CSP が存在する場合、カスタム JavaScript 変数はその実装方法の関係上 undefined と評価されます（CSP の script-src セクションに 'unsafe-eval' ディレクティブが指定されている場合を除く）。

セキュリティの脆弱性のリスクを避けるため、必要不可欠な場合にのみ「unsafe-eval」を使用してください。

script-src: 'unsafe-eval'

注: カスタム JavaScript 変数の代わりにカスタム テンプレートを使用することをおすすめします。カスタム テンプレートを使用して、カスタムタグや変数を作成することもできます。その場合、'unsafe-eval' の指定は不要になります。

プレビュー モード

Google タグ マネージャーのプレビュー モードを使用するには、CSP に次のディレクティブを含める必要があります。

script-src: https://googletagmanager.com https://tagmanager.google.com
style-src: https://googletagmanager.com https://tagmanager.google.com https://fonts.googleapis.com
img-src: https://googletagmanager.com https://ssl.gstatic.com https://www.gstatic.com
font-src: https://fonts.gstatic.com data:

注: ページが非セキュアな接続を介して配信される場合は、script-src ディレクティブの内容も、非セキュアな http://googletagmanager.com http://tagmanager.google.com URL に差し替える必要があります。

Google アナリティクス 4（Google アナリティクス）

Google アナリティクス 4（Google アナリティクス）タグを使用するには、CSP に次のディレクティブを含める必要があります。

script-src:  https://*.googletagmanager.com
img-src:     https://*.google-analytics.com https://*.googletagmanager.com
connect-src: https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com

Google シグナルを使用している Google アナリティクス 4（Google アナリティクス）デプロイメントにおいては、CSP に次のディレクティブを含める必要があります。

script-src:  https://*.googletagmanager.com
img-src:     https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com
             https://*.g.doubleclick.net https://*.google.com https://*.google.<TLD>
connect-src: https://*.google-analytics.com https://*.analytics.google.com
             https://*.googletagmanager.com https://*.g.doubleclick.net https://*.google.com https://*.google.<TLD>

注: CSP の構文では、ホスト名の右側でワイルドカードを使用できないため、Google の各トップレベル ドメイン（TLD）は個別に指定する必要があります。サポートされている Google の TLD の一覧は、https://www.google.com/supported_domains でご確認いただけます。

ユニバーサル アナリティクス（Google アナリティクス）

ユニバーサル アナリティクス（Google アナリティクス）タグを使用するには、CSP に次のディレクティブを含める必要があります。

script-src: https://www.google-analytics.com https://ssl.google-analytics.com
img-src: https://www.google-analytics.com
connect-src: https://www.google-analytics.com

注: ページが非セキュアな接続を介して配信される場合は、script-src ディレクティブで https://ssl.google-analytics.com を含める必要はありません。

Google 広告コンバージョン

Google 広告のコンバージョン タグを使用するには、CSP に次のディレクティブを含める必要があります。

セキュアな接続の場合:

script-src: https://www.googleadservices.com https://www.google.com
img-src: https://googleads.g.doubleclick.net https://www.google.com https://google.com

非セキュアな接続の場合:

script-src: www.googleadservices.com www.google.com
img-src: googleads.g.doubleclick.net www.google.com google.com

Google 広告リマーケティング

Google 広告のリマーケティング タグを使用するには、CSP に次のディレクティブを含める必要があります。

セキュアな接続の場合:

script-src: https://www.googleadservices.com https://googleads.g.doubleclick.net https://www.google.com
img-src: https://www.google.com https://google.com
frame-src: https://bid.g.doubleclick.net

非セキュアな接続の場合:

script-src: www.googleadservices.com googleads.g.doubleclick.net www.google.com
img-src: www.google.com google.com
frame-src: bid.g.doubleclick.net

Floodlight

Floodlight ユーザーは、次の設定を使用して CSP を有効にできます。<FLOODLIGHT-CONFIG-ID> の値を、特定の広告主 ID を許可する場合はその Floodlight 広告主 IDに、すべての広告主 ID を許可する場合は * に置き換えます。

すべてのユーザー向け:

img-src: https://<FLOODLIGHT-CONFIG-ID>.fls.doubleclick.net

タグ マネージャーの「カスタム スクリプト」ビーコンの場合:

frame-src: https://<FLOODLIGHT-CONFIG-ID>.fls.doubleclick.net

イメージタグの場合:

img-src: https://ad.doubleclick.net

同意モードの場合:

img-src: https://ade.googlesyndication.com