HTML 属性:crossorigin

crossorigin 属性在 <audio><img><link><script><video> 元素中有效,它们提供对 CORS 的支持,定义该元素如何处理跨源请求,从而实现对该元素获取数据的 CORS 请求的配置。根据元素的不同,该属性可以是一个 CORS 设置属性。

在媒体元素上所使用的 crossorigin 内容属性为 CORS 设置属性。

这些属性是枚举的,并具有以下可能的值:

anonymous

请求使用了 CORS 标头,且证书标志被设置为 'same-origin'。没有通过 cookies、客户端 SSL 证书或 HTTP 认证交换用户凭据,除非目的地是同一来源。

use-credentials

请求使用了 CORS 标头,且证书标志被设置为 'include'。总是包含用户凭据

""

将属性名称设置为空值,如 crossorigincrossorigin="",与设置为 anonymous 的效果一样。

不合法的关键字或空字符串会视为 anonymous 关键字。

默认情况下(即未指定该属性时),CORS 根本不会使用。用户代理不会要求对资源进行完全访问的许可,在跨源请求的情况下,将根据相关元素的类型进行某些限制:

元素 限制
imgaudiovideo 当资源被放置在 <canvas> 中时,元素会标记为被污染的
script 对错误日志 window.onerror 的访问将会被限制。
link 使用了不合适的 crossorigin 标头的请求可能会被丢弃。

备注:在 Firefox 83 版本之前,rel="icon" 元素不支持 crossorigin 属性。也有一个 Chrome 的未解决的议题

示例:使用 crossorigin<script> 元素

你可以使用下面的 <script> 元素告诉浏览器执行来自 https://example.com/example-framework.js 的脚本且不发送用户凭据。

html
<script
  src="https://example.com/example-framework.js"
  crossorigin="anonymous"></script>

示例:带有用户凭据的 Web 清单

在获取需要用户凭据的清单时,即使是同源的情况,属性值也必须设置为 use-credentials

html
<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

参见