前端安全之XSS和CSRF攻击

冷不防 2023-03-04 08:26 6阅读 0赞

### 目录 ###

*   *   *  1. 什么是XSS ？
         *   *  1.1 概念
             *  1.2 攻击方式
             *  1.3 危害
             *  1.4 分类
         *  2. 如何防御XSS？
         *   *  2.1 设置HttpOnly
             *  2.2 输入检查
             *  2.3 输出检查
         *  3. 什么是CSRF ？
         *   *  3.1 概念
             *  3.2 攻击方式
         *  4. 如何防御CSRF？
         *   *  4.1 验证码
             *  4.2 验证Referer
             *  4.3 cookie设置sameSite
             *  4.4 添加token验证

### 1. 什么是XSS ？ ###

#### 1.1 概念 ####

XSS，即 Cross Site Script，是指**跨站脚本攻击**，原本缩应该为CSS，但是为了和层叠样式表（Cascading Style Sheet）的缩写进行区分，所以改为XSS。

#### 1.2 攻击方式 ####

XSS攻击是指攻击者在网站上注入恶意的客户端脚本代码，**通过恶意脚本对客户端网页进行篡改**，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。

#### 1.3 危害 ####

攻击者可以通过这种攻击方式来进行以下操作：

*  获取页面的数据，如DOM，包括DOM、cookie、localStorage，
 *  DOS攻击，发送合理请求，占用服务器资源，从而使用户无法访问服务器
 *  破坏页面结构
 *  流量劫持（将链接指向某网站）

#### 1.4 分类 ####

XSS攻击可以分为以下三类：

**（1） 反射型（非持久型）**

反射型XSS，也叫非持久型XSS，是指发生请求时，XSS代码出现在请求URL中，作为参数提交到服务器，服务器解析并响应。响应结果中包含XSS代码，最后浏览器解析并执行 。

也就是说，反射型XSS代码是首先出现在URL中的，然后需要服务端解析，最后需要浏览器解析之后XSS代码才能够攻击。

这种攻击方式往往需要攻击者诱使用户点击一个恶意链接，或者提交一个表单，或者进入一个恶意网站时，注入脚本进入被攻击者的网站。

该方式只会经过服务器，不会经过数据库。

**（2） 存储型（持久型）**

存储型XSS，也叫持久型XSS，主要是将XSS代码发送到服务器，当浏览器请求数据时，脚本从服务器上传回并执行。这种 XSS 攻击具有很强的稳定性。

比较常见的场景就是网页的留言板，攻击者在留言板写下包含攻击性的脚本代码，发表之后所有访问该留言的用户，都会在他们浏览器中执行该脚本代码

该方式会经过服务器，也会经过数据库。

**（3）基于DOM**

基于 DOM 的 XSS 攻击是指通过恶意脚本修改页面的 DOM 结构，是只发生在客户端的攻击。

### 2. 如何防御XSS？ ###

我们可以看到XSS危害如此之大， 那么我们在开发网站时就要做好防御措施，具体措施如下：

#### 2.1 设置HttpOnly ####

HttpOnly 是一个设置 cookie 是否可以被 javasript 脚本读取的属性，浏览器会禁止页面的 Javascript 访问带有 HttpOnly 属性的 Cookie。

不过严格来说，这种方式不是防御XSS，而是在用户被XSS攻击之后，不被获取Cookie数据。

#### 2.2 输入检查 ####

对于用户的任何输入要进行编码、解码和过滤：

*  编码：不能对用户输入的内容都保持原样，对用户输入的数据进行字符实体编码转义
 *  解码：原样显示内容的时候必须解码，不然显示不到内容了
 *  过滤：把输入的一些不合法的东西都过滤掉，从而保证安全性。如移除用户上传的DOM属性，如onerror，移除用户上传的Style节点、iframe、script节点等

#### 2.3 输出检查 ####

如果用户的输入存在问题，那服务端的输出也会存在问题。一般来说，除富文本的输出外，在变量输出到 HTML 页面时，可以使用编码或转义的方式来防御 XSS 攻击。例如利用 `sanitize-html` 对输出内容进行有规则的过滤之后再输出到页面中。

### 3. 什么是CSRF ？ ###

#### 3.1 概念 ####

CSRF，即 Cross Site Request Forgery，是指**跨站请求伪造**，是一种劫持受信任用户向服务器发送非预期请求的攻击方式。

与XSS不同，XSS攻击是向受攻击网站进行脚本注入攻击，而CSRF攻击是其他网站对受攻击网站进行伪造请求。

#### 3.2 攻击方式 ####

CSRF 攻击是借助被攻击者的 Cookie 骗取服务器的信任，以被攻击者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作。

### 4. 如何防御CSRF？ ###

#### 4.1 验证码 ####

由于CSRF攻击伪造请求不会经过受攻击的网站，所以我们可以在网站加入验证码，这样必须通过验证码之后才能进行请求，有效的遏制了CSRF请求。

但是，这种方式不是万能的，并不是每个请求都加验证码，那样用户体验会非常不好，只能在部分请求添加，作为一种辅助的防御手段。

#### 4.2 验证Referer ####

在HTTP协议中，头部有个Referer字段，他记录了该HTTP请求的来源地址，在服务端设置该字段的检验，通过检查该字段，就可以知道该请求是否合法。

#### 4.3 cookie设置sameSite ####

cookies设置sameSite属性的值为strict，这样只有同源网站的请求才会带上cookie。这样cookies就不能被其他域名网站使用，达到了防御的目的。

#### 4.4 添加token验证 ####

这是一种相对成熟的解决方案。要抵御 CSRF，关键在于在请求中放入攻击者所不能伪造的信息，并且该信息不存在于 Cookie 之中。在服务端随机生成token，在 HTTP 请求中以参数的形式加入这个 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求。

token会保存在服务端session中，同时保存到客户端中。在客户端中通常存储在LocalStorage中，在Vue框架中，我们还可以将token存放在Vuex的state中。