HTML 属性:crossorigin
crossorigin
属性在 <audio>
、<img>
、<link>
、<script>
和 <video>
元素中有效,它们提供对 CORS 的支持,定义该元素如何处理跨源请求,从而实现对该元素获取数据的 CORS 请求的配置。根据元素的不同,该属性可以是一个 CORS 设置属性。
在媒体元素上所使用的 crossorigin
内容属性为 CORS 设置属性。
这些属性是枚举的,并具有以下可能的值:
anonymous
-
请求使用了 CORS 标头,且证书标志被设置为
'same-origin'
。没有通过 cookies、客户端 SSL 证书或 HTTP 认证交换用户凭据,除非目的地是同一来源。 use-credentials
-
请求使用了 CORS 标头,且证书标志被设置为
'include'
。总是包含用户凭据。 ""
-
将属性名称设置为空值,如
crossorigin
或crossorigin=""
,与设置为anonymous
的效果一样。
不合法的关键字或空字符串会视为 anonymous
关键字。
默认情况下(即未指定该属性时),CORS 根本不会使用。用户代理不会要求对资源进行完全访问的许可,在跨源请求的情况下,将根据相关元素的类型进行某些限制:
元素 | 限制 |
img 、audio 、video |
当资源被放置在 <canvas> 中时,元素会标记为被污染的。
|
script |
对错误日志 window.onerror 的访问将会被限制。
|
link |
使用了不合适的 crossorigin 标头的请求可能会被丢弃。
|
备注:
在 Firefox 83 版本之前,rel="icon"
元素不支持 crossorigin
属性。也有一个 Chrome 的未解决的议题。
示例:使用 crossorigin
的 <script>
元素
你可以使用下面的 <script>
元素告诉浏览器执行来自 https://example.com/example-framework.js
的脚本且不发送用户凭据。
<script
src="https://example.com/example-framework.js"
crossorigin="anonymous"></script>
示例:带有用户凭据的 Web 清单
在获取需要用户凭据的清单时,即使是同源的情况,属性值也必须设置为 use-credentials
。
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />
规范
Specification |
---|
HTML # cors-settings-attributes |
浏览器兼容性
html.elements.audio.crossorigin
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
crossorigin |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- Has more compatibility info.
html.elements.img.crossorigin
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
crossorigin |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.link.crossorigin
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
crossorigin |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
html.elements.script.crossorigin
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
crossorigin |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
html.elements.video.crossorigin
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
crossorigin |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- Has more compatibility info.