HTTP协议

[Marinerer]

大纲

• HTTP安全之跨域策略

[Marinerer]

.

[Marinerer]

.

[Marinerer]

HTTP安全之跨域策略

简介

Web 基于同源政策 (same-origin policy)构建，这是一项安全功能，用于限制文档和脚本与其他来源的资源交互方式。此原则会限制网站访问跨源资源的方式。例如，系统阻止 https://a.example 中的文档访问 https://b.example 上托管的数据。

但是，在历史上同源政策有一些例外。任何网站都可以：

• 嵌入跨域iframe
• 包含跨域资源，例如图像或脚本
• 用 DOM 引用打开跨域弹出窗口

为了修补这些安全副作用，引入了跨域资源共享 (CORS)协议和不透明资源的概念。CORS确保服务器允许与给定来源共享资源，而不透明资源则是隐式移除脚本对跨源资源的直接访问，同时保持向后兼容性。例如，这就是为什么除非对跨域图片应用 CORS，否则通过 CanvasRenderingContext2D 操控跨源图片的像素会失败。

一些关键术语：

• CORS (Cross-Origin Resource Sharing)：跨域资源共享
• COEP (Cross-Origin-Embedder-Policy)：跨域嵌入策略
• COOP (Cross-Origin-Opener-Policy)：跨域开放者策略
• CORP (Cross-Origin-Resource-Policy)：跨域资源策略
• CORB (Cross-Origin-Read-Blocking)：跨域读取阻止

为了确保访问强大的功能，如SharedArrayBuffer、Performance.measureMemory或JS Self-Profiling API，文档需要同时使用COEP（值为require-corp）和COOP（值为same-origin）。如果两者都不存在，浏览器将无法保证足够的隔离度以安全地启用这些功能。可以通过检查self.crossOriginIsolated是否返回true来确定页面的状况。

安全头参考

• 来源：HTTP Security Headers 安全头参考 (web.dev)

下面列出了可用于保护网站的最重要的安全头。

• 对于处理敏感用户数据的网站，建议采用以下安全标头：

  内容安全政策 (CSP)

  可信类型

• 建议为所有网站使用的安全标头：

  X-Content-Type-Options

  X-Frame-Options

  跨域资源策略 (CORP)

  跨域开放者策略 (COOP)

  HTTP 严格传输安全协议 (HSTS)

• 具有高级功能的网站的安全标头：

  跨域资源共享 (CORS)

  跨域嵌入器政策 (COEP)

跨域共享

• CORS 的工作原理

Cross-Origin Resource Sharing (CORS) 跨源资源共享是一种基于 HTTP 标头的机制，允许服务器指示除其自身之外的任何来源（域、协议或端口），浏览器应允许从中加载资源。 CORS 还依赖于一种机制，浏览器通过该机制向托管跨源资源的服务器发出“预检”请求，以检查服务器是否允许实际请求。在该预检中，浏览器发送指示 HTTP 方法的标头以及将在实际请求中使用的标头。

出于安全原因，浏览器限制从脚本发起的跨域 HTTP 请求。例如， fetch() 和 XMLHttpRequest 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一源请求资源，除非来自其他源的响应包含正确的 CORS 标头。

先来看一个 HTTP响应头 示例

200 OK
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Origin: *
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Cross-Origin-Embedder-Policy: credentialless
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Resource-Policy: cross-origin
Date: Mon, 18 Jul 2016 16:06:00 GMT
Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
Keep-Alive: timeout=5, max=997
Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
Server: Apache
Set-Cookie: csrftoken=25ab047d8bdf1cf4f6fc8272aaa9d8b8; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
Transfer-Encoding: chunked
Vary: Cookie, Accept-Encoding
X-Backend-Server: developer2.webapp.scl3.mozilla.com
X-Cache-Info: not cacheable; meta data too large
X-kuma-revision: 1085259
x-frame-options: DENY

• Access-Control-Allow-Credentials: 访问控制允许凭据，该响应标头告诉浏览器服务器是否允许跨源 HTTP 请求包含凭据。
• Access-Control-Allow-Headers: 访问控制允许头，该响应标头用于响应预检请求，其中包含 Access-Control-Request-Headers 来指示在实际请求期间可以使用哪些 HTTP 标头。
• Access-Control-Allow-Methods: 访问控制允许方法，该响应标头指定访问资源以响应预检请求时允许的一种或多种方法。
• Access-Control-Allow-Origin: 访问控制允许来源，该响应头指示是否可以与来自给定源的请求代码共享响应。(只能指定一个源)
• Access-Control-Expose-Headers: 访问控制公开标头，该响应标头允许服务器指定哪些响应头在览器中运行的脚本获取。

跨域隔离

