跨域--介绍

缺乏、安全感 2022-11-29 11:26 75阅读 0赞

原文网址：[跨域--介绍\_IT利刃出鞘的博客-CSDN博客][--_IT_-CSDN]

# 其他网址 #

> [彻底理解浏览器的跨域 - 掘金][-]

# 什么是跨域 #

**跨域**

> 跨域是同源策略不允许通信的情景。

**同源策略**

> 同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
> 
> 域名地址
> 
> ![format_png][]
> 
> 同源策略限制以下几种行为：
> 
> 1. Cookie、LocalStorage 和 IndexDB 无法读取
> 2. DOM 和 Js对象无法获得
> 3. AJAX 请求不能发送
> 
> 但是有三个标签是允许跨域加载资源：
> 
> 1. <img src=XXX>
> 2. <link href=XXX>
> 3. <script src=XXX>

**常见跨域情景**

> <table style="width:617px;"> 
> <tbody> 
> <tr> 
> <td style="vertical-align:top;width:259px;"> URL </td> 
> <td style="vertical-align:top;width:205px;"> 说明 </td> 
> <td style="vertical-align:top;width:151px;"> 是否允许通信 </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;width:259px;"> http://www.domain.com/a.js http://www.domain.com/b.js http://www.domain.com/lab/c.js </td> 
> <td style="vertical-align:top;width:205px;"> 同一域名，不同文件或路径 </td> 
> <td style="vertical-align:top;width:151px;"> 允许 </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;width:259px;"> http://www.domain.com:8000/a.js http://www.domain.com/b.js </td> 
> <td style="vertical-align:top;width:205px;"> 同一域名，不同端口 </td> 
> <td style="vertical-align:top;width:151px;"> 不允许 </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;width:259px;"> http://www.domain.com/a.js https://www.domain.com/b.js </td> 
> <td style="vertical-align:top;width:205px;"> 同一域名，不同协议 </td> 
> <td style="vertical-align:top;width:151px;"> 不允许 </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;width:259px;"> http://www.domain.com/a.js http://192.168.4.12/b.js </td> 
> <td style="vertical-align:top;width:205px;"> 域名和域名对应相同ip </td> 
> <td style="vertical-align:top;width:151px;"> 不允许 </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;width:259px;"> http://www.domain.com/a.js http://x.domain.com/b.js http://domain.com/c.js </td> 
> <td style="vertical-align:top;width:205px;"> 主域相同，子域不同 </td> 
> <td style="vertical-align:top;width:151px;"> 不允许 </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;width:259px;"> http://www.domain1.com/a.js http://www.domain2.com/b.js </td> 
> <td style="vertical-align:top;width:205px;"> 不同域名 </td> 
> <td style="vertical-align:top;width:151px;"> 不允许 </td> 
> </tr> 
> </tbody> 
> </table>

# **为什么限制跨域** #

浏览器之所以要对跨域请求作出限制，是出于安全方面的考虑，因为跨域请求有可能被不法分子利用来发动 **CSRF**攻击。

## **CSRF攻击** ##

> CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。CSRF攻击者在用户已经登录目标网站之后，诱使用户访问一个攻击页面，利用目标网站对用户的信任，以用户身份在攻击页面对目标网站发起伪造用户操作的请求，达到攻击目的。
> 
> CSRF 攻击的原理大致描述如下：有两个网站，其中A网站是真实受信任的网站，而B网站是危险网站。在用户登陆了受信任的A网站是，本地会存储A网站相关的Cookie，并且浏览器也维护这一个Session会话。这时，如果用户在没有登出A网站的情况下访问危险网站B，那么危险网站B就可以模拟发出一个对A网站的请求（跨域请求）对A网站进行操作，而在A网站的角度来看是并不知道请求是由B网站发出来的（Session和Cookie均为A网站的），这时便成功发动一次CSRF 攻击。
> 
> 因而 CSRF 攻击可以简单理解为：攻击者盗用了你的身份，以你的名义发送而已请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账......造成的问题包括：个人隐私泄露以及财产安全。
> 
> 因此，大多数浏览器都会跨域请求作出限制，这是从浏览器层面上的对 CSRF 攻击的一种防御，但是需要注意的是在复杂的网络环境中借助浏览器来防御 CSRF 攻击并不足够，还需要从服务端或者客户端方面入手防御。详细可以参考这篇文章[浅谈CSRF攻击方式][CSRF]

## **CSRF攻击示例** ##

> 我们发起的每一次 HTTP 请求都会带上请求地址对应的 cookie，那么可以做如下攻击：
> 
> 1.  用户登录了自己的银行页面 http://mybank.com，http://mybank.com向用户的cookie中添加用户标识。
> 2.  用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。
> 3.  http://evil.com向http://mybank.com发起AJAX HTTP请求，请求会默认把http://mybank.com对应cookie也同时发送过去。
> 4.  银行页面从发送的cookie中提取用户标识，验证用户无误，response中返回请求数据。此时数据就泄露了。
> 5.  而且由于Ajax在后台执行，用户无法感知这一过程。

> DOM同源策略也一样，如果 `iframe` 之间可以跨域访问，可以这样攻击：
> 
> 1.  做一个假网站，里面用iframe嵌套一个银行网站 http://mybank.com。
> 2.  把iframe宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。
> 3.  这时如果用户输入账号密码，我们的主网站可以跨域访问到http://mybank.com的dom节点，就可以拿到用户的输入了，那么就完成了一次攻击。

[--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/108110911
[-]: https://juejin.im/post/6844903816060469262
[format_png]: /images/20221124/0b4912f7fc9046eb878b8e97b7a8d973.png
[CSRF]: https://link.jianshu.com?t=http://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html