はじめに — ブラウザへの、指示書

セキュリティヘッダーが「ブラウザにこう守れ」と伝える指示書だと理解します。CSPがXSSの二枚目の壁であること、このサイト自身のCSPを教材にすることを押さえ、法と倫理ゲートに同意します。

第0章 / 全5章目安約5分この章のゴール: セキュリティヘッダーの位置づけとCSPの役割を理解する

sec-http で、レスポンスにはヘッダが付くことを見ました。その中には、「ブラウザに、こう守れ」と伝える一群があります——セキュリティヘッダーです。サーバが一行足すだけで、ブラウザが利用者のために守りを一段固くしてくれる。安価で効果の大きい守りです。

ヘッダーは、ブラウザへの指示書

セキュリティヘッダーは、サーバがブラウザに渡す指示書だと考えると分かりやすい。

「このページは iframe に入れさせるな」「送られてきた MIME タイプを勝手に推測するな」「他サイトへ移るとき、送り元の URL を全部は教えるな」——こうした指示を、レスポンスヘッダで伝えます。ブラウザがそれを読んで、守りを効かせる。
その中でも、最も強力で最も設定が難しいのが CSP(Content-Security-Policy)です。このコースの主役です。

CSP は、XSS の「二枚目の壁」

CSP は、インジェクションのコースで一度だけ名前が出ました——XSS の二枚目の壁として。ここを正確に。

XSS 対策の本命は、あくまで出力エスケープ(入力を、出す先の文法に合わせて無害化する)でした。CSP は、その代わりではありません。
CSP は、万一エスケープを一箇所忘れて XSS が注入されても、その注入されたスクリプトの実行をブラウザに拒ませる——多層防御(defense in depth)の二枚目です。一枚目(エスケープ)が破れたときに効く、保険。だから、両方あって初めて堅い。

この教材の題材は、このサイト自身

法と倫理ゲート

手を動かす前に

このコースは攻撃の技術に触れます。実習してよい相手は、次の3つだけです。

(a) 自分で作った練習用のやられ環境(このサイトが配る自作ターゲット)
(b) あなた自身の許可された環境(自分の Thousand SKY・secret-notes-ctf など)
(c) CTF 競技の中(規約の範囲で)

実在する第三者のシステムを許可なく触ることは、不正アクセス禁止法に触れます。このゲートは、その線引きを毎回の入口で確かめるためのものです。詳しくは「セキュリティの法と倫理」へ。

上の (a)(b)(c) の範囲だけで実習することに同意します。

CSP は抽象的で、教科書だけでは腹に落ちません。そこでこのコースは、この Tsumiki サイトが実際に配信している本物の CSPを教材にします(ドッグフーディング)。

このサイトの CSP は、リポジトリの scripts/build-headers.mjs がビルド時に生成し、dist/_headers に書き込んでいます。固定分は public/_headers。作り物の例ではなく、いま本番で効いている生きたポリシーを、ディレクティブごとに読み解きます。実習は自分の 127.0.0.1 と、この公開設定ファイルだけが相手です(法と倫理)。

このコースの地図

章	学ぶこと
第1章	ヘッダーの顔ぶれ — このサイトが出している守りのヘッダー
第2章	CSP を読む — 本物のポリシーを、ディレクティブごとに
第3章	CSP が XSS をどう止めるか — 有無で挙動を見比べる

準備ができたら、次の章へ。まずは、CSP 以外のセキュリティヘッダーから見ます。

こうなっていればOK

セキュリティヘッダーが、サーバからブラウザへの守りの指示だと言える
CSP が XSS 対策の本命ではなく二枚目の壁(多層防御)だと理解した
このコースはこのサイト自身のCSPを教材にすると知った
法と倫理ゲートに同意した(未同意なら、この章で同意する)

卒業まであと4章です。

この章はまだ完了していません。