`Sec-Fetch-*` ヘッダ

# `Sec-Fetch-*` ヘッダ
## とは何か
Webブラウザが様々な手段（documentの取得, `<img>`, `stylesheet`, `<script>`, `<iframe>`, `workder`, etc.）でサーバへリクエストを送る際に、そのリクエストのメタデータ（「何のための、どういうリクエストか」）を送信・開示するためのリクエストヘッダ  
リクエスト時にWebブラウザが自動で付加する  
もちろん詐称出来ないよう、JavaScriptから手動で付加・変更することはできない。

種類としては、以下がある

- [`Sec-Fetch-Dest`](https://w3c.github.io/webappsec-fetch-metadata/#sec-fetch-dest-header): 取得の用途（ex: `document`, `img`, `style`, etc.）を開示する
- [`Sec-Fetch-Mode`](https://w3c.github.io/webappsec-fetch-metadata/#sec-fetch-mode-header): リクエストの種類（`cors`, `navigate`, `no-cors`, `same-origin`, `websocket`）を開示する
- [`Sec-Fetch-Site`](https://w3c.github.io/webappsec-fetch-metadata/#sec-fetch-site-header): リクエストを発火させたページとリクエスト先（このヘッダを受け取ったサーバ）との関係（`cross-site`, `same-origin`, `same-site`, `none`）を開示する
- [`Sec-Fetch-User`](https://w3c.github.io/webappsec-fetch-metadata/#sec-fetch-user-header): リクエストが、ナビゲーション（documentの取得, `<iframe>` etc. によるページのリクエスト）である、かつユーザの操作に起因するものか（←が真のときのみ`?1`(=`true`)、偽ならヘッダは付加されない）を開示する

## [`Sec-Fetch-Dest`](https://w3c.github.io/webappsec-fetch-metadata/#sec-fetch-dest-header) ヘッダ
`Sec-Fetch-Dest`リクエストヘッダは、リクエストの[目的・用途](https://fetch.spec.whatwg.org/#concept-request-destination)をサーバに開示するリクエストヘッダ。  

設定されうる値は、以下。

- `audio`: `<audio>`からのリクエスト
- `audioworklet`: `audioWorklet.addModule()`によるリクエスト
- `document`: HTMLのナビゲーションによるリクエスト
- `embed`: `<embed>`からのリクエスト
- `empty`: `navigator.sendBeacon()`, `EventSource`, `<a ping="">`, `<area ping="">`, `fetch()`, `XMLHttpRequest`, `WebSocket`, `Cache API`, HTMLの`download=""`属性, 「別名で保存」機能, `<link rel=prefetch>`, `<link rel=prerender>`などによるリクエスト
- `font`: CSSの`@font-face`によるリクエスト
- `frame`: `<frame>`からのリクエスト
- `iframe`: `<iframe>`からのリクエスト
- `image`: `<img>`, `<picture>`, `/favicon.ico`, SVGの`<image>`, CSSの`background-image`, `cursor`, `list-style-image`などによるリクエスト
- `manifest`: `<link rel=manifest>`からのリクエスト
- `object`: `<object>`からのリクエスト
- `paintworklet`: `CSS.paintWorklet.addModule()`によるリクエスト
- `report`: [`Content Security Policy（CSP）`](https://developer.mozilla.org/ja/docs/Web/HTTP/CSP)および[`Network Error Logging（NEL）`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Network_Error_Logging)のリクエスト
- `script`: `<script>`や`importScripts()`によるリクエスト
- `serviceworker`: `navigator.serviceWorker.register()`によるリクエスト
- `sharedworker`: `SharedWorker`のリクエスト
- `style`: `<link rel=stylesheet>`やCSSの`@import`によるリクエスト
- `track`: `<track>`からのリクエスト
- `video`: `<video>`からのリクエスト
- `worker`: `Worker`のリクエスト
- `xslt`: `<?xml-stylesheet>`からのリクエスト

### 参照
- [Fetch Metadata Request Headers #2.1The Sec-Fetch-Dest HTTP Request Header](https://w3c.github.io/webappsec-fetch-metadata/#sec-fetch-dest-header)
- [Sec-Fetch-Dest - HTTP | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Fetch-Dest)

## [`Sec-Fetch-Mode`](https://w3c.github.io/webappsec-fetch-metadata/#sec-fetch-mode-header) ヘッダ
`Sec-Fetch-Mode`リクエストヘッダは、リクエストの[モード](https://fetch.spec.whatwg.org/#concept-request-mode)（種類）を開示するリクエストヘッダ。

- `same-origin`: リクエストが同一オリジン宛であることを担保するために使用される
- `cors`: [Cross-Origin Resource Sharing（CORS）](https://www.google.com/search?q=Cross-Origin+Resource+Sharing)に則ってリクエストされた場合に使用される
- `no-cors`: リクエストがクロスオリジンにもかかわらず、`cors`じゃないときに使用される  
（なおこのとき、[CORS-safelisted methods](https://fetch.spec.whatwg.org/#cors-safelisted-method)かつ[CORS-safelisted request-headers](https://fetch.spec.whatwg.org/#cors-safelisted-request-header)な条件に合致するリクエストにのみ制限され、しかもリクエストに成功していてもブラウザのセキュリティ機構によってレスポンスボディが空文字にマスクされていたり、ステータスコードも`0`になっていたりなど使い物にならない状態にされる）
- `navigate`: document間の遷移時に使用される
- `websocket`: WebSocketの接続を確立する際に使用される

### 参照
- [Fetch Metadata Request Headers #2.2The Sec-Fetch-Mode HTTP Request Header](https://w3c.github.io/webappsec-fetch-metadata/#sec-fetch-mode-header)
- [Sec-Fetch-Mode - HTTP | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Fetch-Mode)

## [`Sec-Fetch-Site`](https://w3c.github.io/webappsec-fetch-metadata/#sec-fetch-site-header) ヘッダ
リクエストを発火させたページとリクエスト先（このヘッダを受け取ったサーバ）との関係（`cross-site`, `same-origin`, `same-site`, `none`）を開示するリクエストヘッダ。

### 参照
- [Fetch Metadata Request Headers #2.3The Sec-Fetch-Site HTTP Request Header](https://w3c.github.io/webappsec-fetch-metadata/#sec-fetch-site-header)
- [Sec-Fetch-Site - HTTP | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Fetch-Site)

## [`Sec-Fetch-User`](https://w3c.github.io/webappsec-fetch-metadata/#sec-fetch-user-header) ヘッダ
リクエストが、ナビゲーション（documentの取得, `<iframe>` etc. によるページのリクエスト）である、かつユーザの操作に起因するものか（←が真のときのみ`?1`(=`true`)、偽ならヘッダは付加されない）を開示するリクエストヘッダ。

### 参照
- [Fetch Metadata Request Headers #2.4The Sec-Fetch-User HTTP Request Header](https://w3c.github.io/webappsec-fetch-metadata/#sec-fetch-user-header)
- [Sec-Fetch-User - HTTP | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Fetch-User)

## 参照
- [Fetch Metadata Request Headers](https://w3c.github.io/webappsec-fetch-metadata/)
- [フェッチメタデータリクエストヘッダー - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN](https://developer.mozilla.org/ja/docs/Glossary/Fetch_metadata_request_header)