Sec-Fetch-Dest ヘッダー
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月.
* Some parts of this feature may have varying levels of support.
HTTP の Sec-Fetch-Dest はフェッチメタデータリクエストヘッダーで、リクエストの宛先を示します。
これは元のフェッチリクエストの発行元であり、フェッチされたデータが使用される場所（および方法）です。
これにより、サーバーはそのリクエストを処理すべきかどうかを、そのリクエストが想定された使用方法に適しているかどうかに基づいて判断できます。例えば、audio の宛先を持つリクエストは、音声データを要求すべきであり、他の種類のリソース（例えば、機密性の高いユーザー情報を含む文書など）を要求すべきではありません。
| ヘッダー種別 | フェッチメタデータリクエストヘッダー |
|---|---|
| 禁止リクエストヘッダー | はい（Sec- 接頭辞） |
| CORS セーフリストリクエストヘッダー | いいえ |
構文
Sec-Fetch-Dest: audio
Sec-Fetch-Dest: audioworklet
Sec-Fetch-Dest: document
Sec-Fetch-Dest: embed
Sec-Fetch-Dest: empty
Sec-Fetch-Dest: fencedframe
Sec-Fetch-Dest: font
Sec-Fetch-Dest: frame
Sec-Fetch-Dest: iframe
Sec-Fetch-Dest: image
Sec-Fetch-Dest: manifest
Sec-Fetch-Dest: object
Sec-Fetch-Dest: paintworklet
Sec-Fetch-Dest: report
Sec-Fetch-Dest: script
Sec-Fetch-Dest: serviceworker
Sec-Fetch-Dest: sharedworker
Sec-Fetch-Dest: style
Sec-Fetch-Dest: track
Sec-Fetch-Dest: video
Sec-Fetch-Dest: webidentity
Sec-Fetch-Dest: worker
Sec-Fetch-Dest: xslt
このヘッダーが他の値を含んでいる場合、サーバーはこれを無視すべきです。
ディレクティブ
メモ:
これらのディレクティブは Request.destination で返される値に対応しています。
audio-
この宛先は、音声データです。 これは HTML の
<audio>タグに由来する可能性があります。 audioworklet-
この宛先は、音声ワークレットを使用するために取得されるデータです。これは
audioWorklet.addModule()の呼び出しに由来する可能性があります。 document-
この宛先は文書（HTML または XML）であり、リクエストはユーザーが開始した最上位ナビゲーション（例：ユーザーがリンクをクリックした結果）の結果です。
embed-
この宛先は、埋め込みコンテンツです。これは HTML の
<embed>タグに由来する可能性があります。 empty-
この宛先は空の文字列です。これは独自の値を持たない宛先、例えば
fetch(),navigator.sendBeacon(),EventSource,XMLHttpRequest,WebSocketなどに使用されます。 fencedframeExperimental-
この宛先はフェンスフレームです。
font-
この宛先はフォントです。これは CSS の
@font-faceに由来する可能性があります。 frame-
この宛先はフレームです。これは HTML の
<frame>タグに由来する可能性があります。 iframe-
この宛先は iframe です。これは HTML の
<iframe>タグに由来する可能性があります。 image-
この宛先は画像です。これは、 HTML の
<img>、SVG の<image>、CSS のbackground-image、CSS のcursor、CSS のlist-style-imageなどに由来する可能性があります。 manifest-
この宛先はマニフェストです。これは HTML の <link rel=manifest> に由来する可能性があります。
object-
この宛先はオブジェクトです。これは HTML の
<object>タグに由来する可能性があります。 paintworklet-
この宛先は描画ワークレットです。これは
CSS.PaintWorklet.addModule()の呼び出しに由来する可能性があります。 report-
この宛先はレポート（例えば、コンテンツセキュリティポリシーのレポート）です。
script-
この宛先はスクリプトです。これは HTML の
<script>タグまたはWorkerGlobalScope.importScripts()の呼び出しに由来する可能性があります。 serviceworker-
この宛先はサービスワーカーです。これは
navigator.serviceWorker.register()の呼び出しに由来する可能性があります。 -
この宛先は共有ワーカーです。これは
SharedWorkerに由来する可能性があります。 style-
この宛先はスタイルです。これは HTML の <link rel=stylesheet> または CSS の
@importに由来する可能性があります。 track-
この宛先は HTML テキストトラックです。これは HTML の
<track>タグに由来する可能性があります。 video-
この宛先は動画データです。これは HTML の
<video>タグに由来する可能性があります。 webidentity-
この宛先は、ユーザー認証に関連するエンドポイントです。例えば、FedCM API において、ID プロバイダー (IdP) エンドポイントの真正性を検証し、 CSRF 攻撃を防ぐために使用されます。
worker-
この宛先は
Workerです。 xslt-
この宛先は XSLT 変換です。
例
Sec-Fetch-Dest の使用
<img> 要素によって生成されるクロスサイトリクエストは、以下の HTTP リクエストヘッダーを持つリクエストとなります（宛先が image であることに注意）。
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site
仕様書
| Specification |
|---|
| Fetch Metadata Request Headers # sec-fetch-dest-header |
ブラウザーの互換性
Loading…
関連情報
- フェッチメタデータリクエストヘッダー:
Sec-Fetch-Mode,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)