HTML 属性:crossorigin

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

¥The crossorigin attribute, valid on the <audio>, <img>, <link>, <script>, and <video> elements, provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data. Depending on the element, the attribute can be a CORS settings attribute.

媒体元素上的 crossorigin 内容属性是 CORS 设置属性。

¥The crossorigin content attribute on media elements is a CORS settings attribute.

这些属性是 enumerated,并且具有以下可能值:

¥These attributes are enumerated, and have the following possible values:

anonymous

请求使用 CORS 标头,并且凭据标志设置为 'same-origin'。除非目的地是同一来源,否则不会通过 cookie、客户端 TLS 证书或 HTTP 身份验证交换用户凭据。

use-credentials

请求使用 CORS 标头,凭据标志设置为 'include',并且始终包含用户凭据。

""

将属性名称设置为空值,如 crossorigincrossorigin="",与 anonymous 相同。

无效关键字和空字符串将作为 anonymous 关键字处理。

¥An invalid keyword and an empty string will be handled as the anonymous keyword.

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

¥By default (that is, when the attribute is not specified), CORS is not used at all. The user agent will not ask for permission for full access to the resource and in the case of a cross-origin request, certain limitations will be applied based on the type of element concerned:

元素 限制
img, audio, video 当资源放置在 <canvas> 中时,元素被标记为 被污染
script 通过 window.onerror 对错误记录的访问将受到限制。
link 没有适当 crossorigin 标头的请求可能会被丢弃。

注意:基于 Chromium 的浏览器中的 rel="icon" 不支持 crossorigin 属性。参见 打开 Chromium 问题

¥Note: The crossorigin attribute is not supported for rel="icon" in Chromium-based browsers. See the open Chromium issue.

示例:crossorigin<script> 元素

¥Example: crossorigin with the <script> element

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

¥You can use the following <script> element to tell a browser to execute the https://example.com/example-framework.js script without sending user-credentials.

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

示例:带有凭据的 Web 清单

¥Example: Web manifest with credentials

获取需要凭据的 manifest 时,必须使用 use-credentials 值,即使该文件来自同一来源。

¥The use-credentials value must be used when fetching a manifest that requires credentials, even if the file is from the same origin.

html
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />

规范

Specification
HTML Standard
# cors-settings-attributes

¥Specifications

浏览器兼容性

¥Browser compatibility

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

也可以看看