浏览器的同源策略

Tue, 17 Dec 2024 00:00:00 +0800

概述

本文从以下三个问题，循序渐进，一步步拆解，何为浏览器的同源策略和跨域问题：

什么是同源策略和跨域问题？
怎样才算同源？
同源策略下会有什么限制？

什么是同源策略和跨域问题？

同源政策是 1995 年由 Netscape 公司（就是创造了 JS 的那家网景公司）引入浏览器的一种策略。

想要理解同源策略的话，可以先假设如果没有同源策略会发生什么事情。接下来我们通过一则恐怖故事代入理解一下没有同源策略的世界：

在某个深夜，小明独自一人在家浏览网页，无意间打开了一些特殊网站，而恰巧的是，小明之前刚好打开过某些重要支付平台的网站且还没关闭，这时特殊网站里面可能有一些特殊 JS 脚本，在偷偷获取小明支付平台上的信息，并且偷偷利用了这些信息再结合某些手段，成功把小明支付平台上的钱转走了，小明上完厕所回来后，突然收到支付平台转账成功的短信，然后然后然后瘫坐在地上，泣不成声，仰天长啸，大喊一声：“还我攒了半年的 9.99~”

恐怖故事听完了，我们来先上个概念，什么是同源策略？

借用 MDN 上的描述：

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

怎么理解这个概念呢？举个栗子，随着汽车数量的上升，现在很多城市都有各种限行政策，就拿广州来说，如果不是 粤A 的车牌进入城区的话会有开四停四的限行限制。

同源策略跟汽车限行政策有一点点像，同源策略规定在“同源”下的脚本、文档等资源访问不受限（有点像 粤A 牌的汽车在广州内行驶不会被限行），如果不是“同源”则无法互相访问脚本、文档等资源（非 粤A 牌的汽车在广州市区内受开四停四政策限制）

理解了同源策略后，对于跨域就很好理解了，同源策略是好，我们也需要同源策略，但有些时候我们确实需要不同源的两个网页互相读取信息，这是就产生了跨域问题。

额外补充，同源策略是浏览器的行为，是浏览器的行为，是浏览器的行为（对于这点的解析可以参考：同源策略下，服务器会收到浏览器的请求吗？）

怎样才算同源？

所谓“同源”，就是以下三者必须都相同：

协议相同

协议相同的两个域名：（都是 https 协议）
- https://juejin.cn
- https://juejin.cn
协议不同的两个域名：（一个是 http 协议，一个是 https 协议）
- http://juejin.cn
- https://juejin.cn

域名相同

域名相同的两个域名：
- https://juejin.cn
- https://juejin.cn
域名不同的两个域名：（一个是二级域名，一个是三级域名）（可能这个是最容易记错的）
- https://juejin.cn
- https://www.juejin.cn

端口相同

端口相同的两个域名：
- https://juejin.cn
- https://juejin.cn
端口不同的两个域名：
- https://juejin.cn
- https://juejin.cn:8081

再重复一遍，

同协议、同域名、同端口，才算同源

同源策略下会有什么限制？

在同源策略下，如果非同源，会有以下三个方面的行为受到限制：

如果非同源，其 JS 脚本，不能互相对 DOM 进行读写操作

数据

如果非同源，不能互相读写 Cookies、LocalStorage、SessionStorage 和 IndexedDB

网络请求

如果非同源，不能通过 AJAX 的方式互相发送、接收数据

为了方便理解，接下来我们展开说说这三条规则 ↓↓↓

浏览器的同源策略 on Last Stand

浏览器的同源策略

概述

什么是同源策略和跨域问题？

怎样才算同源？

同源策略下会有什么限制？