06 · トラブルシューティング
コンテンツセキュリティポリシーでスクリプトを許可する
厳格なポリシーは、リストにないアドレスからのスクリプトをブロックします。2 つ追加すれば、このスクリプトを通せます。
01症状
ブラウザのコンソールに、ページのコンテンツセキュリティポリシーに違反するため、スクリプトの読み込みまたは /api/event への接続を拒否したと表示されます。ライブチェックは待機中のままです。
02許可するもの
スクリプトのアドレスを script-src で許可し、イベントの送信先である connect-src でも同じアドレスを許可します。https://t.tallybyoutpost.com は既存のリストに追加し、置き換えないでください。
Content-Security-Policy: script-src 'self' https://t.tallybyoutpost.com; connect-src 'self' https://t.tallybyoutpost.com<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://t.tallybyoutpost.com; connect-src 'self' https://t.tallybyoutpost.com">// 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 までお知らせください。