同源政策是一项浏览器安全功能,用于限制 一个源上的文档和脚本可以与资源交互 其他来源上。
浏览器可以同时加载和显示多个网站中的资源。您可能有 同时打开多个标签页,或者网站可能嵌入多个 iframe 不同网站。如果这些元素之间的互动 而且某个脚本被攻击者破坏, 显示用户浏览器中的所有内容。
同源政策通过阻止对以下内容的读取访问来防止发生这种情况 从另一个来源加载的资源“不过等等”您说“我加载图片 和脚本始终来自其他来源的脚本。”浏览器允许使用一些代码 嵌入来自其他来源的资源。此政策主要是历史性的 并可能会使您的网站面临漏洞,例如使用 iframe。您可以限制跨源读取 安全机制的内容安全 政策。
什么会被视为同源?
源站由 scheme(也称为协议)定义,
HTTP 或 HTTPS)、端口(如果已指定)和主机。当这三项内容相同时
则视为同源。例如:
http://www.example.com/foo
与
http://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 - 思考并检查评估
如何防止点击劫持
![点击劫持](https://web.developers.google.cn/static/articles/same-origin-policy/image/clickjacking-c47718a519b94.png?authuser=0000&hl=hr)
名为“点击劫持”的攻击在iframe
和叠加层中嵌入网站
链接到其他目标的透明按钮。用户被诱骗
会认为他们在访问您的应用时,
。
要禁止其他网站将您的网站嵌入 iframe,请添加内容
具有 frame-ancestors
的安全政策
指令
添加到 HTTP 标头中
或者,您也可以将 X-Frame-Options
添加到 HTTP 标头中,
MDN
以查看选项列表。
小结
浏览器会把守门人这个大忙,但愿您松了一口气 网络安全的方法即使浏览器试图通过阻止访问来确保安全,也是如此 有时,您需要在自己的源代码中访问跨源资源 应用。在下一篇指南中,了解跨源资源共享 (CORS) 访问权限以及如何告知浏览器加载跨源资源 来源。