Sec-Fetch-* ヘッダ

とは何か

Webブラウザが様々な手段（documentの取得, <img>, stylesheet, <script>, <iframe>, workder, etc.）でサーバへリクエストを送る際に、そのリクエストのメタデータ（「何のための、どういうリクエストか」）を送信・開示するためのリクエストヘッダ

リクエスト時にWebブラウザが自動で付加する

もちろん詐称出来ないよう、JavaScriptから手動で付加・変更することはできない。

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

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

Sec-Fetch-Dest ヘッダ

Sec-Fetch-Destリクエストヘッダは、リクエストの目的・用途をサーバに開示するリクエストヘッダ。

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

• 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）およびNetwork Error Logging（NEL）のリクエスト
• 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
• Sec-Fetch-Dest - HTTP | MDN

Sec-Fetch-Mode ヘッダ

Sec-Fetch-Modeリクエストヘッダは、リクエストのモード（種類）を開示するリクエストヘッダ。

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

参照

• Fetch Metadata Request Headers #2.2The Sec-Fetch-Mode HTTP Request Header
• Sec-Fetch-Mode - HTTP | MDN

Sec-Fetch-Site ヘッダ

リクエストを発火させたページとリクエスト先（このヘッダを受け取ったサーバ）との関係（cross-site, same-origin, same-site, none）を開示するリクエストヘッダ。

参照

• Fetch Metadata Request Headers #2.3The Sec-Fetch-Site HTTP Request Header
• Sec-Fetch-Site - HTTP | MDN

Sec-Fetch-User ヘッダ

リクエストが、ナビゲーション（documentの取得, <iframe> etc. によるページのリクエスト）である、かつユーザの操作に起因するものか（←が真のときのみ?1(=true)、偽ならヘッダは付加されない）を開示するリクエストヘッダ。

参照

• Fetch Metadata Request Headers #2.4The Sec-Fetch-User HTTP Request Header
• Sec-Fetch-User - HTTP | MDN

参照

• Fetch Metadata Request Headers
• フェッチメタデータリクエストヘッダー - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN