同源政策是一项浏览器安全功能，用于限制一个来源上的文档和脚本如何与另一个来源上的资源进行交互。
浏览器可以同时加载和显示来自多个网站的资源。您可能同时打开了多个标签页，或者某个网站可能嵌入了来自不同网站的多个 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 |
您可以使用 <link> 元素或 CSS 文件中的 @import 嵌入跨域 CSS。可能需要正确的 Content-Type 标头。
|
| 表单 |
跨域网址可用作表单元素的 action 属性值。Web 应用可以将表单数据写入跨域目标。 |
| 图片 | 允许嵌入跨域图片。不过，读取跨域图片数据（例如使用 JavaScript 从跨域图片中检索二进制数据）会被屏蔽。 |
| 多媒体 |
您可以使用 <video> 和 <audio> 元素嵌入跨域视频和音频。 |
| 文字 | 可以嵌入跨域脚本；不过，对某些 API（例如跨域提取请求）的访问可能会被屏蔽。 |
TODO: DevSite - Think and Check assessment
如何防范点击劫持
一种名为“点击劫持”的攻击会将网站嵌入 iframe 中，并叠加链接到其他目标的透明按钮。用户会误以为自己正在访问您的应用，而实际上是在向攻击者发送数据。
如需阻止其他网站在 iframe 中嵌入您的网站，请在 HTTP 标头中添加包含 frame-ancestors 指令的内容安全政策。
或者，您也可以将 X-Frame-Options 添加到 HTTP 标头，如需查看选项列表，请参阅 MDN。
小结
希望您能感到一丝宽慰，因为浏览器会努力充当网络安全的守门人。尽管浏览器会通过阻止对资源的访问来确保安全，但有时您可能希望在应用中访问跨域资源。在下一指南中，您将了解跨域资源共享 (CORS) 以及如何告知浏览器允许从可信来源加载跨域资源。