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'
,并且始终包含用户凭据。 ""
-
将属性名称设置为空值,如
crossorigin
或crossorigin=""
,与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 forrel="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.
<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.
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />
规范
Specification |
---|
HTML Standard # cors-settings-attributes |
浏览器兼容性
¥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
也可以看看
¥See also