• 为什么需要“跨源隔离”来实现强大的功能
• 使用 COOP 和 COEP 将网站设置为“跨源隔离”
• 关于启用跨域隔离的指南

某些 Web API 会增加旁路攻击（例如 Spectre）的风险。为了降低这种风险，浏览器提供了一个基于选择启用的隔离环境，称为“跨域隔离”。在跨域隔离状态下，网页将可以使用特权功能，包括：

API	说明
SharedArrayBuffer	对于 WebAssembly 线程而言是必需的。目前，桌面版在 网站隔离的帮助下默认处于启用状态，但要求使用跨域隔离状态，并且 Chrome 92 中默认停用。
performance.measureUserAgentSpecificMemory()	Chrome 89 及更高版本均支持此功能。
performance.now()、performance.timeOrigin	目前适用于许多分辨率限制为 100 微秒或更高的浏览器。使用跨域隔离时，分辨率可以为 5 微秒或更高。

跨域隔离状态还会阻止修改 document.domain。（能够更改 document.domain 允许在同网站文档之间进行通信，这被视为同源政策中的漏洞。）

如需选择启用跨域隔离状态，您需要在主文档上发送以下 HTTP 标头：

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

这些标头会指示浏览器阻止加载尚未选择由跨源文档加载的资源或 iframe，并阻止跨源窗口直接与您的文档交互。这也意味着，这些跨源加载的资源需要选择启用才能使用。

您可以通过检查 self.crossOriginIsolated 来确定网页是否处于跨源隔离状态。

HTTP Response Headers

• Cross-Origin-Embedder-Policy: (COEP)跨域资源嵌入策略，该响应头配置将跨源资源嵌入到文档中。

  Cross-Origin-Embedder-Policy: unsafe-none | require-corp | credentialless
  

• Cross-Origin-Opener-Policy: (COOP)跨域开放策略，该响应头允许您确保顶级文档不会与跨源文档共享浏览上下文组。

  Cross-Origin-Opener-Policy: unsafe-none | same-origin | same-origin-allow-popups
  

• Cross-Origin-Resource-Policy: (CORP)跨域资源策略，该响应头传达了浏览器阻止对给定资源的无跨域/跨站点请求的愿望。

  Cross-Origin-Resource-Policy: same-site | same-origin | cross-origin
  

减轻跨域隔离的影响

确定哪些资源将受跨域隔离的影响后，请遵循以下一般准则，了解如何实际选择启用这些跨源资源：

1. 在图片、脚本、样式表、iframe 等跨源资源中，请设置 Cross-Origin-Resource-Policy: cross-origin 标头。在同一网站资源上，设置 Cross-Origin-Resource-Policy: same-site 标头。
2. 对于可使用 CORS 加载的资源，请确保已启用 CORS，具体方法是在相应的 HTML 标记中设置 crossorigin 属性（例如 <img src="example.jpg" crossorigin>）。对于 JavaScript 提取请求，请确保将 request.mode 设置为 cors。
3. 如果您想在已加载的 iframe 中使用 SharedArrayBuffer 等强大功能，请将 allow="cross-origin-isolated" 附加到 <iframe>。
4. 如果加载到 iframe 或工作器脚本的跨源资源涉及另一层 iframe 或工作器脚本，请以递归方式应用本部分中介绍的步骤，然后再继续。
5. 确认所有跨源资源都选择启用后，请在 iframe 和工作器脚本上设置 Cross-Origin-Embedder-Policy: require-corp 标头（无论是同源还是跨源，这都是必需的）。
6. 确保没有需要通过 postMessage() 进行通信的跨源弹出式窗口。启用跨域隔离后，您将无法让这些控件正常运行。您可以将通信移至未跨源隔离的其他文档，或者使用其他通信方法（例如 HTTP 请求）。

问题

1. IFrame credentialless

• 来源：IFrame credentialless (MDN)

IFrame credentialless 为开发人员提供了一种使用新的临时上下文在 <iframe> 中加载第三方资源的机制。它无法访问其常规来源的网络、cookie 和存储数据。它使用顶级文档生命周期本地的新上下文。作为回报，可以取消 Cross-Origin-Embedder-Policy (COEP) 嵌入规则，因此设置了 COEP 的文档可以嵌入没有设置 COEP 的第三方文档。

<iframe
  src="https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)"
  title="Spectre vulnerability Wikipedia page"
  width="960"
  height="600"
  credentialless>
</iframe>

ref

• 关于跨域 Github : 1. 跨域是怎么回事 、2. 跨域资源共享 、3. 跨域隔离协定
• 为什么需要“跨域隔离”才能获得强大的功能
• 由一个报错引发的浏览器跨域隔离探索