1 前言

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

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

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

2 CSRF

一般问：

CSRF的基本概念、缩写、全称
攻击原理
防御措施

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

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

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

PS：中文、英文名都一定要记住。

2.2 CSRF的攻击原理

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

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

登录受信任网站A，并在本地生成Cookie。（如果用户没有登录网站A，那么网站B在诱导的时候，请求网站A的api接口时，会提示你登录）
在不登出A的情况下，访问危险网站B（其实是利用了网站A的漏洞）。

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

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

2.3 CSRF如何防御

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

服务器发送给客户端一个token；
客户端提交的表单中带着这个token。
如果这个 token 不合法，那么服务器拒绝这个请求。

方法二：隐藏令牌：

把 token 隐藏在 http 的 head头中。

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

方法三、Referer 验证：

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

3 XSS

3.1 XSS的基本概念

`XSS（Cross Site Scripting）``：跨站脚本攻击。

前置知识：HTTP、Cookie、Ajax

3.2 XSS的攻击原理

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

最后导致的结果可能是：

盗用Cookie
破坏页面的正常结构，插入广告等恶意内容
D-doss攻击

3.3 XSS的攻击方式

1. 存储型

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

存储型 XSS 的攻击步骤：

攻击者将恶意代码提交到目标网站的数据库中。
用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。
用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

这种攻击常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等。

2. 反射型

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

反射型 XSS 的攻击步骤：

攻击者构造出特殊的 URL，其中包含恶意代码。
用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。
用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

反射型 XSS 漏洞常见于通过 URL 传递参数的功能，如网站搜索、跳转等。由于需要用户主动打开恶意的 URL 才能生效，攻击者往往会结合多种手段诱导用户点击。

3. DOM 型

DOM 型 XSS 的攻击步骤：

攻击者构造出特殊的 URL，其中包含恶意代码。
用户打开带有恶意代码的 URL。
用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行。
恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。

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

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

1. 编码：

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

encodeURIComponent('132')

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

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

比如说这段代码：encodeURIComponent('132')

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

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

2、过滤：

移除用户输入的和事件相关的属性。如onerror可以自动触发攻击，还有onclick等。（总而言是，过滤掉一些不安全的内容）
移除用户输入的Style节点、Script节点、Iframe节点。（尤其是Script节点，它可是支持跨域的呀，一定要移除）。

3、校正

避免直接对HTML Entity进行解码。
使用DOM Parse转换，校正不配对的DOM标签。

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

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

还有一种简洁的答案：

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

4、减少漏洞的产生

虽然很难通过技术手段完全避免 XSS，但我们可以总结以下原则：

利用模板引擎 开启模板引擎自带的 HTML 转义功能。例如：在 ejs 中，尽量使用 <%= data %> 而不是 <%- data %>；在 doT.js 中，尽量使用 {{! data } 而不是 {{= data }；在 FreeMarker 中，确保引擎版本高于 2.3.24，并且选择正确的 freemarker.core.OutputFormat。
避免内联事件 尽量不要使用 onLoad="onload('{{data}}')"、onClick="go('{{action}}')" 这种拼接内联事件的写法。在 JavaScript 中通过 .addEventlistener() 事件绑定会更安全。
避免拼接 HTML 前端采用拼接 HTML 的方法比较危险，如果框架允许，使用 createElement、setAttribute 之类的方法实现。或者采用比较成熟的渲染框架，如 Vue/React 等。
时刻保持警惕 在插入位置为 DOM 属性、链接等位置时，要打起精神，严加防范。
增加攻击难度，降低攻击后果 通过 CSP、输入长度配置、接口安全措施等方法，增加攻击的难度，降低攻击的后果。
主动检测和发现 可使用 XSS 攻击字符串和自动扫描工具寻找潜在的 XSS 漏洞。

4 CSRF 和 XSS 的区别

区别一：

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

区别二：（原理的区别）

CSRF：是利用网站A本身的漏洞，去请求网站A的api。
XSS：是向网站 A 注入 JS代码，然后执行 JS 里的代码，篡改网站A的内容。

参考链接

juejin.cn/post/684490…

（备忘录）前端网络