Open Marinerer opened 7 months ago
.
.
Web 基于同源政策 (same-origin policy
)构建,这是一项安全功能,用于限制文档和脚本与其他来源的资源交互方式。此原则会限制网站访问跨源资源的方式。例如,系统阻止 https://a.example
中的文档访问 https://b.example
上托管的数据。
但是,在历史上同源政策有一些例外。任何网站都可以:
为了修补这些安全副作用,引入了跨域资源共享 (CORS)协议和不透明资源
的概念。CORS确保服务器允许与给定来源共享资源,而不透明资源则是隐式移除脚本对跨源资源的直接访问,同时保持向后兼容性。例如,这就是为什么除非对跨域图片应用 CORS,否则通过 CanvasRenderingContext2D
操控跨源图片的像素会失败。
一些关键术语:
为了确保访问强大的功能,如SharedArrayBuffer
、Performance.measureMemory
或JS Self-Profiling API,文档需要同时使用COEP(值为require-corp
)和COOP(值为same-origin
)。如果两者都不存在,浏览器将无法保证足够的隔离度以安全地启用这些功能。可以通过检查self.crossOriginIsolated
是否返回true来确定页面的状况。
下面列出了可用于保护网站的最重要的安全头。
对于处理敏感用户数据的网站,建议采用以下安全标头:
建议为所有网站使用的安全标头:
具有高级功能的网站的安全标头:
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-Request-Headers
来指示在实际请求期间可以使用哪些 HTTP 标头。 某些 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
来确定网页是否处于跨源隔离状态。
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
确定哪些资源将受跨域隔离的影响后,请遵循以下一般准则,了解如何实际选择启用这些跨源资源:
Cross-Origin-Resource-Policy: cross-origin
标头。在同一网站资源上,设置 Cross-Origin-Resource-Policy: same-site
标头。crossorigin
属性(例如 <img src="example.jpg" crossorigin>
)。对于 JavaScript 提取请求,请确保将 request.mode
设置为 cors
。SharedArrayBuffer
等强大功能,请将 allow="cross-origin-isolated"
附加到 <iframe>
。Cross-Origin-Embedder-Policy: require-corp
标头(无论是同源还是跨源,这都是必需的)。postMessage()
进行通信的跨源弹出式窗口。启用跨域隔离后,您将无法让这些控件正常运行。您可以将通信移至未跨源隔离的其他文档,或者使用其他通信方法(例如 HTTP 请求)。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>
大纲