WordPressサイトのContent Security Policy設定：Google AnalyticsとAdSenseが反映されなくなった時の対処法
突然の異変：Google Analyticsが計測不能に
私のWordPressサイト（Cocoonテーマ使用、ConoHaサーバー）で数日前から奇妙な現象が発生していました。Google Analyticsのカウントがまったく記録されなくなったのです。
「確かに小規模なブログだけど、数人は来てくれているはず。何より自分がスマホから見てもカウントされていない…」
最初は「頻繁にアクセスするから、もしかしてGoogleに弾かれた？」と考えましたが、調査を進めると別の原因が浮かび上がってきました。
【重要なお知らせ】 このシリーズは私がWordPressのセキュリティ強化に取り組んだ「体験記」として時系列で公開しています。
- 第1部：【Cocoon】CSP/クリックジャッキング対策｜中級者ならできるセキュリティ強化
- 第2部（本記事）：【Cocoon】.htaccessをいじったせいでAnalyticsとAdSenseが反映されなくなった話
- 第3部：【Cocoon】テザリングの落とし穴！AIOSでブルートフォース攻撃設定をしたら127.0.0.1 でログインできなくなった話
時系列での学びを追体験したい方はぜひ順番に読んでください。ただし、**実際の実装には第3部の内容をベースにしてください**。第1部・第2部で紹介した設定はその後の経験によって改良されており、第3部ではより安全で問題の少ない設定方法を解説しています。特にモバイルテザリングなどIP変動環境では、第3部の注意事項を必ずご確認ください。
原因究明：.htaccessファイルを確認する
心当たりを探っていくと、つい最近.htaccessファイルに以下のようなセキュリティ関連の設定を追加したことを思い出しました。
# BEGIN All In One WP Security #AIOWPS_BASIC_HTACCESS_RULES_START Require all denied Order deny,allow Deny from all ServerSignature Off LimitRequestBody 10485760 Require all denied Order deny,allow Deny from all #AIOWPS_BASIC_HTACCESS_RULES_END # END All In One WP Security # BEGIN HSTS Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" # END HSTS # BEGIN X-Frame-Options Header always set X-Frame-Options "SAMEORIGIN" # END X-Frame-Options # BEGIN Content-Security-Policy Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;" # END Content-Security-Policy
特に注目すべきは最後の「Content-Security-Policy」の部分です。これが問題の可能性があると思い、調査を進めました。
問題の特定：Content Security Policy（CSP）とは何か？
まず、この「Content Security Policy（CSP）」とは何かを理解する必要があります。これは比較的新しいWebセキュリティの仕組みで、Webサイトに「どのリソース（スクリプト、画像、スタイルなど）をどこから読み込むことを許可するか」を指定するものです。
言い換えれば、「このサイトではこのドメインからのJavaScriptだけ実行を許可する」「このサイトではこのドメインからの画像だけ表示を許可する」といったルールを設定できます。これによりクロスサイトスクリプティング（XSS）などの攻撃からサイトを守ることができます。
私は「All In One WP Security」プラグインを使いながら、より強固なセキュリティのために.htaccessに直接CSP設定を追加していました。しかし、その設定が厳格すぎたのです。
問題の確認：開発者ツールを使う
問題を確認するため、ブラウザの開発者ツール（F12キー）を使ってエラーを確認しました。
Refused to load the script '' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'".
このエラーメッセージから、CSP設定によって外部スクリプトの読み込みがブロックされていることが分かりました。私の設定では「自分のサイトのスクリプトのみ許可」としていたため、Google Analytics（google-analytics.comドメイン）からのスクリプト読み込みができなかったのです。
これを初心者向けに言い換えると：「セキュリティドアを設置したはいいが、友達まで締め出してしまった」状態でした。
解決策：CSP設定の修正
Google Analyticsを動作させるには、CSP設定にGoogle関連のドメインを許可する必要があります。以下のように修正しました：
# BEGIN Content-Security-Policy Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.google-analytics.com https://*.googletagmanager.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://*.google-analytics.com; connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com;" # END Content-Security-Policy
主な変更点は以下の通りです：
– script-srcにhttps://*.google-analytics.com https://*.googletagmanager.comを追加
– img-srcにhttps://*.google-analytics.comを追加
– connect-srcにhttps://*.google-analytics.com https://*.analytics.google.comを追加
この修正により、Google Analyticsのスクリプト、画像、接続が許可されました。
「*（アスタリスク）」はワイルドカードで、例えば*.google-analytics.comはwww.google-analytics.comやssl.google-analytics.comなど、すべてのサブドメインを指します。
関連する問題：さらなる発見
CSP設定を修正した後、サイトをチェックすると、他の問題も発見しました。ブラウザの開発者ツールにはまだいくつかのエラーが表示されていました：
Refused to load the image '' because it violates the following Content Security Policy directive: "img-src 'self' data: https://*.google-analytics.com".
これはGoogle Tag Managerの画像がブロックされていることを示しています。また、同様の問題でTwitterの埋め込みコンテンツも表示されていませんでした：
Refused to frame 'https://platform.twitter.com/' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.
さらに、子テーマのJavaScriptファイルが見つからないという404エラーもありました：
Failed to load resource: the server responded with a status of 404 () /wp-content/themes/cocoon-child-master/javascript.js/
完全解決：総合的なCSP設定
すべての問題を解決するために、CSP設定を以下のように更新しました：
# BEGIN Content-Security-Policy Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.google-analytics.com https://*.googletagmanager.com https://ajax.googleapis.com https://cdnjs.cloudflare.com https://platform.twitter.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://*.google-analytics.com https://*.googletagmanager.com https://secure.gravatar.com; font-src 'self' data:; connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; frame-src 'self' https://platform.twitter.com https://syndication.twitter.com;" # END Content-Security-Policy
主な追加点：
– CDNリソース（ajax.googleapis.com, cdnjs.cloudflare.com）の許可
– Twitter関連ドメイン（platform.twitter.com, syndication.twitter.com）の許可
– Gravatar画像の許可（secure.gravatar.com）
– フォントの読み込みに関する設定（font-src）
また、404エラーが出ていたjavascript.jsファイルについては、子テーマディレクトリ（wp-content/themes/cocoon-child-master/）に空のファイルを作成することで解決しました。
# 空のjavascript.jsファイルを作成するコマンド例（サーバーでの操作） touch /path/to/wp-content/themes/cocoon-child-master/javascript.js
Google AdSenseも動かない？後日談
数日後、Google AdSenseも機能していないことに気づきました。開発者ツールで確認すると、以下のエラーが表示されていました：
Refused to load the script 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.google-analytics.com https://*.googletagmanager.com https://ajax.googleapis.com https://cdnjs.cloudflare.com https://platform.twitter.com".
（注：上記のXXXXXXXXXXXXXXはプライバシー保護のため実際のパブリッシャーIDを伏せています）
Google Analytics同様、AdSenseのドメインも許可する必要がありました。最終的なCSP設定は以下の通りです：
# BEGIN Content-Security-Policy Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.google-analytics.com https://*.googletagmanager.com https://ajax.googleapis.com https://cdnjs.cloudflare.com https://platform.twitter.com https://*.googlesyndication.com https://*.doubleclick.net; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://*.google-analytics.com https://*.googletagmanager.com https://secure.gravatar.com https://*.googlesyndication.com https://*.doubleclick.net; font-src 'self' data:; connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://*.googlesyndication.com https://*.doubleclick.net; frame-src 'self' https://platform.twitter.com https://syndication.twitter.com https://*.googlesyndication.com https://*.doubleclick.net googleads.g.doubleclick.net;" # END Content-Security-Policy
AdSense関連で追加したドメインは以下の通りです：
– https://*.googlesyndication.com
– https://*.doubleclick.net
– googleads.g.doubleclick.net
これらのドメインをscript-src、img-src、connect-src、frame-srcディレクティブに追加することで、AdSenseが正常に動作するようになりました。
学んだこと：CSP設定のバランスとデバッグ方法
この経験から、以下のことを学びました：
– セキュリティとサービス互換性のバランス
セキュリティを高めることは重要ですが、必要なサービス（Analytics, AdSense, SNS連携）までブロックしないよう注意が必要です。
– 開発者ツールの重要性
ブラウザの開発者ツール（F12）は問題の特定に非常に役立ちます。エラーメッセージを見れば、何がブロックされているかすぐにわかります。
– 段階的な設定変更の重要性
すべてを一度に変更するのではなく、一つずつ変更して確認することで、何が効果があったのかを把握できます。
– CSPの設定はドメイン単位で考える
リソースを提供する「ドメイン」と、リソースの「種類（スクリプト、画像など）」の組み合わせで設定します。よく使われるサービスのドメインを覚えておくと便利です。
主要サービスに必要なCSPドメイン一覧
今後の参考のために、主要サービスが必要とするドメインをまとめました：
Google Analytics
– https://*.google-analytics.com
– https://*.googletagmanager.com
– https://*.analytics.google.com
Google AdSense
– https://*.googlesyndication.com
– https://*.doubleclick.net
– googleads.g.doubleclick.net
Twitter埋め込み
– https://platform.twitter.com
– https://syndication.twitter.com
WordPress.org（Gravatar）
– https://secure.gravatar.com
一般的なCDN
– https://ajax.googleapis.com
– https://cdnjs.cloudflare.com
これらのドメインを適切なディレクティブ（script-src, img-src, connect-src, frame-src）に追加することで、各サービスを正常に動作させることができます。
CSP設定バリエーション：サイトのタイプ別推奨設定
サイトの構成に応じて必要なCSP設定は異なります。以下に主なバリエーションを紹介します。
1. 基本セット（アクセス解析のみ）
# BEGIN Content-Security-Policy Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.google-analytics.com https://*.googletagmanager.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://*.google-analytics.com https://*.googletagmanager.com https://secure.gravatar.com; font-src 'self' data:; connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com;" # END Content-Security-Policy
2. SNS連携あり（TwitterやFacebookの埋め込みを使用）
# BEGIN Content-Security-Policy Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.google-analytics.com https://*.googletagmanager.com https://platform.twitter.com https://connect.facebook.net; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://*.google-analytics.com https://*.googletagmanager.com https://secure.gravatar.com https://*.twimg.com https://*.fbcdn.net; font-src 'self' data:; connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; frame-src 'self' https://platform.twitter.com https://syndication.twitter.com https://www.facebook.com;" # END Content-Security-Policy
3. 広告あり（Google AdSenseを使用）
# BEGIN Content-Security-Policy Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.google-analytics.com https://*.googletagmanager.com https://*.googlesyndication.com https://*.doubleclick.net; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://*.google-analytics.com https://*.googletagmanager.com https://secure.gravatar.com https://*.googlesyndication.com https://*.doubleclick.net; font-src 'self' data:; connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://*.googlesyndication.com https://*.doubleclick.net; frame-src 'self' https://*.googlesyndication.com https://*.doubleclick.net googleads.g.doubleclick.net;" # END Content-Security-Policy
まとめ：バランスの取れたCSP設定がカギ
WordPressサイトでContent Security Policyを設定する際は、セキュリティと機能性のバランスが重要です。必要なサービスのドメインを許可しつつ、不要なドメインからのアクセスはブロックする設定が理想的です。
サイトに新しいサービスを追加した際は、CSP設定も見直す習慣をつけましょう。そして問題が発生した場合は、ブラウザの開発者ツールでエラーを確認し、必要なドメインを適宜追加していくことで解決できます。
私自身、「セキュリティを強化したい」という思いから始めた設定が思わぬ問題を引き起こしましたが、一つひとつ丁寧に原因を追究することで解決できました。WordPressサイト運営において、セキュリティと機能性は両立させることが可能です。適切な知識と対応で、安全かつ機能的なサイトを維持していきましょう。
推奨：最終的な包括的CSP設定
最後に、ほとんどのWordPressサイトで動作する包括的なCSP設定を紹介します。このコードは一般的なアクセス解析、SNS連携、広告表示に対応しています：
# BEGIN Content-Security-Policy Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.google-analytics.com https://*.googletagmanager.com https://ajax.googleapis.com https://cdnjs.cloudflare.com https://platform.twitter.com https://*.googlesyndication.com https://*.doubleclick.net https://connect.facebook.net; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https://*.google-analytics.com https://*.googletagmanager.com https://secure.gravatar.com https://*.googlesyndication.com https://*.doubleclick.net https://*.twimg.com https://*.fbcdn.net; font-src 'self' data: https://fonts.gstatic.com; connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://*.googlesyndication.com https://*.doubleclick.net; frame-src 'self' https://platform.twitter.com https://syndication.twitter.com https://*.googlesyndication.com https://*.doubleclick.net googleads.g.doubleclick.net https://www.facebook.com https://www.youtube.com;" # END Content-Security-Policy
必要に応じて、ご自身のサイトで使用していないサービスのドメインは削除してもかまいません。セキュリティと利便性のバランスを考えながら、最適な設定を見つけてください。
