论浏览器同源策略设计初衷 · 深入前端
最近几天在面试中被问及跨域越来越多，大多数都是用jsonp和jsonp原理搪塞过去。今天终于遇到一家公司问及同源策略，所以我在前端群里咨询各位大佬，有了以下内容。
感谢： Dillan 李宗（李校长） 百山（老梦）
挂面：
请教各位大神。同源策略。cookie和dom操作禁止完全可以理解，为什么要禁止ajax操作呢？
看到一片文章说，ajax的限制同cookie挂钩，如果带上cookie去跨域访问接口就可以通过程序的验证被认为身份是合法的
2019-03-04
百山
13:20:11
js注入
安全策略
csrf不就是存在这种问题吗
吴挂面
13:20:13然而， cookie是明文，可以复制，然后用客户端模仿请求。
百山
13:20:15跨域伪造。
百山
13:20:33所以现在大多数都是用的ytoken
百山
13:20:42而且还是几道验证
吴挂面
13:20:58禁止了浏览器的ajax跨域访问，别人想攻击也可以自己写客户端啊。。。
2019-03-04
百山
13:2221它应该是为了防止那种通用群攻的
百山
13:22:31如果是个性化定制攻击，你怎么防御都没用
百山
13:23:13冒名顶替服务器发请求。
百山
13:23:26你又无法验证服务器到底是不是你这边对接的客户方
百山
13:23:38就造成了伪造攻击
2019-03-04
吴挂面
13:24:08比如现在用node发请求，一样伪造 cookie啊，。
李宗
14:0225
这应该是和 cookie跨域配套的安全措施
李宗
14:0241
单独来看我也想不出什么理由
李宗
14:07:53
因为说想偷走客户端的某些信息已经有了 cookie跨域限制了
而ajax跨域跨域通过设置服务器的响应头就能解决，这也是
http2.0后才支持的在2.0之前还是很管用的
李宗
14:08:35所以我觉得是这是个历史遗留原因了
2019-03-04
Dillan
14:08:40
同源策略不是为了防止伪造客户端去请求资源的，甚至不是为了限制访问资源，而是提供了一个协商机制，允许在协商机制下访问资源
Dillan
14:10:13
CORS头不是HTTP规范的一部分，是 fetchfnseb， FFXtxhttp22EB规范的，所以也不是http2之后的东西了
Dillan
14:10:25
https://fetch.spec.whatwg.org/#corspreflight-request CoRSB的定义在这里
李宗
14:12:23
这个我想到一个可能
假设我往百度首页注入了一段JS 代码，去请求你公司的业务API接口
这时庞大的访问量会拖垮你的公司
但是如果百度和你公司有合作协议，相互信任，那么你公司可以对这个接口设置一个允许跨域访问的响应头：Access-Control-Allow-Origin: www.baidu.com
Dillan
14:14:03
而对于这个例子中，如果京东想要读取到淘宝的localstorage，要么自己做个钓鱼站，要么中间人，这都是可以直接报警抓人的事了
李宗
14:14:12
我举的这个例子好像在现实中发生过
2019-03-04
Dillan
14:15:01
意味着要么欺骗用户访问钓鱼站，要么能在链路上做手脚，浏览器只能保证正常情况下资源是隔离的，但是不能保证用户是智障被骗
同样，浏览器也不能保证链路是安全的，所以这些都不属于同源策略考虑的事情了
他只保证在浏览器这一层面上是安全的
百山
14:15:17
上次和朋友聊天，他们做黄牛的，就是不停的用服务器去访问人家的卖票网站。把服务器搞崩，别人只能从他那里买票
百山
14:15:20
好像赚了几十万
李宗
14:15:25
＠Dililan我觉得你说的这个和问题稍微有点出入我们讨论的是“为啥ajax会有同源策略”
群聊
2019-03-04
李宗
14:15:43
cookie1什么的有同源策略很少理解
李宗
14:15:50
很好理解
Dillan
14:15:51
因为ajax是一个获取服务器资源的操作
Dillan
14:16:17
获取接口数据是资源， cookie是资源， localstorage是资源，都是同源策略对于资源的定义
李宗
14:16:43
response.addHeader（Access-Control-Allow-Origin，＂＂）
从可以设置这个请求头来看首先主动权肯定是后端的肯定是为后端服务的
2019-03-04
Dillan
14:17:37
所以这就是同源策略的意义，因为这个头是同源策略的一部分，所以后端才有了主动权，因为需要协商
李宗
14:17:43
这个角度来说好像也可以只不过 cookie之类的是客户端的资源ajax是服务端的资源
Dillan
14:17:48
假如没有同源策略，后端就没有这个主动权了
Dillan
14:18:16
它们都是一个源/域下的资源
Dillan
14:20:52
而之前说的往百度首页注入js，那是链路上做手脚了，这种安全性由HTTPS来保证而不是由同源策略来保证
Air
14:21:45
同源不是为了防止xss吗
Dillan
14:2244
不是，同源策略下，请求还是会被发出去的，可以试下，只是前端拿不到数据
Dillan
14:23:39
你想，如果请求不发出去，浏览器怎么知道服务器响应了
Access-Control-Allow-Origin–等等是什么
Dillan
14:24:11其
实是请求发出去，服务器响应了，浏览器看到服务器允许，就把数据交给你的js，服务器如果不允许，就给你js报个错
李宗
14:24:53
如果AJAX发送请求给服务端是以非GET的形式，将会发送两次请求
第一次请求以Option的方式发给服务端
Dillan
14:24:59
所以如果xss要盗取 Xcookie那请求可以发出去
李宗
14:25:30
如果服务端允许跨域了，返回允许的响应头
这时候浏览器才会发送第二次请求，带上相应的数据
Dillan
14:25:30
应该说非简单请求会options，get也可能触发options
李宗
14:25:55
get我倒是没碰到过
2019-03-04
Dillan
14:26:11如果由自定义的 header 的话，get也会有 option的
Air
14:26:58也对哦。。
Air
14:27:12跨域响应其实已经拿到了
last order
14:27:15
非简单请求？
Dillan
14:27:34
是的，非简单请求会触发预协商
last order
14:27:53
什么是非简单请求
绝世小汤圆
14:28:07
是一个定义
Dillan
14:28:09
然而简单请求基本上只有和原生表单提交一样的get post了
绝世小汤圆
14:28:22
我一直不理解
绝世小汤圆
14:28:29
post为什么是简单请求
绝世小汤圆
14:28:40
他明明也会触发option啊
李宗
14:28:50
我看了下公司的项目get请求改了请求头不会触发option
Dillan
14:28:51
之所以简单，某种程度上的原因，就是在CORS规范出来之前，就有了原生表单的get和post…
Dillan
14:29:02
除此之外的都是非简单的
Dillan
14:29:35
Dillan
14:29:51
不是所有头部都触发options的，具体有这些个
李宗
14:30:13
用的最新版本的google浏览器不知道来的浏览器会不会是你说的这样
李宗
14:30:42
简单请求这个概念就不严谨
绝世小汤圆
14:31:00
post明明会发 option的
2019-03-04
Dillan
14:31:01
可以设置超出这些访问的 header试试，如果没有 Option，确认是否预协商缓存了
Dillan
14:34:46
https://developer.mozilla.org/en-us/docs/Web/HTTP/CORS＃Simple
requests简单请求这个词MDN反正这么写的
李宗
14:36:54
[图片]
Dillan
14:38:14
规范中没有简单请求这么个词，但是规范中是定义了 Preflighted requestsdp的
Dillan
14:39:45
https://www.zhihu.com/question/268998684/answer/344949204
李宗
14:36:54
[图片]
Dillan
14:38:14
规范中没有简单请求这么个词，但是规范中是定义了 Preflighted requestsdp的
Dillan
14:39:45
https://www.zhihu.com/question/268998684/answer/344949204
2019-03-04
李宗
14:43:32
这胖纸真是啥都懂
Dillan
14:44:36
这么黑真的好嘛
吴挂面
14:49:32
所以总结起来同源策略禁止ajax只是为了给后端主动权而已咯？
Dillan
14:56:21
我的理解是，浏览器层面资源访问的主动权，脱离浏览器层面，就没有意义了，因为同源策略本来就只是存在于浏览器的，所以自己在node请求，其实同源策略根本就管不着也不想管，浏览器只管他自己范围内的事情
Dillan
14:56:48
至于标准制定者还有没有其他更深的考虑，就不是我这种菜鸡脑子能想到的了
https://www.zhihu.com/question/25427931
补一篇很久以前收藏的回答吧, 也修正一下之前说法中不严谨的地方
同源策略某些时候是可以防止xss的(应该说是叫缓解xss的影响), 不过理解上来说, 这不是同源策略的主要目的, 同源策略设计的目的更普适而不仅仅是盯着xss来设计的
感谢 Dililan 大佬解答 回去我整理下发群里
感谢老梦
感谢李校长解答
原文链接：http://icaoguo.com/?p=92
网友评论