什么是浏览器同源政策？浏览器同源政策介绍
同源策略是一种浏览器安全功能，它限制一个来源上的文档和脚本如何与另一个来源上的资源进行交互。浏览器可以一次加载并显示来自多个站点的资源。你可能同时打开了多个标签，或者一个网站可以嵌入来自不同网站的多个 iframe。如果这些资源之间的交互没有任何限制，并且脚本被攻击者破坏，则该脚本可能会将所有内容公开给用户浏览器。
同源策略通过阻止对从不同来源加载的资源的读取访问来防止这种情况的发生。浏览器允许一些标签嵌入来自其他来源的资源。此政策主要是历史性人工产物，可能会使你的网站暴露于诸如使用 iframe 的点击劫持之类的漏洞。你可以使用 “内容安全策略” 限制这些标签的跨域读取。
什么是同源？
来源由方案（也称为协议，例如 HTTP 或 HTTPS），端口（如果已指定）和主机定义。当两个 URL 的所有三个相同时，它们被认为是同源的。例如， http://www.example.com/foo与起源相同， **http**://www.example.com/bar 但不是**https**://www.example.com/bar 因为方案不同。
哪些内容被允许和拒绝？
通常，允许嵌入跨域资源，而阻止读取跨域资源。
通常，允许嵌入一个跨源资源，同时阻止读取一个跨源资源。
| iframe | 通常允许跨域嵌入（取决于 X-Frame-Options指令），但不允许跨域读取（例如使用 JavaScript 访问 iframe 中的文档）。 |
| CSS | 跨域 CSS 可以使用<link>元素或@import在 CSS 文件中嵌入。Content-Type可能需要正确的标题。 |
| 表单 | 跨域 URL 可以用作action表单元素的属性值。Web 应用程序可以将表单数据写入跨域目标。 |
| 图片 | 允许嵌入跨域图像。但是，canvas将禁止读取跨域图像（例如，使用 JavaScript 将跨域图像加载到元素中）。 |
| 多媒体 | 跨域视频和音频可以使用<video>和<audio>元素嵌入。 |
| 脚本 | 可以嵌入跨域脚本；但是，可能会阻止访问某些 API（例如跨域提取请求）。 |
如何防止点击劫持
称为 “点击劫持” 的攻击将网站嵌入，iframe并覆盖了链接到其他目标的透明按钮。用户被欺骗时以为他们在将数据发送给攻击者时正在访问你的应用程序。
要阻止其他网站将你的网站嵌入 iframe，请 在 HTTP 标头中添加带有 frame-ancestors 指令的内容安全策略。
总结
即使浏览器尝试通过阻止对资源的访问来保证安全，但有时你还是希望访问应用程序中的跨域资源。在下一指南中，了解跨域资源共享（CORS），以及如何告诉浏览器允许从受信任的源中加载跨域资源。