files/zh-cn/web/html/attributes/crossorigin/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

---
title: CORS settings attributes
slug: Web/HTML/Attributes/crossorigin
tags:
  - Advanced
  - CORS
  - HTML5
  - Security
  - anonymous
  - cdn
  - crossorigin=
  - img &video
  - script &link
translation_of: Web/HTML/Attributes/crossorigin
original_slug: Web/HTML/CORS_settings_attributes
---
<p><span class="seoSummary">在 HTML5 中，一些 HTML 元素提供了对 <a href="/en-US/docs/HTTP/Access_control_CORS">CORS</a> 的支持， 例如</span> {{ HTMLElement("audio") }}、{{ HTMLElement("img") }}、{{ HTMLElement("link") }}、{{ HTMLElement("script") }} 和 {{ HTMLElement("video") }} <span class="seoSummary">均有一个跨域属性 (<code>crossOrigin</code> property)，它允许你配置元素获取数据的 CORS 请求。</span> </p>

<p>在媒体元素上被使用的 <code>crossorigin</code> 内容属性是一个 CORS 设置属性。</p>

<p>这些属性是枚举的，并具有以下可能的值：</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">关键字</td>
   <td class="header">描述</td>
  </tr>
  <tr>
   <td><code>anonymous</code></td>
   <td>对此元素的 CORS 请求将不设置凭据标志。</td>
  </tr>
  <tr>
   <td><code>use-credentials</code></td>
   <td>对此元素的 CORS 请求将设置凭证标志；这意味着请求将提供凭据。</td>
  </tr>
  <tr>
   <td><code>""</code></td>
   <td>设置一个空的值，如 <code>crossorigin</code> 或 <code>crossorigin=""</code>，和设置 <code>anonymous</code> 的效果一样。</td>
  </tr>
 </tbody>
</table>

<p>默认情况下（即未指定 crossOrigin 属性时），CORS 根本不会使用。如 <a class="external" href="http://www.w3.org/TR/cors/#user-credentials">Terminology section of the CORS specification</a> 中的描述，在非同源情况下，设置 "anonymous" 关键字将不会通过 cookies，客户端 SSL 证书或 HTTP 认证交换用户凭据。</p>

<p>即使是无效的关键字和空字符串也会被当作 <code>anonymous</code> 关键字使用。</p>

<h3 id="示例：使用_crossorigin_的_script_元素">示例：使用 crossorigin 的 script 元素</h3>

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

<pre class="brush: html">&lt;script src="https://example.com/example-framework.js" crossorigin="anonymous"&gt;&lt;/script&gt;</pre>

<h3 id="示例：Webmanifest_with_credentials">示例：Webmanifest with credentials</h3>

<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">在获取需要用户凭据的 manifest 时，属性值必须设置为 </span></font>use-credentials</code>。即使是同源的情况。</p>

<pre class="brush: html">&lt;link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials"&gt;</pre>

<h2 id="Specifications">Specifications</h2>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>13</td>
   <td>{{ CompatGeckoDesktop("8.0") }}</td>
   <td>11</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td>{{ HTMLElement("video")}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("12.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("8.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td>{{ HTMLElement("video")}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("12.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="另请参阅">另请参阅</h2>

<ul>
 <li><a href="/zh-CN/docs/Web/HTTP/Access_control_CORS" title="en/HTTP access control">HTTP access control</a>（HTTP 访问控制）</li>
</ul>