同源策略是一种重要的安全机制，它限制一个源加载的文档或脚本如何与另一个源的资源进行交互。下文小文智能就为您详细解答什么是同源策略。

打开网易新闻 查看精彩图片

一、目的

它有助于隔离潜在的恶意文档，减少可能的攻击媒介。例如，它可以防止互联网上的恶意网站在浏览器中运行 JS，以从第三方 Web 邮件服务（用户已登录）或公司内部网（通过以下方式防止攻击者直接访问）读取数据：没有公共 IP 地址）并将该数据转发给攻击者。

二、定义

如果两个 URL 的协议、端口（如果指定）和主机相同，则两个 URL 具有相同的来源。您可能会看到它被引用为“方案/主机/端口元组”，或者只是“元组”。（“元组”是一组共同构成一个整体的项目——双/三/四/五元/等的通用形式。）

下表给出了与 URL 的来源比较的示例http://store.company.com/dir/page.html：

打开网易新闻 查看精彩图片

三、跨域网络访问

同源策略控制两个不同源之间的交互，例如当您使用XMLHttpRequest或元素时。这些交互通常分为三类：

通常允许跨源写入。例如链接、重定向和表单提交。某些 HTTP 请求需要预检。

通常允许跨源嵌入。（下面列出了示例。）

通常不允许跨源读取，但读取访问权限通常会因嵌入而泄漏。例如，您可以读取嵌入图像的尺寸、嵌入脚本的操作或嵌入资源的可用性。

以下是一些可能嵌入跨源资源的示例：

JavaScript 与. 语法错误的错误详细信息仅适用于同源脚本。

CSS 应用与. 由于 CSS 的语法规则比较宽松，跨源 CSS 需要正确的Content-Typeheader。如果是 MIME 类型不正确且资源不以有效 CSS 构造开头的跨源加载，浏览器会阻止样式表加载。

显示的图像。

和播放的媒体。