Webcourse/14-前端面试/07-安全问题：CSRF和XSS.md

## 前言

面试中的安全问题，明确来说，就两个方面：

- CSRF：基本概念、攻击方式、防御措施

- XSS：基本概念、攻击方式、防御措施

这两个问题，一般不会问太难。

有人问：SQL注入算吗？答案：这个其实跟前端的关系不是很大。


## CSRF

问的不难，一般问：

- CSRF的基本概念、缩写、全称

- 攻击原理

- 防御措施

如果把**攻击原理**和**防御措施**掌握好，基本没什么问题。


### 1、CSRF的基本概念、缩写、全称

CSRF（Cross-site request forgery）：**跨站请求伪造**。

PS：中文名一定要记住。英文全称，如果记不住也拉倒。


### 2、CSRF的攻击原理

![](http://img.smyhvae.com/20180307_1735.png)

用户是网站A的注册用户，且登录进去，于是网站A就给用户下发cookie。

从上图可以看出，要完成一次CSRF攻击，受害者必须满足两个必要的条件：

（1）登录受信任网站A，并在本地生成Cookie。（如果用户没有登录网站A，那么网站B在诱导的时候，请求网站A的api接口时，会提示你登录）

（2）在不登出A的情况下，访问危险网站B（其实是利用了网站A的漏洞）。

我们在讲CSRF时，一定要把上面的两点说清楚。

温馨提示一下，cookie保证了用户可以处于登录状态，但网站B其实拿不到 cookie。

举个例子，前段时间里，微博网站有个api接口有漏洞，导致很多用户的粉丝暴增。

### 3、CSRF如何防御

**方法一、Token 验证：**（用的最多）


（1）服务器发送给客户端一个token；

（2）客户端提交的表单中带着这个token。

（3）如果这个 token 不合法，那么服务器拒绝这个请求。


**方法二：隐藏令牌：**

把 token 隐藏在 http 的 head头中。


方法二和方法一有点像，本质上没有太大区别，只是使用方式上有区别。


**方法三、Referer 验证：**

Referer 指的是页面请求来源。意思是，**只接受本站的请求，服务器才做响应**；如果不是，就拦截。


## XSS

### 1、XSS的基本概念

XSS（Cross Site Scripting）：**跨域脚本攻击**。


接下来，我们详细讲一下 XSS 的内容。

> 预备知识：HTTP、Cookie、Ajax。



### XSS的攻击原理

XSS攻击的核心原理是：不需要你做任何的登录认证，它会通过合法的操作（比如在url中输入、在评论框中输入），向你的页面注入脚本（可能是js、hmtl代码块等）。

最后导致的结果可能是：

- 盗用Cookie

- 破坏页面的正常结构，插入广告等恶意内容

- D-doss攻击

### XSS的攻击方式

- 1、反射型

发出请求时，XSS代码出现在url中，作为输入提交到服务器端，服务器端解析后响应，XSS代码随响应内容一起传回给浏览器，最后浏览器解析执行XSS代码。这个过程像一次反射，所以叫反射型XSS。

- 2、存储型

存储型XSS和反射型XSS的差别在于，提交的代码会存储在服务器端（数据库、内存、文件系统等），下次请求时目标页面时不用再提交XSS代码。

### XSS的防范措施（encode + 过滤）

XSS的防范措施主要有三个：

**1、编码**：

对用户输入的数据进行`HTML Entity`编码。

如上图所示，把字符转换成 转义字符。


Encode的作用是将`$var`等一些字符进行转化，使得浏览器在最终输出结果上是一样的。

比如说这段代码：

```
<script>alert(1)</script>
```

若不进行任何处理，则浏览器会执行alert的js操作，实现XSS注入。

进行编码处理之后，L在浏览器中的显示结果就是`<script>alert(1)</script>`，实现了将$var作为纯文本进行输出，且不引起JavaScript的执行。

参考链接：[4类防御XSS的有效方法](https://www.jianshu.com/p/599fcd03fd3b)


**2、过滤：**

- 移除用户输入的和事件相关的属性。如onerror可以自动触发攻击，还有onclick等。（总而言之，过滤掉一些不安全的内容）

- 移除用户输入的Style节点、Script节点、Iframe节点。（尤其是Script节点，它可是支持跨域的呀，一定要移除）。

**3、校正**

- 避免直接对`HTML Entity`进行解码。

- 使用`DOM Parse`转换，校正不配对的DOM标签。

备注：我们应该去了解一下`DOM Parse`这个概念，它的作用是把文本解析成DOM结构。


比较常用的做法是，通过第一步的编码转成文本，然后第三步转成DOM对象，然后经过第二步的过滤。

**还有一种简洁的答案：**

首先是encode，如果是富文本，就白名单。


## CSRF 和 XSS 的区别

面试官还可能喜欢问二者的区别。

区别一：

- CSRF：需要用户先登录网站A，获取 cookie。

- XSS：不需要登录。


区别二：（原理的区别）

- CSRF：是利用网站A本身的漏洞，去请求网站A的api。

- XSS：是向网站 A 注入 JS代码，然后执行 JS 里的代码，篡改网站A的内容。


## 其他

### XSS

关于XSS，推荐几个网站：

- <http://html5sec.org/>

里面列出了很多XSS的例子，可以长见识。如果你专门研究XSS，可以看看。

- [FreeBuf网站上的专栏作者：Black-Hole](http://www.freebuf.com/author/black-hole)

比如，他的第一篇文章就讲到了[XSS的原理分析与解剖](http://www.freebuf.com/articles/web/40520.html)。有句话摘抄如下：弹窗只是测试xss的存在性和使用性。

比如，这个人还有篇文章写[自动化检测CSRF（第一章）](http://www.freebuf.com/articles/web/107207.html)。大公司做网站，一般会做嗅探服务（比如自动化工具做CSRF的检测、自动化的方式控制安全风险）。

另外，可能还有些工具，可以扫描代码本身有没有一些安全问题。

- [GitHub | Cure53](https://github.com/cure53)

这是GitHub上的一个德国组织。

上面的项目都跟安全相关，有些仓库是可以直接运行的。如果你不需要定制，就可以直接用别人的，没必要自己写XSS库、XSS的过滤之类的，避免麻烦。