Content Security Policy(CSP)を実装する
CSP はページが読み込めるリソース(スクリプト、スタイル、画像)を制限し、XSS やデータ注入を防ぎます。ポリシーディレクティブとレポート機能を学びましょう。
- 1
CSP は、リソースの供給元をホワイトリスト化する HTTP ヘッダー(Content-Security-Policy)です。ディレクティブ:default-src(フォールバック)、script-src(JavaScript)、style-src(CSS)、img-src、connect-src(fetch/XHR/WebSocket)、font-src、frame-src、object-src。同一オリジンには 'self'、何も許可しない場合は 'none'、インラインスクリプトには nonce かハッシュを使います。CSP は、インラインスクリプトと許可されていない供給元をブロックして XSS を防ぎます。
- 2 ハッシュ計算ツール →
インラインスクリプトの内容の SHA-256 ハッシュを生成して、CSP のハッシュベースの許可リストに使います。CSP ディレクティブは script-src 'sha256-<base64-hash>' です。この特定のインラインスクリプトのみを許可します。代わりに nonce を使うこともできます:script-src 'nonce-<random>' とし、各 script タグに nonce="<random>" を追加します。nonce の方が好ましいです(ハッシュはミニファイで壊れるため)。
- 3 HMAC ジェネレーター →
ページ読み込みごとに CSP nonce(number used once)を生成します。nonce はランダムな base64 文字列で、CSP ヘッダーと各 script タグに含めます。正しい nonce を持つインラインスクリプトのみを許可し、未許可のものをブロックします。リクエストごとに新しい nonce を生成してください。再利用やハードコードは決してしないでください。
よくある質問
- サイトを壊さずに CSP へ移行するには?
- Content-Security-Policy-Report-Only(強制せず違反を報告)から始めてください。report-uri または reporting-api で違反を収集します。違反を修正します(インラインスクリプトを外部ファイルに移動、nonce/ハッシュを追加)。違反が止まったら、強制する CSP に切り替えます。この段階的アプローチでサイトの破壊を避けられます。
- CSP の nonce とハッシュのどちらですか?
- nonce:リクエストごとのランダム値をヘッダーと script タグに置く。nonce を持つ任意のインラインスクリプトを許可します。ハッシュ:スクリプト内容の SHA-256 をヘッダーに置く。その正確なスクリプトのみを許可します。nonce は簡単(スクリプトごとでなくページごとに 1 つ)ですが、サーバー側での生成が必要です。ハッシュは静的ページで機能しますが、スクリプト内容が変わると(ミニファイ、デプロイ)壊れます。