Sec-Fetch-Mode ヘッダー
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年3月.
HTTP の Sec-Fetch-Mode はフェッチメタデータリクエストヘッダーで、リクエストのモードを示します。
大まかに言えば、これによりサーバーは、HTML ページ間を移動するユーザーからのリクエストと、画像やその他のリソースを読み込むリクエストを区別できます。
例えば、最上位のナビゲーションリクエストにはこのヘッダーに navigate が含まれ、画像を読み込む場合には no-cors が使用されます。
| ヘッダー種別 | フェッチメタデータリクエストヘッダー |
|---|---|
| 禁止リクエストヘッダー | はい（Sec- 接頭辞） |
| CORS セーフリストリクエストヘッダー | いいえ |
構文
Sec-Fetch-Mode: cors
Sec-Fetch-Mode: navigate
Sec-Fetch-Mode: no-cors
Sec-Fetch-Mode: same-origin
Sec-Fetch-Mode: websocket
このヘッダーが他の値を含んでいる場合、サーバーはこれを無視すべきです。
ディレクティブ
メモ:
これらのディレクティブは Request.mode で返される値に対応しています。
cors-
このリクエストは CORS プロトコルのリクエストです。
-
このリクエストは、 HTML 文書館のナビゲーションで開始されています。
no-cors-
このリクエストは CORS リクエストではありません（
Request.modeを参照）。 same-origin-
このリクエストは、リクエストされたリソースと同じオリジンから行われています。
websocket-
WebSocket 接続を確立するためのリクエストが行われています。
例
Sec-Fetch-Mode の使用
ユーザーが同一オリジン上の別のページへのページリンクをクリックした場合、生成されるリクエストには次のヘッダーが含まれます（モードが navigate であることに注意してください）。
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1
<img> 要素によって生成されるクロスサイトリクエストは、次の HTTP リクエストヘッダーをつけてリクエストされます（モードが no-cors であることに注意してください）。
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site
仕様書
| Specification |
|---|
| Fetch Metadata Request Headers # sec-fetch-mode-header |
ブラウザーの互換性
Loading…
関連情報
- フェッチメタデータリクエストヘッダー:
Sec-Fetch-Dest,Sec-Fetch-Site,Sec-Fetch-User - Protect your resources from web attacks with Fetch Metadata (web.dev)
- Fetch Metadata Request Headers playground (secmetadata.appspot.com)