AdSense審査合格！しかし広告が表示されない…犯人は「CSP」

苦労してNext.jsで構築した技術ブログ。Google AdSenseの審査についに合格し、「これで収益化のスタートラインに立った！」と喜び勇んで広告タグを貼り付けたものの、画面には何も表示されない。

開発者ツール（Chrome DevTools）のコンソールを開いてみると、そこには赤文字で大量のエラーが表示されていませんか？

Refused to load the script '...' because it violates the following Content Security Policy directive...

もしこのエラーが出ているなら、原因はお使いのサーバー（またはフレームワーク）が返しているCSP（Content Security Policy）ヘッダーです。

そもそもCSP（Content Security Policy）とは何か？

CSPは、XSS（クロスサイトスクリプティング）などの攻撃を防ぐためのセキュリティ機能です。「このサイトでは、許可されたドメインのスクリプトや画像しか読み込みませんよ」とブラウザに指示を出す仕組みです。

Next.js等のモダンなフレームワークで、セキュリティ意識高くヘッダーを設定している場合、「Google AdSense」や「アフィリエイトASP」のスクリプトは「許可されていない外部の怪しいコード」としてブロックされてしまうのです。

結論：AdSenseとASPを許容する next.config.js の完全解

「セキュリティは維持したい。でも広告は貼りたい」。 このジレンマを解消するために、私が実際に稼働させている next.config.js の設定を共有します。

以下のコードは、AdSense、Amazonアソシエイト、楽天、A8.net、もしもアフィリエイト などの主要ASPを許可しつつ、Sentry によるエラー監視や画像の最適化設定まで盛り込んだ「全部入り」の設定です。

実際のコード

注意: 上記のCSP設定（特にscript-src）は非常に長くなりますが、AdSense等のプログラマティック広告は、バックグラウンドで無数の広告配信サーバー（SSP/DSP）と通信するため、これらを網羅しないと広告が表示されない場合があります。

CSP設定の「沼」ポイント解説

1. script-src のホワイトリスト地獄

AdSenseやアフィリエイト広告を表示するためには、単に google.com を許可するだけでは足りません。 広告配信の仕組み上、doubleclick.net、googlesyndication.com、さらにAmazonや楽天、ValueCommerceなどのドメインも許可する必要があります。

上記のコードでは、AdSenseに加えて、日本の主要なアフィリエイトASP（A8, もしも, ValueCommerce）やAmazon、楽天に対応したドメインを網羅的に列挙しています。これらを一つずつ特定して追加していく作業こそが、まさに「沼」でした。

2. どうしても必要な unsafe-inline と unsafe-eval

セキュリティの観点からは推奨されませんが、GTM（Google Tag Manager）やAdSense、そして多くのASP提供のスクリプトを動かすには、以下の指定が事実上必須となります。

• unsafe-eval: 文字列からコードを評価・実行するために必要。
• unsafe-inline: <script>...</script>タグ内に直接書かれたコードを実行するために必要。

これを外すと、外部ツールの多くが機能停止するため、リスクを承知で許可しています。

3. 画像ドメイン（img-src）も忘れずに

広告スクリプトが動いても、バナー画像が表示されなければ意味がありません。 images.remotePatterns（Next.jsの画像最適化用設定）とは別に、CSPヘッダーの img-src にも広告画像の配信元ドメイン（例: *.rakuten.co.jp, *.amazon-adsystem.com）を許可する必要があります。

同時に導入したSentryとバンドル最適化

今回の next.config.js には、セキュリティ以外の改善も含まれています。

• Sentryの導入: @sentry/nextjs を使用して、本番環境で発生した予期せぬエラーをリアルタイムで検知・通知する設定を入れています。CSP違反のエラーもSentryで拾えるため、設定漏れの発見にも役立ちます。
• console.logの削除: compiler: { removeConsole: ... } の設定により、本番ビルド時のみ console.log を削除しています。デバッグコードの消し忘れによる情報漏洩を防ぎ、バンドルサイズも削減できます。

まとめ：セキュリティと収益化の両立を目指して

Next.jsでのサイト運営において、CSPの設定は避けて通れない高い壁です。しかし、一度適切に設定してしまえば、サイトの安全性を保ちながら収益化を行うことができます。

「AdSenseが通ったのに表示されない！」と焦っている方は、ぜひ今回紹介した next.config.js をベースに、ご自身の利用サービスに合わせて調整してみてください。