CSPとは？非エンジニア向けにわかりやすく解説

3秒でわかる

ページが読み込んでよいスクリプトや画像の出どころを、ブラウザ側で制限する仕組み。XSS で差し込まれたコードの実行を止める最後の砦です。

30秒図解

CSPはresource typeごとに許可元を宣言し、許可されない読み込みをブラウザでブロックする — CSPはコンテンツの読み込み元を種類ごとに制限します。許可されていないスクリプトや通信はブラウザ側でブロックされます。

もう少し詳しく

どういうものか

CSP は Content Security Policy の略で、そのページがどこから何を読み込んでよいかをブラウザに宣言するセキュリティ機能です。サーバーが Content-Security-Policy というレスポンスヘッダを返すと、ブラウザは許可されていない読み込みや実行をブロックします。

指定はディレクティブ単位です。script-src はスクリプト、img-src は画像、connect-src は fetch や WebSocket の接続先、frame-src は iframe の埋め込み先を制御します。どれにも当てはまらないものは default-src が受け持ちます。

なぜ必要か

XSS の対策は本来、入力値のエスケープで行います。ただし大きなアプリでエスケープ漏れをゼロにし続けるのは難しく、テンプレートの一箇所を直し忘れただけで攻撃が通ります。

CSP は、仮に攻撃者の