同源策略是一种重要的安全机制，它限制一个源加载的文档或脚本如何与另一个源的资源进行交互。下文小文智能就为您详细解答什么是同源策略。
一、目的
它有助于隔离潜在的恶意文档，减少可能的攻击媒介。例如，它可以防止互联网上的恶意网站在浏览器中运行 JS，以从第三方 Web 邮件服务（用户已登录）或公司内部网（通过以下方式防止攻击者直接访问）读取数据：没有公共 IP 地址）并将该数据转发给攻击者。
二、定义
如果两个 URL 的协议、端口（如果指定）和主机相同，则两个 URL 具有相同的来源。您可能会看到它被引用为“方案/主机/端口元组”，或者只是“元组”。（“元组”是一组共同构成一个整体的项目——双/三/四/五元/等的通用形式。）
下表给出了与 URL 的来源比较的示例http://store.company.com/dir/page.html：
三、跨域网络访问
同源策略控制两个不同源之间的交互，例如当您使用XMLHttpRequest或<img>元素时。这些交互通常分为三类：
通常允许跨源写入。例如链接、重定向和表单提交。某些 HTTP 请求需要预检。
通常允许跨源嵌入。（下面列出了示例。）
通常不允许跨源读取，但读取访问权限通常会因嵌入而泄漏。例如，您可以读取嵌入图像的尺寸、嵌入脚本的操作或嵌入资源的可用性。
以下是一些可能嵌入跨源资源的示例：
JavaScript 与<script src=”…”></script>. 语法错误的错误详细信息仅适用于同源脚本。
CSS 应用与<link rel=”stylesheet” href=”…”>. 由于 CSS 的语法规则比较宽松，跨源 CSS 需要正确的Content-Typeheader。如果是 MIME 类型不正确且资源不以有效 CSS 构造开头的跨源加载，浏览器会阻止样式表加载。
显示的图像<img>。
<video>和播放的媒体<audio>。
<object>嵌入了和的外部资源<embed>。
应用的字体与@font-face. 有些浏览器允许跨源字体，其他浏览器则需要同源字体。
嵌入的任何内容<iframe>。站点可以使用X-Frame-Options标头来防止跨源框架。
四、如何允许跨域访问
使用CORS允许跨域访问。CORS 是HTTP的一部分，它允许服务器指定浏览器应允许加载内容的任何其他主机。
五、如何阻止跨域访问
为了防止跨源写入，请检查请求中不可猜测的令牌 – 称为跨站点请求伪造 (CSRF)令牌。您必须防止跨源读取需要此令牌的页面。
为了防止资源的跨源读取，请确保该资源不可嵌入。通常有必要防止嵌入，因为嵌入资源总是会泄漏一些有关它的信息。
为了防止跨域嵌入，请确保您的资源不能被解释为上面列出的可嵌入格式之一。浏览器可能不尊重Content-Type标头。例如，如果您将<script>标签指向 HTML 文档，浏览器将尝试将 HTML 解析为 JavaScript。当您的资源不是站点的入口点时，您还可以使用 CSRF 令牌来防止嵌入。
六、跨域数据存储访问
对存储在浏览器中的数据（例如Web Storage和IndexedDB）的访问按来源分开。每个源都有自己单独的存储，一个源中的 JavaScript 无法读取或写入属于另一源的存储。
Cookie使用单独的来源定义。页面可以为其自己的域或任何父域设置 cookie，只要父域不是公共后缀即可。Firefox 和 Chrome 使用公共后缀列表来确定域是否为公共后缀。当您设置 cookie 时，您可以使用Domain、Path、Secure和HttpOnly标志来限制其可用性。当您读取 cookie 时，您无法看到它的设置位置。即使您仅使用安全的 https 连接，您看到的任何 cookie 也可能是使用不安全的连接设置的。
