Web前端安全问题：XSS攻击、CSRF攻击、点击劫持

小灰灰 2022-01-31 00:31 532阅读 0赞

### 文章目录 ###

*   *   *  前端有哪些攻击方式？
         *   *  1. XSS攻击
             *   *  XSS 本质原理
                 *  XSS分类
                 *  防御 XSS 攻击
                 *  如何去检测XSS攻击，怎么知道自己的页面是否存在XSS漏洞？
             *  2. CSRF
             *   *  典型的CSRF攻击流程：
                 *  CSRF的特点
                 *  如何防范CSRF攻击?
             *  3. 点击劫持
             *   *  典型点击劫持攻击流程

--------------------

**[【面试篇】寒冬求职之你必须要懂的Web安全][Web]**

--------------------

### 前端有哪些攻击方式？ ###

XSS攻击、CSRF攻击、点击劫持

#### 1. XSS攻击 ####

XSS(Cross-Site Scripting，跨站脚本攻击)是一种代码注入攻击。攻击者在目标网站上注入恶意代码，当被攻击者登陆网站时就会执行这些恶意代码，这些脚本可以读取 cookie，session tokens，或者其它敏感的网站信息，对用户进行钓鱼欺诈，甚至发起蠕虫攻击等。

##### XSS 本质原理 #####

**XSS 的本质原理是：** 恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。由于直接在用户的终端执行，恶意代码能够直接获取用户的信息，利用这些信息冒充用户向网站发起攻击者定义的请求。  
攻击者向有 XSS 漏洞的网站中输入恶意的 HTML 代码，当其它用户浏览该网站时候，该段 HTML 代码会自动执行，从而达到攻击的目的，如盗取用户的 Cookie，破坏页面结构，重定向到其它网站等。

##### XSS分类 #####

根据攻击的来源，XSS攻击可以分为**存储型(持久性)**、**反射型(非持久型)** 和 **DOM型**三种。

##### 防御 XSS 攻击 #####

防御 XSS 攻击最简单直接的方法就是过滤用户的输入。

1.  如果不需要用户输入 HTML，可以直接对用户的输入进行 HTML 转义
2.  当用户需要输入 HTML 代码时：更好的方法可能是，将用户的输入使用 HTML 解析库进行解析，获取其中的数据。然后根据用户原有的标签属性，重新构建 HTML 元素树。构建的过程中，所有的标签、属性都只从白名单中拿取。

##### 如何去检测XSS攻击，怎么知道自己的页面是否存在XSS漏洞？ #####

1.使用通用 XSS 攻击字串手动检测 XSS 漏洞  
2.使用第三方工具进行扫描：

*  Arachni
 *  Mozilla HTTP Observatory
 *  w3af

--------------------

#### 2. CSRF ####

CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。  
CSRF 可以简单理解为：攻击者盗用了你的身份，以你的名义发送恶意请求，容易造成个人隐私泄露以及财产安全。

##### 典型的CSRF攻击流程： #####

![典型的CSRF攻击流程][CSRF]  
受害者登录A站点，并保留了登录凭证（Cookie）。  
攻击者诱导受害者访问了站点B。  
站点B向站点A发送了一个请求，浏览器会默认携带站点A的Cookie信息。  
站点A接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是无辜的受害者发送的请求。  
站点A以受害者的名义执行了站点B的请求。  
攻击完成，攻击者在受害者不知情的情况下，冒充受害者完成了攻击。

##### CSRF的特点 #####

1.攻击通常在第三方网站发起，如图上的站点B，站点A无法防止攻击发生。  
2.攻击利用受害者在被攻击网站的登录凭证，冒充受害者提交操作；并不会去获取cookie信息(cookie有同源策略)  
3.跨站请求可以用各种方式：图片URL、超链接、CORS、Form提交等等(来源不明的链接，不要点击)

##### 如何防范CSRF攻击? #####

过滤用户输入的内容不能阻挡 CSRF 攻击，我们需要做的事过滤请求的来源，因为有些请求是合法，有些是非法的，所以 CSRF 防御主要是过滤那些非法伪造的请求来源。

关键操作只接受 POST 请求

1.  添加验证码(体验不好)
2.  判断请求的来源：检测Referer(并不安全，Referer可以被更改)
3.  使用Token(主流)

> CSRF攻击之所以能够成功，是因为服务器误把攻击者发送的请求当成了用户自己的请求。那么我们可以要求所有的用户请求都携带一个CSRF攻击者无法获取到的Token。服务器通过校验请求是否携带正确的Token，来把正常的请求和攻击的请求区分开。跟验证码类似，只是用户无感知。
> 
>  *  服务端给用户生成一个token，加密后传递给用户
>  *  用户在提交请求时，需要携带这个token
>  *  服务端验证token是否正确

1.  Samesite Cookie属性

#### 3. 点击劫持 ####

点击劫持是指在一个Web页面中隐藏了一个透明的iframe，用外层假页面诱导用户点击，实际上是在隐藏的frame上触发了点击事件进行一些用户不知情的操作。

##### 典型点击劫持攻击流程 #####

攻击者构建了一个非常有吸引力的网页  
将被攻击的页面放置在当前页面的 iframe 中  
使用样式将 iframe 叠加到非常有吸引力内容的上方  
将iframe设置为100%透明  
你被诱导点击了网页内容，你以为你点击的是\*\*\*，而实际上，你成功被攻击了。

[Web]: https://juejin.im/post/5cd6ad7a51882568d3670a8e
[CSRF]: /images/20220131/e86bdb8963ad4c61b54e51ada92992fc.png