HTML页面安全策略汇总(1)：同源策略、CORS、COOP、COEP

本文为HTML标准解读系列文章，其他文章详见这里。

在所有浏览器的安全策略中，同源策略是最基础、最核心的策略，很多其他衍生出来的策略都只是同源策略的“补丁”，包括本文提到的其他安全策略：CORS、COOP、COEP。

两个URL，只有在协议、域名、端口都相同的情况下才算是“同源”，对于不同源（以下称为“跨源”）的页面或者资源，同源策略会在以下层面给他们施加约束：

1. js APIs的访问限制：有时候，我们可以通过window.contentWindow、window.parent、window.opener、window.top访问其他页面的window对象。但是当该window对象指向的页面是跨源的时候，该window对象的绝大部分的属性/方法是不可访问的。

   比如，尝试使用window.document访问跨源页面的DOM会报错：

   ❌：Uncaught DOMException: Blocked a frame with origin “https://XXX.com” from accessing a cross-origin frame.

   在跨源window对象上允许使用的为数不多的几个方法中，最有用的是window.postMessage()，这个方法允许你在跨源windows之间安全地进行交流。

2. 数据隔离：对于indexedDB以及localStorage/sessionStroage，不同的源是使用一个独立的存储空间的，且这个存储空间是无法被跨源的js代码直接读取的。

3. 外部资源的读取：在页面中请求跨源资源时，如果没有使用CORS，那么拿到的资源称为「不透明资源」。不透明资源可以被页面嵌入，但不能使用脚本读取。 具体的几个例子是：

   • 跨源的图片可以正常插入到页面中，但是无法使用canvas.get