同源政策

Mariko Kosaka

同源政策是一项浏览器安全功能,用于限制 一个源上的文档和脚本可以与资源交互 其他来源上。

浏览器可以同时加载和显示多个网站中的资源。您可能有 同时打开多个标签页,或者网站可能嵌入多个 iframe 不同网站。如果这些元素之间的互动 而且某个脚本被攻击者破坏, 显示用户浏览器中的所有内容。

同源政策通过阻止对以下内容的读取访问来防止发生这种情况 从另一个来源加载的资源“不过等等”您说“我加载图片 和脚本始终来自其他来源的脚本。”浏览器允许使用一些代码 嵌入来自其他来源的资源。此政策主要是历史性的 并可能会使您的网站面临漏洞,例如使用 iframe。您可以限制跨源读取 安全机制的内容安全 政策

源站由 scheme(也称为协议)定义, HTTP 或 HTTPS)、端口(如果已指定)和主机。当这三项内容相同时 则视为同源。例如: http://www.example.com/foohttp://www.example.com/bar 但不包括 https://www.example.com/bar 因为架构不同

哪些是允许的,哪些是被屏蔽的?

通常,允许嵌入跨源资源,同时读取 禁止跨源资源访问

iframe 通常允许跨源嵌入(具体取决于 X-Frame-Options 指令),但不允许进行跨源读取(例如使用 JavaScript 访问 iframe 中的文档)。
CSS 可以使用 <link> 元素或 @import 在 CSS 文件中嵌入跨源 CSS。可能需要使用正确的 Content-Type 标头。
表单 跨源网址可用作表单元素的 action 属性值。Web 应用可以将表单数据写入跨源目的地。
图片 允许嵌入跨源图片。不过,系统禁止读取跨源图片数据(例如,使用 JavaScript 从跨源图片中检索二进制数据)。
多媒体 您可以使用 <video><audio> 元素嵌入跨源视频和音频。
文字 可嵌入跨源脚本;不过,对某些 API(例如跨源提取请求)的访问可能会被屏蔽。

TODO:DevSite - 思考并检查评估

如何防止点击劫持

点击劫持
图:3 个独立层(基础网站、 iframe 中的网站、透明按钮)。

名为“点击劫持”的攻击在iframe和叠加层中嵌入网站 链接到其他目标的透明按钮。用户被诱骗 会认为他们在访问您的应用时, 。

要禁止其他网站将您的网站嵌入 iframe,请添加内容 具有 frame-ancestors 的安全政策 指令 添加到 HTTP 标头中

或者,您也可以将 X-Frame-Options 添加到 HTTP 标头中, MDN 以查看选项列表。

小结

浏览器会把守门人这个大忙,但愿您松了一口气 网络安全的方法即使浏览器试图通过阻止访问来确保安全,也是如此 有时,您需要在自己的源代码中访问跨源资源 应用。在下一篇指南中,了解跨源资源共享 (CORS) 访问权限以及如何告知浏览器加载跨源资源 来源。