1. 開発者向けのウェブ技術
  2. HTTP
  3. リファレンス
  4. ヘッダー
  5. Sec-Fetch-Dest

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Sec-Fetch-Dest ヘッダー

Baseline 広く利用可能 *

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2023年3月以降、すべてのブラウザーで利用可能です。

Want more browser support for this feature? Tell us why.

* この機能の一部は、対応レベルが異なる場合があります。

HTTP の Sec-Fetch-Dest はフェッチメタデータリクエストヘッダーで、リクエストの宛先を示します。 これは元のフェッチリクエストの発行元であり、フェッチされたデータが使用される場所（および方法）です。

これにより、サーバーはそのリクエストを処理すべきかどうかを、そのリクエストが想定された使用方法に適しているかどうかに基づいて判断できます。例えば、audio の宛先を持つリクエストは、音声データを要求すべきであり、他の種類のリソース（例えば、機密性の高いユーザー情報を含む文書など）を要求すべきではありません。

ヘッダー種別 フェッチメタデータリクエストヘッダー
禁止リクエストヘッダー はい（Sec- 接頭辞）
CORS セーフリストリクエストヘッダー いいえ

構文

http
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 などに使用されます。

fencedframe

この宛先はフェンスフレームです。

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

この宛先は共有ワーカーです。これは 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 であることに注意）。

http
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site

仕様書

仕様書
Fetch Metadata Request Headers
# sec-fetch-dest-header

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告