前端跨域介绍及跨域解决方案

什么是同源策略

同源策略(Same origin policy)是一种约定，是由Netscape提出的一个著名的安全策略，是浏览器最核心也基本的安全功能。

同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击，所谓同源是指协议+域名+端口 三者相同，即便是两个不同的域名指向同一个ip地址，也不是同源。

什么是跨域

• 广义

  • 资源跳转：a链接、重定向、表单提交
  • 资源嵌入：<link>、<script>、<img>、<frame>等DOM标签，还有样式中的background: url()、@font-face()等文件外链
  • 脚本请求：js发起的Ajax请求、DOM和js对象的跨域操作

• 狭义

  通常说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景，限制的是这几种行为：

  • cookie、localStorage、sessionStorage和indexDB无法读取
  • DOM和js对象无法获得
  • Ajax请求不能发送

简单的说：由于浏览器的同源策略，即出现协议、域名、端口有一种不一致的情况下，就会出现跨域，属于浏览器的一种安全限制

XSS攻击

跨站脚本攻击，简单理解就是攻击者在网页中嵌入客户端脚本(例如javascript)，当用户浏览此网页时，脚本就会在浏览器上执行，比如获取用户的cookie，导航到恶意网站，携带木马等

CSFR攻击

跨站请求伪造，简单理解就是攻击者盗用了你的身份，以你的名义发送恶意请求，比如以你的名字发送邮件、发消息、盗取你的账号、甚至用于购买商品、虚拟货币转账等等

跨域解决方案

1. JSONP：一些标签比如script、img获取跨域资源是没有限制的，前端发送src是一个带参数地址来实现跨域通信，缺点是只能实现get请求
2. 空的iframe + form：实现post请求，创建一个空的iframe，创建form表单，利用js设置表单属性以及提交的值或者需要操作的函数，然后append进iframe不显示，执行表单提交操作，再remove掉，达到post请求的效果
3. 跨域资源共享(CORS)：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置
4. nginx反向代理接口跨域：在服务器上做代理，将请求转发到真正的后端域名上

参考链接

https://segmentfault.com/a/1190000015597029