「セキュリティを強化した直後、Google Site Kitのダッシュボードを開いたらグラフが表示されない」——当サイトで実際に起きたトラブルです。訪問者数などの数字は出ているのに、折れ線グラフと円グラフだけが灰色の四角のまま。同じ症状で検索してたどり着いた方のために、原因の切り分けから解決までの流れをそのまま記録しておきます。
結論を先に書くと、原因は自分で設定したCSP（Content-Security-Policy）が、Site Kitのグラフ描画に必要なGoogleのスクリプトをブロックしていたことでした。
先日、当サイトはセキュリティヘッダーの強化を行い、securityheaders.comでA評価を取得しました。その直後にこの症状に遭遇。数字は表示されるのにグラフだけが真っ白（正確には灰色の枠だけ）という、なんとも中途半端な壊れ方です。
第1章：まずは切り分け――どこが壊れているのか
- 広告ブロッカーなどの拡張機能……analytics系のリクエストを管理画面内でも遮断することがある
- CSP（Content-Security-Policy）……自分で設定したセキュリティヘッダーが外部スクリプトを弾いている
- キャッシュ……古い状態が残っているだけ
第2章：エラーメッセージは全部教えてくれる
F12キー（またはメニューから「デベロッパーツール」）を開き、Consoleタブを見ると、赤いエラーがずらり。
Loading the script ‘https://www.gstatic.com/charts/loader.js’ violates the following Content Security Policy directive: “script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’ …”
ポイント1：「violates the following Content Security Policy directive」の一文があるか。これがあれば原因はCSPで確定です。拡張機能やキャッシュの線は消えます。
ポイント2：「何が」「どのルールに」弾かれたか。
- ブロックされたURL →
https://www.gstatic.com/charts/loader.js - 弾いたルール →
script-src
つまり「gstatic.comというドメインのスクリプトが、script-srcという許可リストに載っていないのでブロックされた」と読めます。
第3章：.htaccessのCSPを修正する
原因が分かれば、あとは許可リストにドメインを足すだけです。当サイトはCSPを.htaccessで設定しているので、そこを編集します。
作業前に必ず.htaccessの全文をコピーしてバックアップを取ってください。.htaccessは1文字のミスでサイト全体が500エラーになります。バックアップさえあれば、貼り戻すだけで即復旧できます。
修正前のCSP（script-src部分の抜粋）：
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com https://www.google-analytics.com ...ここに https://www.gstatic.com を追記します：
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.gstatic.com https://www.googletagmanager.com https://www.google-analytics.com ...区切りは半角スペース、既存の値は消さない、CSP全体は1行のまま。この3点に注意して保存します。
Loading the stylesheet ‘https://www.gstatic.com/charts/49/css/core/tooltip.css’ violates the following Content Security Policy directive: “style-src ‘self’ ‘unsafe-inline’ …”
というわけで、style-src側にも追記します：
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://www.gstatic.com保存して、Ctrl+F5でハードリロード（ヘッダーはキャッシュされることがあるため、通常のリロードでは反映されない場合があります）。
第4章：これってセキュリティを緩めたことにならないの？
CSPは「怪しいものを全部締め出す」仕組みではなく、「このサイトが正当に通信する相手を明示的に宣言する」仕組みです。gstatic.comはGoogleフォントやreCAPTCHAでも使われる公式CDNであり、これを許可リストに載せるのは「正当な取引先を台帳に記載した」だけのこと。実際、修正後にsecurityheaders.comで再スキャンしても、A評価はそのまま維持されました。
むしろ危険なのは、「よく分からないから」とCSP自体を外してしまうことです。エラーが出るたびに、ブロックされたドメインが本当に必要なものか確認して、必要なものだけを1つずつ足していく。この運用こそがCSPの正しい付き合い方だと思います。
まとめ：3ステップで慌てず対処
同じ症状に遭遇したら、この3ステップです。
- 症状の確認……数字は出るのにグラフだけ出ない → ブラウザ側の描画ブロックを疑う
- F12 → Console……「violates … Content Security Policy」があればCSP確定。ブロックされたURLとディレクティブ名（script-src / style-src）をメモ
- CSPに追記……該当ディレクティブにドメインを追加。script用とstyle用は別々なので、両方エラーが出たら両方に
環境メモ：WordPress（SWELLテーマ）／ConoHa WING／CSPは.htaccessで設定／Google Site Kit使用。プラグインやサーバーのヘッダー設定機能でCSPを入れている場合は、編集場所が異なるだけで考え方は同じです。
コメント