web 跨域请求安全问题

说起前端安全问题，大部分都听过 XSS 和 CSRF 这两个名词，前端面试中我们也经常会问这两个点作为 web 安全的一些基础考察。但大部分只是从浅谈辄止，停留在基本词义，很少有人真正去主动实践过安全，并且思考背后的关联。

前端安全主要来源两个方面，一个是不安全的脚本、另一个是不安全的请求，前者代表各种 XSS 等注入脚本的手段、后者则发起非法的请求，CSRF 是代表。

web 安全基石——同源策略

这篇文章主要想分析下以跨域为代表的安全攻击和保护。很多人知道同源策略SOP，它是 web 的安全基石。由于浏览器是 http 无状态的连接，所以对于不同源头的区别至关重要，简而言之：协议、域名、端口三者相同，浏览器则认定它为同源，在同一源下，诸如、cookie\html5储存等资源是可以共享的。

有了同源策略作为保证，为什么会出现其他源的非法请求呢？

这里就是很多人容易混淆的地方。同源策略的核心是保护属于某个源的资源不被其他源读取，它们彼此独立，这个设计的初衷并非为防止非法请求而存在，也就是说同源不等于合法请求，它也不关心请求是否合法。简单的定义为“可写不可读”。

那么问题来了，为什么我们在跨域请求的时候会被浏览器会有报错呢？（后面有解释）

上图是请求是被 CORS 规则阻止的错误提示。

跨域共享策略

同源策略是保护统一源资源部被窃取，但现实是，我们很多场景，需要在不同源之间共享，跨源资源共享（CORS）既是针对如何合法的突破 SOP。在形成官方协议前，曾经有各自非官方的手段来突破不同源之间共享资源，比如 JSOP 。CORS 是一种官方的协议用来在不同源直接共享资源，所以它目的也不是为了安全，某种程度，正因为不合理的使用，反而不安全，比如使用这样的协议： Access-Control-Allow-Origin: *允许所有源共享资源，无疑是向入侵者敞开大门。

所以、SOP 和 CORS 是资源隔离和共享的相反方向。

CSRF 的本质

之所以强调这一点，是