Sec-Fetch-Dest
Baseline 2023
Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Sec-Fetch-Dest
Fetch 元数据请求标头指示请求的目标,即数据的来源以及如何使用这些获取到的数据。
这允许服务器根据请求是否采用了适当的使用方式来确定是否为请求提供服务。例如,具有 audio
目标的请求应请求音频数据,而不是其他类型的资源(例如,包含敏感用户信息的文档)。
标头类型 | Fetch 元数据请求标头 |
---|---|
禁止修改的消息首部 | 是(带有 Sec- 前缀) |
CORS-safelisted request header | 否 |
语法
Sec-Fetch-Dest: audio
Sec-Fetch-Dest: audioworklet
Sec-Fetch-Dest: document
Sec-Fetch-Dest: embed
Sec-Fetch-Dest: empty
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: worker
Sec-Fetch-Dest: xslt
如果此标头包含任何其他的值,服务器应忽略它。
指令
备注:
这些指令对应于 Request.destination
返回的值。
audio
-
目标是音频数据。这可能源自 HTML
<audio>
标签。 audioworklet
-
目标是获取供 audio worklet 使用的数据。这可能源于对
audioWorklet.addModule()
的调用。 document
-
目标是文档(HTML 或 XML),请求是用户发起的顶级导航的结果(例如,由用户单击链接产生)。
embed
-
目标是嵌入内容。这可能源自 HTML
<embed>
标签。 empty
-
目标是空字符串。这用于没有自己值的目标。例如:
fetch()
、navigator.sendBeacon()
、EventSource
、XMLHttpRequest
、WebSocket
等等。 font
-
目标是字体。这可能源自 CSS
@font-face
。 frame
-
目标是 frame。这可能源自 HTML
<frame>
标签。 iframe
-
目标是 iframe。这可能源自 HTML
<iframe>
标签。 image
-
目标是图片。这可能源自 HTML
<image>
、SVG<image>
、CSSbackground-image
、CSScursor
、CSSlist-style-image
等等。 manifest
-
目标是 mainfest。这可能源自 HTML <link rel=manifest>。
object
-
目标是对象,这可能源自
<object>
标签。 paintworklet
-
目标是 paint worklet。这可能源自对
CSS.PaintWorklet.addModule()
的调用。 report
-
目标是报告(如一份内容安全策略报告)。
script
-
目标是一个脚本。这可能源自 HTML
<script>
标签或对WorkerGlobalScope.importScripts()
的调用。 serviceworker
-
目标是 service worker。这可能源于对
navigator.serviceWorker.register()
的调用。 -
目标是 shared worker。这可能源自
SharedWorker
。 style
-
目标是 style。这可能源自 HTML <link rel=stylesheet> 或者 CSS
@import
。 track
-
目标是 HTML text track。这可能源自 HTML
<track>
标签。 video
-
目标是视频数据。这可能源自于
<video>
标签。 worker
-
目标是
Worker
。 xslt
-
目标是 XSLT 转换。
示例
<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 |
浏览器兼容性
BCD tables only load in the browser
参见
-
相关的标头
-
使用 Fetch 元数据使你的资源免受 Web 攻击 (web.dev)
-
Fetch 元数据请求标头 playground (secmetadata.appspot.com)