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 Standard # cors-settings-attributes |
浏览器兼容性
html.elements.audio.crossorigin
BCD tables only load in the browser
html.elements.img.crossorigin
BCD tables only load in the browser
html.elements.link.crossorigin
BCD tables only load in the browser
html.elements.script.crossorigin
BCD tables only load in the browser
html.elements.video.crossorigin
BCD tables only load in the browser