【しーえすぴー】

CSP(コンテンツセキュリティポリシー) とは?

💡 「どこからのリソースを許可するか」をブラウザに指示する防御壁
📌 このページのポイント
CSP(Content Security Policy)の仕組み ブラウザ CSPヘッダーを 受け取って検査 ポリシーに基づき判定 Content-Security- Policy: script-src 許可される 自サイトのJS ✓ cdn.example.com ✓ ブロック インラインスクリプト ✗ evil.example.com ✗ XSS攻撃 悪意あるスクリプト → CSPが防御 許可されたソースのみ読み込みを許可し、XSS攻撃を防止
CSPのイメージ
ひよこ ひよこ

CSPって何をしてくれるの?

ペンギン先生 ペンギン先生

たとえば「このページのスクリプトはhttps://example.comからのものだけ実行していい」と指定できるんだ。攻撃者がXSSで悪意のあるスクリプトを注入しても、許可されたソース以外のスクリプトブラウザが実行を拒否してくれるよ。

ひよこ ひよこ

具体的にはどう書くの?

ペンギン先生 ペンギン先生

HTTPヘッダに「Content-Security-Policy: script-src 'self' https://cdn.example.com」のように書くよ。これは「スクリプトは自分のサイトとcdn.example.comからのものだけ許可」という意味。'self'は自分自身のオリジンを指すんだ。

ひよこ ひよこ

inline scriptは使えなくなるの?

ペンギン先生 ペンギン先生

デフォルトではインラインスクリプト(HTMLに直接書くscriptタグ)は禁止されるよ。これはXSS対策としては正しいんだけど、既存のサイトに導入するとき困ることがあるんだ。nonce(使い捨ての識別子)やhash(スクリプトハッシュ値)を使えば、特定のインラインスクリプトだけ許可できるよ。

ひよこ ひよこ

いきなり導入して壊れないか心配…

ペンギン先生 ペンギン先生

いい心配だね。Content-Security-Policy-Report-Onlyヘッダを使うと、ポリシー違反をレポートするだけでブロックはしないモードで試せるよ。まずこれで問題箇所を洗い出して、修正してから本番のCSPに切り替えるのが安全な導入方法だよ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
CSP」って出てきたら「Webページで読み込めるリソースのソースを制限するセキュリティヘッダだな」と思えればだいたいOK!
📖 おまけ:英語の意味
「Content Security Policy」 = コンテンツのセキュリティ方針
💬 「このページではこのドメインからのリソースだけ信頼します」とブラウザに伝えるよ
← 用語集にもどる