files/zh-cn/web/http/headers/cross-origin-embedder-policy/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

---
title: Cross-Origin-Embedder-Policy
slug: Web/HTTP/Headers/Cross-Origin-Embedder-Policy
translation_of: Web/HTTP/Headers/Cross-Origin-Embedder-Policy
---
<div>{{HTTPSidebar}}</div>

<p>HTTP <strong><code>Cross-Origin-Embedder-Policy</code></strong> (COEP) 响应标头可防止文档加载未明确授予文档权限(通过 <a href="/en-US/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)">CORP</a>或者 <a href="/en-US/docs/Web/HTTP/CORS">CORS</a>)的任何跨域资源 。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Header type</th>
   <td>{{Glossary("Response header")}}</td>
  </tr>
  <tr>
   <th scope="row">{{Glossary("Forbidden header name")}}</th>
   <td>no</td>
  </tr>
 </tbody>
</table>

<h2 id="语法">语法</h2>

<pre class="syntaxbox notranslate">Cross-Origin-Embedder-Policy: unsafe-none | require-corp
</pre>

<h3 id="指令">指令</h3>

<dl>
 <dt><code>unsafe-none</code></dt>
 <dd>这是默认值. 允许文档获取跨源资源，而无需通过CORS协议或 {{HTTPHeader("Cross-Origin-Resource-Policy")}} 头。</dd>
 <dt><code>require-corp</code></dt>
 <dd>文档只能从相同的源加载资源，或显式标记为可从另一个源加载的资源。<br>
 如果跨源资源支持CORS，则 <code><a href="/en-US/docs/Web/HTML/Attributes/crossorigin">crossorigin</a></code> 属性或 {{HTTPHeader("Cross-Origin-Resource-Policy")}} 头必须使用它来加载资源，而不会被COEP阻止。</dd>
</dl>

<h2 id="示例">示例</h2>

<h3 id="某些功能取决于跨域隔离">某些功能取决于跨域隔离</h3>

<p>为了节省时间你可以只接受类似于{{jsxref("SharedArrayBuffer")}} 或者 {{domxref("Performance.now()")}} 对象, 只要你的文档有一个值被设置为<code>require-corp</code> 的 COEP 头部.</p>

<pre class="notranslate">Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
</pre>

<p>你可以看看这个头部 {{HTTPHeader("Cross-Origin-Opener-Policy")}} ，这样你设置起来会做的更好。</p>

<p>检查 cross origin isolation 是否成功，你可以再次测试<code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated">crossOriginIsolated</a></code> 这个属性 是否对窗口和工作的上下文有效：</p>

<pre class="brush: js notranslate">if (crossOriginIsolated) {
  // Post SharedArrayBuffer
} else {
  // Do something else
}</pre>

<h3 id="避免CORS阻塞COEP">避免CORS阻塞COEP</h3>

<p>If you enable COEP using <code>require-corp</code> and have a cross origin resource that needs to be loaded, it needs to support <a href="/en-US/docs/Web/HTTP/CORS">CORS</a> and you need to explicitly mark the resource as loadable from another origin to avoid blockage from COEP. For example, you can use the <code><a href="/en-US/docs/Web/HTML/Attributes/crossorigin">crossorigin</a></code> attribute for this image from a third-party site:</p>

<pre class="brush: html notranslate">&lt;img src="https://thirdparty.com/img.png" crossorigin&gt;</pre>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#coep', 'Cross-Origin-Embedder-Policy header')}}</td>
  </tr>
 </tbody>
</table>

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


<p>{{Compat("http.headers.Cross-Origin-Embedder-Policy")}}</p>

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

<ul>
 <li>{{httpheader("Cross-Origin-Opener-Policy")}}</li>
</ul>