セキュリティ設定(CSP)のあるサイトにタグを設置する
この記事が必要な方
タグを正しく貼ったのに計測が始まらず、ブラウザの開発者ツール(F12キー)の 「コンソール」に、次のような赤いエラーが出ている方向けです。
Refused to load the script 'https://analyticscore.jp/t.js' because it violates the following Content Security Policy directive …Refused to connect to 'https://analyticscore.jp/c' because it violates …
このエラーが出ていない場合、原因は別にあります(広告ブロッカー・キャッシュ・貼り付け位置など)。 登録画面の「設置確認」が自動で切り分けて案内しますので、まずそちらをご覧ください。 CSPを設定した覚えのないサイトには、たいていCSPはありません。
CSPとは(1分で)
CSP(Content Security Policy)は、「このサイトでは、どこのプログラムなら動かしてよいか」の許可リストです。 リストに無いものはブラウザがすべてブロックします。不正なスクリプトからサイトを守る仕組みで、 設定していること自体はとても良いことです。
ただし許可リスト方式なので、計測タグも「許可」に載せるまで動きません。 エラーも画面には出ず、コンソールにだけ記録されるため、「貼ったのに数字が出ない」ように見えます。
直し方 — 許可する項目は2つ
計測には2種類の通信があり、それぞれ別の項目で許可します。
- ① タグ本体の読み込み(script-src) …
https://analyticscore.jpを追加 - ② データの送信(connect-src) …
https://analyticscore.jpを追加
①だけ許可して②を忘れるのがいちばん多いつまずきです。その場合、タグは読み込まれるのに データが届かない、という中途半端な状態になります。必ず両方を追加してください。
変更後のイメージ(該当部分のみ):
script-src 'self' https://analyticscore.jp; connect-src 'self' https://analyticscore.jp;
connect-src の行がもともと無い場合は、足さなくて大丈夫なことが多いです (無ければ script-src などの設定が代わりに使われます)。①を足しても 「Refused to connect」のエラーが残るときだけ、②も追加してください。
CSPはどこで設定されているか
心当たりのある場所から順に探してください。
- サーバーの設定ファイル … nginx の設定や .htaccess の
Content-Security-Policyヘッダ - HTMLの中 …
<meta http-equiv="Content-Security-Policy" …>という行 - セキュリティ系のプラグイン・CDNの設定 … WordPressのセキュリティプラグインや、CDNのセキュリティ機能
- アプリのコード … 自作のWebアプリでは、ミドルウェア等でヘッダを組み立てていることがあります
ご自身で設定した覚えがなければ、サイトの制作会社や開発担当の方に 「Content-Security-Policy に analyticscore.jp を2箇所(script-src と connect-src)追加してください」 と伝えれば通じます。
開発者の方へ — nonce方式のサイトの場合
CSPが 'nonce-…' と 'strict-dynamic' で運用されているサイトでは、 script-src にドメインを足しても無視されます(strict-dynamic の仕様です)。 この場合は、タグの <script> 自体にページごとの nonce を付けてください。
<script
async
src="https://analyticscore.jp/t.js"
data-site="あなたのサイトID"
data-endpoint="https://analyticscore.jp/c"
nonce={nonce}
/>- connect-src への追加(上記②)は nonce 方式でも必要です
- React/Next.js では、タグを後からJavaScriptで挿入する方法(next/script の afterInteractive 等)ではなく、HTMLに直接出る形(素の <script async>)で置くことをおすすめします。 後から挿入する方法だと、登録画面の「設置確認」(サーバーからHTMLを見て確認する機能)が タグを見つけられません(計測自体は動きます)
直ったかの確認
- 設定を反映(サーバー設定ならリロード、キャッシュがあれば削除)
- シークレットウィンドウでサイトを開き、コンソール(F12)の赤いエラーが消えたことを確認
- 登録時なら「設置確認」画面が数秒で緑になります。登録済みならダッシュボードに今の訪問が載ります
うまくいかないとき
- エラーは消えたのに検出されない — 広告ブロッカーの可能性があります。拡張機能を一時的に切るか、 別のブラウザでお試しください。
- 設定を変えたのにエラーが残る — CSPが2箇所(サーバーとHTMLなど)で設定されていると、厳しいほうが勝ちます。もう1箇所ないか探してください。
- 解決しない場合は support@analyticscore.jp まで、 コンソールのエラー文をコピーしてお送りください。