セキュリティ設定(CSP)のあるサイトにタグを設置する
このページでできることセキュリティ設定(CSP)に止められている計測タグを、許可を2つ足して動かせるようになります。
必要な方タグを正しく貼ったのに計測が始まらず、ブラウザのコンソールに「Content Security Policy」の赤いエラーが出ている方。
読まなくてよい方そのエラーが出ていない方。原因は別にあり、登録画面の「設置確認」が案内します。 CSP を設定した覚えのないサイトには、たいてい 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とは(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 の行がもともと無い場合は、足さなくて大丈夫なことが多いです (無い場合は default-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 まで、 コンソールのエラー文をコピーしてお送りください。