同源政策是一项浏览器安全功能，用于限制 一个源上的文档和脚本可以与资源交互 其他来源上。
浏览器可以同时加载和显示多个网站中的资源。您可能有 同时打开多个标签页，或者网站可能嵌入多个 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 - 思考并检查评估
如何防止点击劫持
名为“点击劫持”的攻击在iframe和叠加层中嵌入网站
链接到其他目标的透明按钮。用户被诱骗
会认为他们在访问您的应用时，
。
要禁止其他网站将您的网站嵌入 iframe，请添加内容
具有 frame-ancestors 的安全政策
指令
添加到 HTTP 标头中
或者，您也可以将 X-Frame-Options 添加到 HTTP 标头中，
MDN
以查看选项列表。
小结
浏览器会把守门人这个大忙，但愿您松了一口气 网络安全的方法即使浏览器试图通过阻止访问来确保安全，也是如此 有时，您需要在自己的源代码中访问跨源资源 应用。在下一篇指南中，了解跨源资源共享 (CORS) 访问权限以及如何告知浏览器加载跨源资源 来源。