Googleタグマネージャーは今では一般的なツールとなっていますが、 ブラウザなどによるセキュリティ関連の新しい仕様によって、あるときから急にタグマネージャーが使えないといったことが起きたりします。
コンテンツセキュリティポリシー（CSP）とは
そのうちの1つでよくあるのがコンテンツセキュリティポリシー（Content Security Policy：CSP）です。ざっくり説明すると、 Webサイト・ページはクロスサイトスクリプティング（XSS）などに対する脆弱性があるのですが、ファイルやスクリプトなどのリソースを拒否・受け入れする仕様です。
つまり、ページで「特定のサイトからのスクリプト（ファイル）しか使わないので、ほかはすべて拒否します」といった宣言をし、ブラウザはそれをもとにスクリプトの取捨選択をするといった感じです。
GoogleタグマネージャーやGoogleアナリティクスも例外ではなく、ここで宣言をしておかないと使えなくなり、Chromeなどのブラウザのコンソールには下記のようなエラーが表示されます。
コンテンツセキュリティポリシーの設定と種類
コンテンツセキュリティポリシーの設定
CSPの設定方法は主に HTTPレスポンスヘッダと<meta>タグの2種類あります。（他にもありますが割愛します）
- HTTPヘッダー：Content-Security-Policy: default-src \’self\’
- metaタグ：<meta http-equiv=\”Content-Security-Policy\” content=\”default-src \’self\’\”>
上記の default-src \’self\’ の部分をディレクティブと呼び、複数のディレクティブを設定する場合は；でつなげます。
ちなみに、上記の設定は「すべてのコンテンツを自身のドメイン（サブドメインは除く）から取得する」ということを表しています。
コンテンツセキュリティポリシーの制御対象
CSPでは制御対象のリソースを指定できます。主なものは以下になります。
- style-src：CSSの読み込み
- frame-src：<iframe>による読み込み
- default-src ：設定がない場合に適用
Googleタグマネージャーへの影響
このようにCSPでリソースの取得の制限をしているので、このWebサイトから見たら外部に当たるGoogleタグマネージャーやGoogleアナリティクスも対象になってしまいます。
下記の例では、すべてのコンテンツを自身のドメイン (サブドメインを除く)からのみ許可しているため、 GoogleタグマネージャーやGoogleアナリティクスのスニペット（スクリプト）は無効になります。
<meta http-equiv=\"Content-Security-Policy\" content=\"default-src \'self\'\">Googleタグマネージャーが使えるようにするためのCSPの設定
基本設定
Googleタグマネージャーを使えるようにするには、まず最初にCSPのscript-src に \’unsafe-inline\’ を追加します。
script-src: \'unsafe-inline\' https://www.googletagmanager.com
img-src: https://www.googletagmanager.com非セキュアな場合はimg-srcディレクティブのGoogleタグマネージャーをhttpにします。
script-src: \'unsafe-inline\' https://www.googletagmanager.com
img-src: http://www.googletagmanager.comカスタム JavaScript変数
カスタムJavaScript変数を使用している場合はscript-src: \’unsafe-eval\’も追加する必要があります。
script-src: \'unsafe-eval\'プレビュー モード
Googleタグマネージャーのプレビューモードを使う場合は、さらにCSPに下記のディレクティブを追加します。
script-src: https://tagmanager.google.com
style-src: https://tagmanager.google.com https://fonts.googleapis.com
img-src: https://ssl.gstatic.com https://www.gstatic.com
font-src: https://fonts.gstatic.com data:非セキュアな場合はscript-src: https://tagmanager.google.comのプロトコルをhttpに変更してください。
Googleアナリティクスを使えるようにするためのCSPの設定
Googleアナリティクスを使用する場合はgoogle-analytics.comも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を削除して構いません。
Web開発者との情報共有が大切
このCSPの設定は通常はWeb開発者が行っていますが、彼らはタグマネージャーやアナリティクスについてはあまり気にしていません。そのため、CSPの設定を追加しても連絡が来ないことはよくあります。
その一方で、Web分析者やタグマネージャーの設定者もCSPなんてふだんは気にしないですし、内容もわかりません。コンソールにエラーが出ても通常は無視するでしょう。
アナリティクスにイベントやページビューが出てこないことはすぐに気づきますが、その原因を探すのは難しいです。
ですので、問題を防ぐにはふだんからWeb開発者との情報共有が大切です。コミュニケーションを取っておくことで、Web開発者から「今度CSPの設定を入れることになりました。CSPとは・・・・」といったことを教えてもらうことで、「タグマネージャーやアナリティクスに影響がでるかもしれない」と気づくことができます。
]]>