为什么要跨域

为什么要跨域

首先了解什么是跨域

跨域就是一个域名请求另外一个域名的资源，例如www.a.com网站请求www.b.com/b.js javascript文件，这就是跨域。
既然跨域是一个域名到另外一个域名，那么我们先了解一下什么是“同域”，也就是所说的同源策略。

什么是同源策略

简单来说同源指的是"协议+域名+端口"三者相同，同源策略实际上是浏览器限制一个域名与另外一个域名的资源的交互的规则。例如：

1. www.a.com 与 www.a.com 它们不是同源，协议不一样。
2. www.a.com 与 www.b.com 它们不是同源，域名不一样。
3. www.a.com 与 www.a.com:8080 它们不是同源，端口不一样。
4. 更多例子请看
   

那么为什么浏览器要有这种规则呢？规则就是为了维护秩序，那同源策略就是为了维护浏览器web世界的秩序。那具体有什么东西会威胁web世界的稳定呢？

Web常见攻击手段

1. XSS 攻击
2. CSRF 攻击
3. SQL 注入
4. DDOS 攻击
5. SYN 攻击

因为同源策略主要防范的就是CSRF攻击，所以这里只对CSRF攻击展开介绍，以及讲述为什么同源策略能够限制CSRF攻击。

假如没有同源策略

我们来设想一下

1. 有一个网站域名为www.a.com的A网站，在该网站里面放置一个域名为www.b.com的B网站的iframe，并且该iframe 100% 宽度高度
2. 用户在不知道域名的情况下访问了A网站，但他以为是访问了B网站，所以正常登录了B网站
3. 这时A网站通过document.querySelector('iframe').contentWindow.document.cookie脚本就能获得该用户在B网站下的cookie，并且可以随意冒充该用户了。

是不是很危险？？而现实情况呢，由于同源策略的存在，当A网站试图获取B网站的cookie的时候，浏览器会提示一个错误。例子

Uncaught DOMException: Blocked a frame with origin "fiddle.jshell.net" from accessing a cross-origin frame.

同理除了不能获取cookie，同源策略也限制的DOM节点的访问，因为与其获取cookie，直接监控input输入框，获取用户的账号密码岂不是更简单。

总结

由上面所述，由于同源策略的存在，浏览器限制了跨域获取cookie，也限制了跨域DOM节点的访问，有效的防止的CRSF攻击。当然发起CRSF攻击还有其它手段。

转载于:https://juejin.im/post/5c625e6d518825626463ad9c