记录同源策略与跨域

前记

在写项目时因为跨域的事情捣鼓了一段时间, 虽然以前也了解过CSRF攻击, 但是看到跨域时也没有跟跨域联系起来, 因此有必要写一下自己对跨域的理解.

同源策略

同源策略(Same-origin policy，简称 SOP) 指浏览器 的同源策略( 也就是说可以在浏览器层面破坏同源策略 ).

以下是来自MDN对同源策略要求的解释

如果两个 URL 的 protocol、port (en-US) (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。（“元组” 是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）。

也就是说只要 协议, 主机, 端口 三者相同时, 则说明两个URL是同源的.
协议和端口很好理解, 长得一样就行, 而主机其实也是如此, 主机也就是从协议结束位置开始到端口号开始处结束. 例如有如下URL : https://demo.example.com[:80]/demo1.html , 其中主机即为demo.example.com, 中括号指代可以出现也可以不出现.

以下是来自MDN的例子
[

同源策略的意义

假设我们没有同源策略, 每个网站的的cookies, DOM等重要数据就完全暴露出来, 那么就很容易出现网站被随意篡改攻击.

举个简单的场景, 假设你登陆某银行网站, 然后没有退出网站就去浏览一些不正规的网站, 当你点开视频看的兴起的时候, 手机突然噔噔收到一条短信:”您的账户成功向xxx转账10000元 “, 你当场吐血三升…

虽然上面的例子现实中不太可能出现, 但是为什么你明明只是点开了视频就被转账了呢? 归根结底还是因为没有了同源策略的保护, 你所访问的不正规网站可以使用你在银行页面登陆后的cookies来向银行发起转账请求 , 因为这个过程是前端页面, 也就是你的浏览器发起的请求, 在银行看来这个请求就是你本人发起的, 因此同源策略还是非常有必要的.

来看一下MDN是如何解释同源策略的.

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

可以看到其中只是说SOP”减少可能被攻击的媒介”, 也就是说SOP只能减少被攻击的风险, 并不是完全的安全.

SOP的限制

SOP主要有三个限制:

1. Ajax请求不能发送
2. DOM无法获取并操作
3. Cookie, LocalStorage和IndexDB无法获取

第2,3点都是比较容易理解的, 比较如果允许获取DOM以及其他敏感信息, 那么用户的安全几乎等于没有.

而之所以要禁用Ajax, 主要是因为Ajax请求会带上访问的网站的cookie. 假设你浏览器中还存有某银行的cookie, 如果没有禁止跨域, 那么当你访问某恶意网站时, 该网站发起一个Ajax请求就可以伪装成你进行转账, 修改密码等操作了.

后记

虽然SOP给程序员写代码带来了一些问题, 但是相较于安全性来说, SOP还是相当有必要的, 且在开发中程序员大可以选择一个专门用于调试的浏览器(我自己是用火狐当调试), 设置浏览器允许跨域即可.