CSPは、ブラウザに「このページで読み込んでよいもの」を伝えるセキュリティ設定。
怪しいスクリプトや想定外の読み込みを止め、XSSなどの被害を広げにくくします。
CSPの基本
CSPは「Content Security Policy」の略です。サーバーがブラウザへ、スクリプト、画像、CSS、通信先などの読み込みルールを伝えます。
たとえば「スクリプトは自分のサイトからだけ読み込んでよい」と決めておくと、ページ内に怪しい読み込みが混ざっても、ブラウザが止めてくれる場合があります。
スクリプトや画像を、どこから読み込んでよいか指定する。
ルール外の読み込みをブラウザ側で止める。
混ざったスクリプトが動く範囲を狭められる。
何を制限できるのか
CSPでは、スクリプト、スタイル、画像、フォント、API通信先などを指定できます。代表的には、script-src でスクリプトの読み込み元を決めます。
「全部ブロック」ではサイトが動かなくなるため、実際には必要な読み込み先を洗い出して、許可リストとして少しずつ整えます。
CSPだけで安全になるわけではない
CSPは強力ですが、単独で完璧な対策になるわけではありません。XSSを防ぐには、入力値を画面に出すときのエスケープ、危険なHTML挿入を避ける設計、認証情報の扱いなども必要です。
それでもCSPを入れておくと、もし危険なコードが混ざった場合に、外部スクリプトの読み込みや想定外の通信を止めやすくなります。いわば最後の防護柵のような役割です。
入力値をHTMLとして扱わず、文字として表示する。
使っているCDNやAPIを整理して、許可先を明確にする。
まずは報告モードで影響を見てから強くする方法もある。
ここまでのまとめ
CSPは、ページが読み込んでよいスクリプトや画像の出どころをブラウザへ伝える仕組みです。許可リスト外の読み込みを止めることで、XSSなどの被害を小さくできます。
CSPは「このページで使ってよい材料」をブラウザへ渡す許可リストです。