跨域隔离

最新推荐文章于 2025-03-19 12:00:00 发布

小白啥时候能进阶成功

最新推荐文章于 2025-03-19 12:00:00 发布

阅读量5.4k

点赞数 2

分类专栏： JS

原文链接：https://web.dev/coop-coep/

版权

JS 专栏收录该内容

100 篇文章

订阅专栏

跨域隔离指南

一、跨域隔离介绍

https://web.dev/coop-coep/

1、起因：

一些Web API会增加诸如Spectre之类的旁道攻击的风险，为了减轻这种风险，浏览器提供了一种基于选择加入的隔离环境，称为跨域隔离。在跨域隔离状态下，该网页将能够使用以下特权功能：

SharedArrayBuffer	WebAssembly线程必需。这可从Android Chrome 88中获得。桌面版本当前默认情况下是借助Site Isolation启用的，但是将需要跨域隔离状态，并且默认情况下会在Chrome 91中被禁用。
performance.measureUserAgentSpecificMemory()	可从Chrome 89获得
JS Self-Profiling API	Not available in any browsers yet.
performance.now(), performance.timeOrigin	当前可在许多浏览器中使用，分辨率限制为100微秒或更高。使用跨域隔离时，分辨率可以为5微秒或更高

跨域隔离状态还可以防止修改document.domain。总之跨域隔离可以使网页使用更强大的功能

2、需注意的地方：

执行此操作后，除非资源通过Cross-Origin-Resource-Policy标头或CORS标头（Access-Control-Allow- *等）明确允许，否则页面将无法加载跨域内容。

https://blog.chromium.org/2021/02/restriction-on-sharedarraybuffers.html

3、关键术语

二、启用跨域隔离方法

1、将Cross-Origin-Opener-Policy: same-origin和Cross-Origin-Embedder-Policy: require-corp标头设置在http请求头上。（COOP和COEP）

2、检查控制台中是否self.crossOriginIsolated返回true，以验证您的页面是跨域隔离的。

三、分析跨域隔离冲击

https://web.dev/cross-origin-isolation-guide/

1、设置Cross-Origin-Opener-Policy-Report-Only:same-origin在您的顶级文档上。正如其名称所示，这个头只发送有关影响报告到您的网站，它不会禁止与实际弹出窗口进行通信。

2、设置报告并配置Web服务器以接收和保存报告。

3、设置Cross-Origin-Embedder-Policy-Report-Only:require-corp在您的顶级文档上。同样，此标头可让您查看启用的影响，而实际上并未影响网站的功能。您可以配置此标头，以将报告发送到上一步中设置的同一报告服务器。

四、减轻跨域隔离影响

1、CORP

①如果希望仅从同一来源加载资源，请设置Cross-Origin-Resource-Policy: same-origin标头。

②如果希望仅从同一站点但跨源加载资源，请设置Cross-Origin-Resource-Policy: same-site标题。

③如果资源是在您的控制下从交叉原点加载的，Cross-Origin-Resource-Policy: cross-origin则在可能的情况下设置标头。

2、CORS

对于您无法控制的跨源资源：

①如果资源与CORS一起使用，请使用加载HTML标记中的属性。

如果使用CORS服务资源，则在顶级文档的HTML标记中设置crossorigin属性，例如：<img src=“example.jpg” crossorigin>。

②要求资源所有者支持CORS或CORP

3、内部框架

对于内部框架，使用CORP和COEP头如下：Cross-Origin-Resource-Policy: same-origin（或者same-site，cross-origin取决于上下文）和Cross-Origin-Embedder-Policy: require-corp。

4、iFrame

如果加载到iframe中的跨域资源涉及iframe的另一层，请在继续操作之前递归应用本节中介绍的步骤。

确认选择了所有跨域资源后，Cross-Origin-Embedder-Policy: require-corp在加载到iframe中的跨域资源上设置标头。

5、弹出窗口

确保没有跨域弹出窗口要求通过进行通信postMessage()。启用跨域隔离后，无法使其保持工作状态。您可以将通信移至不是跨域隔离的另一个文档，或使用其他通信方法（例如HTTP请求）。

6、Demo示例

https://first-party-test.glitch.me/?coep=require-corp&coop=same-origin&

跨域资源共享（CORS）

https://web.dev/cross-origin-resource-sharing/

在现代Web应用程序中，应用程序通常希望从其他来源获取资源。例如，您要从其他域检索JSON数据，或将另一个站点的图像加载到<canvas>元素中。换句话说，有公共资源可供任何人阅读，但是同源策略阻止了该资源。开发人员使用了JSONP之类的变通办法，但是跨域资源共享（CORS）以标准方式解决了此问题。

一、CORS如何运作？

请记住，同源策略告诉浏览器阻止跨域请求。当您要从其他来源获取公共资源时，资源提供服务器需要告知浏览器“请求来源来自此来源可以访问我的资源”。浏览器会记住这一点，并允许跨域资源共享。

步骤1：客户端（浏览器）请求

当浏览器发出跨域请求时，浏览器将添加Origin具有当前来源（方案，主机和端口）的标头。

步骤2：服务器回应

在服务器端，当服务器看到此标头并准备允许访问时，它会在响应中添加标头Access-Control-Allow-Origin以指定请求的来源（或*允许任何来源）。

步骤3：浏览器收到响应

当浏览器看到带有Access-Control-Allow-Origin标题的响应时，浏览器将允许响应数据与客户端站点共享。

二、分享凭据CORS

出于隐私方面的考虑，CORS通常用于“匿名请求”，即那些不能识别请求者的请求。如果要在使用CORS时发送cookie（凭证：可以识别发件人），则需要向请求和响应中添加其他标头。

1、请求

credentials: 'include'如下所示添加到获取选项。这将在请求中包含cookie。

fetch('https://example.com', {
  mode: 'cors',
  credentials: 'include'
})

2、回应

Access-Control-Allow-Origin必须设置为特定来源（不得使用通配符*），并且必须设置Access-Control-Allow-Credentials为true。

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true

三、复杂的HTTP调用预检要求

如果Web应用程序需要复杂的HTTP请求，则浏览器会将预检请求添加到请求链的前面。

CORS规范将复杂的请求定义为

1、使用GET，POST或HEAD以外的方法的请求

2、包括其它标题比的请求Accept，Accept-Language或Content-Language

3、具有的请求Content-Type比其它标头application/x-www-form-urlencoded，multipart/form-data或text/plain

使用COOP和COEP使您的网站跨域隔离

https://web.dev/coop-coep/

一、控制面板的使用

对于在屏幕上呈现的资源（例如图像），检测COEP问题相当容易，因为请求将被阻止并且页面将指示缺少图像。但是，对于不一定具有视觉影响的资源（例如脚本或样式），COEP问题可能不会引起注意。对于这些，请使用“ DevTools网络”面板。如果COEP有问题，您应该(blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)在“状态”列中看到。