同源政策是一项浏览器安全功能，用于限制一个来源上的文档和脚本与另一个来源上的资源交互的方式。
浏览器可以一次加载和显示多个网站的资源。您可能会同时打开多个标签页，或者网站可能会嵌入来自不同网站的多个 iframe。如果这些资源之间的交互不受到限制，并且某脚本受到攻击者的攻击，则该脚本可能会公开用户浏览器中的所有内容。
同源政策会阻止此类情况发生，方法是禁止读取从其他来源加载的资源。“但等一下”，您可以说“我始终从其他来源加载图片和脚本”。浏览器允许使用一些代码嵌入其他来源的资源。此政策主要是一个历史工件，可能会使您的网站面临使用 iframe 的点击劫持等漏洞。您可以使用内容安全政策限制对这些标记的跨源读取。
什么是同源？
来源由架构（也称为协议，例如 HTTP 或 HTTPS）、端口（如果已指定）和主机定义。如果两个网址的三个相同之处，它们会被视为同源。例如，http://www.example.com/foo 与 http://www.example.com/bar 的来源相同，但不与 https://www.example.com/bar 相同，因为架构不同。
允许和屏蔽哪些内容？
通常，允许嵌入跨源资源，但禁止读取跨源资源。
| iframe |
通常允许跨源嵌入（具体取决于 X-Frame-Options 指令），但不允许跨源读取（例如，使用 JavaScript 访问 iframe 中的文档）。
|
| CSS |
跨域 CSS 可以在 CSS 文件中使用 <link> 元素或 @import 进行嵌入。可能需要正确的 Content-Type 标头。 |
| 表单 |
跨域网址可用作表单元素的 action 属性值。Web 应用可以将表单数据写入跨源目的地。 |
| 图片 | 允许嵌入跨源图片。但是，系统将禁止读取跨源图片数据（例如，使用 JavaScript 从跨源图片中检索二进制数据）。 |
| 多媒体 |
可以使用 <video> 和 <audio> 元素嵌入跨域视频和音频。 |
| 文字 | 您可以嵌入跨源脚本，但可能会阻止对某些 API（例如跨源提取请求）的访问。 |
TODO：DevSite - 思考并检查评估
如何防范点击劫持
名为“点击劫持”的攻击会将网站嵌入到 iframe 中，并叠加指向其他目的地的透明按钮。用户在向攻击者发送数据时，会被诱使以为自己在访问您的应用。
如需禁止其他网站将您的网站嵌入到 iframe 中，请向 HTTP 标头添加包含 frame-ancestors 指令的内容安全政策。
或者，您也可以将 X-Frame-Options 添加到 HTTP 标头中，请参阅 MDN，查看选项列表。
小结
浏览器在努力保障网络安全，希望您松了一口气。虽然浏览器通过阻止访问资源来努力确保安全，但有时您希望访问应用中的跨源资源。在下一指南中，您将了解跨域资源共享 (CORS) 以及如何告知浏览器：允许从可信来源加载跨域资源。