Tsumiki

コース目次 / 第1章

ヘッダーの顔ぶれ — このサイトの守り

このサイトが public/_headers で配信している CSP 以外のセキュリティヘッダー(nosniff・Referrer-Policy・X-Frame-Options)を、それぞれ何を防ぐかとあわせて読みます。

第1章 / 全5章目安 約8分この章のゴール: 主要なセキュリティヘッダーの役割を、このサイトの実設定で理解する

このサイトの固定ヘッダーは、リポジトリの public/_headers にあります。CSP はビルド時に別途生成されますが(次章)、それ以外の守りはここに直接書かれています。全ページに当たる /* の下を読みます。

/*
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  X-Frame-Options: DENY

3つを、それぞれ「何を防ぐか」で読みます。

X-Content-Type-Options: nosniff

ブラウザには、レスポンスの Content-Type が曖昧なとき、中身からMIME タイプを推測(sniffing)する機能があります。これが悪用されると——たとえば「画像のつもりでアップロードされたファイル」を、ブラウザが「これは HTML だ」と推測してスクリプトとして実行してしまう、という事故が起きます。
nosniff は、この推測を止めます。「サーバが言った Content-Type を信じ、勝手に推測するな」という指示。アップロード機能を持つサイトでは、とくに効きます。

Referrer-Policy: strict-origin-when-cross-origin

リンクをクリックして別サイトへ移るとき、ブラウザは「どこから来たか」を Referer ヘッダで送ります。この URL に秘密が含まれていると(?token=… やパスの中の ID など)、それが移動先の他サイトに漏れてしまう。
strict-origin-when-cross-origin は、他オリジンへ移るときは、パスやクエリを落として“オリジンだけ”を送る(かつ https→http のような降格時は送らない)。同一オリジン内では詳しく送り、外へはオリジンだけ。送り元 URL からの情報漏れを、ちょうどよく絞る設定です。

X-Frame-Options: DENY(と frame-ancestors)

X-Frame-Options: DENY は、このページを iframe に埋め込ませない指示です。防ぐのはクリックジャッキング——攻撃者が自分のサイトに透明な iframe で標的サイトを重ね、利用者に「気づかないうちに標的サイト上のボタンを押させる」手口。埋め込みを禁じれば、この重ね技が成立しません。
同じ守りを、より新しく細かく指定できるのが、CSP の frame-ancestors です(次章)。このサイトは frame-ancestors ‘none’ も併せて出していて、新旧どちらのブラウザでも埋め込みを禁じています。

例外は、意図して緩める

public/_headers を眺めると、/*(全ページ)の下に、/demo/* や /sandbox/* の別ルールがあります。ここは、意図的に守りを緩めている場所です。

/demo/(コース1の完成見本)は Google Fonts を読むので専用 CSP に差し替え、/sandbox/(試食の隔離枠)はデモを発火させるためインラインを許す専用 CSP を当てています。どちらも「なぜ緩めるか」がコメントで明記され、影響範囲がそのパス配下に限定されている。
これが健全な緩め方です——全体は固く、緩める場所は理由付きで・範囲を絞って。診断で他人のサイトのヘッダーを見るときも、「なぜここだけ緩いのか」を同じ目で読みます。

持ち帰る一言

ヘッダー一行が、守り一段。 nosniff は MIME 推測を、Referrer-Policy は送り元 URL の漏れを、X-Frame-Options / frame-ancestors はクリックジャッキングを防ぐ。全体は固く、緩める場所は理由付きで範囲を絞る。次はいよいよ、最も強力なヘッダー——CSP を、このサイトの本物のポリシーで読みます。

こうなっていればOK

卒業まであと3章です。

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