这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天 在开发中，安全问题是不可忽视的。我们可以从两个角度看待web安全

• 假如你是一个hacker————攻击
• 假如你是一个开发者————防御

这篇文章将从攻击角度来介绍前端范畴内常见的安全问题，包括 XSS、CSRF、SQL 注入、DOS 等。

XSS——跨站脚本攻击

XSS就是通过在网站中插入恶意脚本进行攻击

XSS主要利用了：

• 开发者盲目的信任用户提交的内容
• 开发者直接将用户提交的字符串转换成了DOM,例如：
  • document.write
  • element.innerHTML=anyString
  • SSR(user_data)

XSS的一些特点：

• 通常难以从UI上感知（暗地执行脚本）
• 窃取用户信息（cookie/token）
• 绘制UI（例如弹窗），诱骗用户点击/填写表单

由于没有过滤，所以攻击者可以直接提交恶意脚本

fetch("/submit",{
body:JSON.stringify({
id:"1",
content:`<script>alert("XSS")</script>`

content内容可以直接插入ctx.body中

常见的XSS攻击方式

存储型XSS(Stored)

反射型XSS(Reflected)

• 不涉及数据库
• 从URL上攻击

基于DOM的XSS攻击（DOM-based）

• 不需要服务器的参与
• 恶意攻击的发起 + 执行，都是在浏览器完成的

反射型和DOM型的区别：

• 反射型：由服务器解析参数，放入响应体中，完成注入
• DOM型：完全由浏览器完成整个注入过程

Mutation-based XSS

• 利用了浏览器渲染DOM的特性（独特优化）
• 不同浏览器，会有区别（按浏览器进行攻击）

CSRF——跨站请求伪造

• 在用户不知情的前提下，利用用户权限（cookie），构造指定HTTP请求，窃取或修改用户敏感信息

用户收到一封邮件，邮件里有一个链接。当用户点击链接会进入一个恶意页面，用户在浏览恶意页面时，攻击者可以偷偷拿到用户信息，比如说用户的cookie。攻击者可以携带用户的cookie去请求银行转账的接口，而因为有cookie，那么服务器A将会认为这是合法的用户请求。

CSRF最常见的就是GET方式：

攻击者把链接放在a标签或者img标签中，a标签需要用户主动点击触发，而img标签进入页面自动就会触发

CSRF也可以有其他的方式：

Injection————注入攻击

SQL注入

• （SQL Injection）是一种常见的Web安全漏洞，主要形成的原因是在数据交互中，前端的数据传入到后台处理时，没有做严格的判断，导致其传入的“数据”拼接到SQL语句中后，被当作SQL语句的一部分执行。 从而导致数据库受损（被脱库、被删除、甚至整个服务器权限陷）

一个例子： 读取请求字段，直接以字符串的形式拼接SQL语句

其他注入

cli

一个视频转换的例子，接收用户自定义参数options，进行视频格式转换。

攻击者可以在options中添加如下命令，删除一些文件，直接导致服务器宕机。

OS command

SSRF————服务端伪造请求

严格⽽⾔，SSRF 不是 injection，但是原理类似

DoS

• 通过某种⽅式（构造特定请求），导致服务器资源被显著消耗， 来不及响应更多请求，导致请求挤压，进⽽雪崩效应。

插播：正则表达式————贪婪模式

ReDoS：基于正则表达式的DoS

回溯行为，导致响应时间大大增加，导致接口吞吐量明显降低，响应用户的请求次数大大减少。

Distributed DoS（DDoS）

分布式DoS，最常见的一种DoS攻击

• 短时间内，来⾃⼤量僵⼫设备的请求流量，服务器不能及时完成 全部请求，导致请求堆积，进⽽雪崩效应，⽆法响应新请求

「不搞复杂的，量⼤就完事⼉了」

特点：

• 直接访问IP
• 任意API
• 消耗大量带宽（耗尽）

一个例子：洪水攻击

三次握手时，攻击者发送很多SYN，却不返回第三次ACK，导致大量连接不能得到释放，当达到最大连接数的时候，新请求就无法进来了，一次洪水攻击就完成了。

中间人攻击

为什么中间人攻击会发生呢？

1. 明文传输
2. 信息篡改不可知
3. 对方身份未验证（导致中间人可以存在）