Web

同源策略 (Same-Origin Policy)

两个 Web 资源的 URL 如果具有相同的方案 (Scheme) 、 主机 (Host) 和端口 (Port) ，则认为它们属于同一个源 (Origin) 。 例如，以下两个 URL 就属于同一个源。

http://www.example.com/a.html
http://www.example.com/b.html

它们的方案是 “http” ，主机是 “www.example.com”，端口是 “80” (默认端口)。

当 URL 省略端口时，HTTP 协议的默认端口为 80 ，HTTPS 协议的默认端口为 443 。 如下两个 URL 也属于同一个源。

http://www.example.com/a.html
http://www.example.com:80/b.html

第一个 URL 省略端口，所以使用 HTTP 协议的默认端口 80 。第二个 URL 指定端口为 80 。所以它们仍然属于同一个源。

以下的 URL 都属于不同的源：

http://www.example.com/a.html
http://www.example.com:81/a.html        端口同其他 URL 不同
http://example.com/a.html               主机同其他 URL 不同
https://www.example.com/a.html          方案同其他 URL 不同

上面几个 URL 有的是方案不同，有的是主机不同，有的则是端口不同。

其中一级域名 example.com 和二级域名 www.example.com 也认为不同。如果两个域名的 DNS 解析是同一 IP 地址，也认为不同。因为同源策略校验的并不是 DNS 解析后的结果。

跨域 (Cross-Origin)

浏览器通常管理着多个 web 资源，包括 HTML 文档、Javascript 脚本、CSS 层叠样式表，以及图片、音频、视频、字体等多媒体资源，甚至是 Local Storage 、Session Storage 、Cookies 和 IndexedDB 这些数据存储，还有服务器的动态数据（通常以 JSON 或 XML 数据表示，也可以是普通文本或二进制数据）。

其中，HTML 文档通常作为入口资源，引用着其他的 Web 资源，这些被引用的 Web 资源可能来自不同的源。 一个 Web 资源访问来自不同的源的另一个 Web 资源就会产生跨域的情况，而浏览器的 同源策略 则是限制这一种情况。

  • HTML 文档可以通过 <link> 、 <script> 、 <img> 、 <audio> 、 <video> 、 <embed> 、 <iframe> 元素来引用其他 Web 资源，这些资源可以来自不同的源。 对于这些跨域情况，浏览器的 同源策略 会放行。
  • CSS 层叠样式表可以通过 @import 、@font-face、url() 引用其他 Web 资源，这些资源可以来自不同的源。 对于这些跨域情况，浏览器的 同源策略 也会放行。
  • Javascript 脚本涉及 跨域网络访问（使用 AJAX 方式进行跨域网络访问）、跨域文档操作 (访问跨源 <iframe> 元素下的节点)、跨域数据存储访问 (访问跨源 <iframe> 元素下的 LocalStorage 、 SessionStorage 和 Cookies 等)，这些跨域情况通常会受到 同源策略 的限制。