ドキュメントコンテンツセキュリティポリシー

06 · トラブルシューティング

コンテンツセキュリティポリシーでスクリプトを許可する

厳格なポリシーは、リストにないアドレスからのスクリプトをブロックします。2 つ追加すれば、このスクリプトを通せます。

01症状

ブラウザのコンソールに、ページのコンテンツセキュリティポリシーに違反するため、スクリプトの読み込みまたは /api/event への接続を拒否したと表示されます。ライブチェックは待機中のままです。

02許可するもの

スクリプトのアドレスを script-src で許可し、イベントの送信先である connect-src でも同じアドレスを許可します。https://t.tallybyoutpost.com は既存のリストに追加し、置き換えないでください。

Header
Content-Security-Policy: script-src 'self' https://t.tallybyoutpost.com; connect-src 'self' https://t.tallybyoutpost.com
meta タグ
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://t.tallybyoutpost.com; connect-src 'self' https://t.tallybyoutpost.com">
Next.js
// next.config.js: add the address to the policy you already send.
const policy = [
  "script-src 'self' https://t.tallybyoutpost.com",
  "connect-src 'self' https://t.tallybyoutpost.com",
].join('; ');

module.exports = {
  async headers() {
    return [{ source: '/(.*)', headers: [{ key: 'Content-Security-Policy', value: policy }] }];
  },
};

スクリプトにはほかに何も必要ありません。インラインコードも、eval も、スタイルも、フレームも使いません。

03自分のドメイン経由の場合

スクリプトを自分のドメインから配信する場合、スクリプトとそのイベントは自分のアドレス上にあるため、'self' ですでに許可されています。

04うまくいったか確認する

足りない情報や、実際の画面と違う点はありませんか? どのページかを添えて support@tallybyoutpost.com までお知らせください。