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
# cors-settings-attributes

浏览器兼容性

html.elements.audio.crossorigin

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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.

参见