Sec-Fetchヘッダーについて

概要

Sec-Fetch-SiteやSec-Fetch-Modeは、Fetch Metadata Request Headersの一部であり、Webブラウザがサーバにリクエストを送る際に、自動的に付加するセキュリティ関連のヘッダー。
これらのヘッダーを利用することで、サーバ側でクロスサイトリクエスト(CORSやCSRF)の対策が可能になる。

Sec-Fetch-Site

リクエストの発生元とリクエスト先の関係を示す。
以下の値が設定される可能性がある。

値説明
noneブラウザのアドレスバーにURLを入力したり、ブックマークを開いた場合(直接アクセス)
same-originリクエストが同じオリジン(プロトコル、ホスト、ポータが一致)から送信された場合
same-site同じサイト(異なるサブドメインを含む)からのリクエスト
cross-site別のサイト(異なるオリジン)からのリクエスト

例

Sec-Fetch-Site: same-origin

この例では、リクエストが同じオリジン(同じプロトコル･ドメイン･ポート)から送信されていることを示す。

Sec-Fetch-Mode

リクエストのモード(通信の種類)を示す。

CORS制限の適応範囲を決定するために使用される。

値説明
corsクロスオリジンリクエスト(CORS対応が必要)
no-corsクロスオリジンのリクエストだが、制限付きのリクエスト
same-origin同じオリジン内でのリクエスト
navigateページの遷移を伴うリクエスト(<a>タグやwindow.locationなど)
websocketWebSocket接続
nested-navigateiframe内でのページ遷移
fetchfetch()APIによるリクエスト

例

Sec-Fetch-Mode: cors

この例では、クロスオリジンリクエストとして処理されることを示している。

使用例

あるウェブサイト(https://example.com)からhttps://api.example.com/dataにfetch()を使ってリクエストを送ると、以下のようなヘッダーが追加される可能性がある。

Sec-Fetch-Site: same-site
Sec-Fetch-Mode: cors

この場合:

  • Sec-Fetch-Site: same-site → api.example.comはexample.comのサブドメインなので、same-siteと判定される。
  • Sec-Fetch-Mode: cors → クロスオリジンリクエストとして扱われるため、サーバはCORS設定(Access-Control-Allow-Origin)が必要

セキュリティ対策への活用

Sec-Fetch-SiteとSec-Fetch-Modeを活用することで、サーバ側で不要なクロスサイトリクエストをブロックすることができる。

例: CSRF防御

サーバ側のNginxやWebアプリケーションでSec-Fetch-Siteをチェックし、クロスサイト(cross-site)からのリクエストを拒否する事でCSRF攻撃を防ぐことが可能。

Nginx設定例

if($http_sec_fetch_site = "cross-site"){
  return 403;
}

この設定で、外部サイトからのcross-siteリクエストをブロックできる。

オリジン(Origin)とは？

オリジンとは、以下の3つの要素の組み合わせ

  1. スキーム(Scheme): http / https
  2. ホスト(Host): example.com / api.example.comなど
  3. ポート(Port): 通常は80(HTTP)や443(HTTPS)

例:

URLスキームホストポート
https://example.comhttpsexample.com443
https://api.example.comhttpsapi.example.com443

ホストが違うので、オリジンも別!(corsになる)

では「same-site」とは？

  • same-siteは「ベースドメインが同じ(例: example.com)」 かどうかで判定
  • same-originは「スキーム･ホスト･ポートが全て一致」しているかを見る。
組み合わせSec-Fetch-SiteSec-Fetch-Mode
example.com→example.comsame-originsame-origin
example.com→api.example.comsame-sitecors(別オリジン)

HTTPプロトコル

Posted by Iori