这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天

今天我和刘老师一起学习了前端安全攻防相关的知识，真的是非常非常的受益匪浅，前端安全问题我学的不是很深，这节课让我对web常见的攻击和防御的手段有了一个新的认识和了解。

一，本节课重点内容

web安全的问题是一个很常见，也是一个很重要的问题。

攻击上

从攻击上,web安全的攻击问题可以分为以下几种:

• XSS
• Stored XSS
• Reflected XSS
• DOM-based XSS
• Mutation-based XSS
• CSRF
• SQL注入
• CLI注入
• OS command注入
• SSRF
• DoS
• ReDos
• Logical DoS
• DDoS
• 中间人攻击

防御上

我们也有一些技术手段来防御web攻击。后面详细内容中会说。

二，详细知识介绍

XSS

xss主要利用了开发者可能会盲目信任用户的输入，一些场景下我们将用户的输入 直接渲染到DOM中去或是其他的一些直接相信用户输入的一些场景，我们这种情况下就可能会受到XSS攻击的影响。

XSS攻击具有如下特点:

• 难以从UI上感知，攻击者注入后在暗中执行脚本
• 可能会趁机窃取用户的信息，比如Cookie和token等等
• 趁机在DOM中注入一些UI，比如绘制一个弹窗，诱骗用户输入敏感信息。

Stored XSS

Stored XSS是将恶意脚本存放在数据库中，这种往往发生在前端过分相信用户的输入，不加以鉴别，后端也缺乏安全机制，导致 Stored XSS流入数据库，这种危害是最大的，访问页面的时候像后端发起请求的时候就会读到被灌入的脚本或者是一些恶意的代码，危害最大,对所有用户有影响。

Reflected XSS

这是一种不通过数据库，从URL上攻击的一种手段

附一张老师图

DOM-baeed XSS

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

Mutation-based XSS

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

这种往往最隐蔽最难以防御

CSRF

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

demo

比如用户在访问一个页面时，攻击者窃取到了其cookie，于是利用窃取到的cookie来向银行的api进行一个带用户cookie的一些请求，比如转账，而银行在看到用户的cookie时误以为是用户在请求转账，于是转账，导致用户在不知情的情况下造成了资金被窃取的情况。

SQL注入

攻击者在请求的时候注入一段恶意攻击的SQL语句，服务器在运行的时候遇到这些恶意注入的SQL的时候会出现数据被获取，修改，删除等等的问题

SSRF

获取内网权限

ReDoS

利用正则表达式的贪婪模式等特性让服务器在短时间内性能大量开销，使接口吞吐量在短时间内增大，响应时间变长。

Logical DoS

• 耗时的同步操作
• 数据库的写入
• SQL join
• 文件备份
• 循环执行逻辑

DDoS

短时间内，来自大量的僵尸设备的请求流量，服务器不能及时完成所有请求，导致请求堆积，造成雪崩效应，无法响应新的请求。

攻击特点

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

中间人攻击

防御上

防止XSS，我们一定不要相信用户的输入，不要直接对用户的输入进行直接转换，最好使用一些其他的方法进行渲染，除非有极其特殊的需求，如果真的有这些需求，我们也要做好甄别和检查，另外，我们也可以使用一些现成的工具:

前端：

• 主流框架默认防御XSS
• goole-closure-library

服务端(Node):

• DOMPurify

另外，我们最好渲染的是string,对svg等信息资源的传递处理上我们也要慎重的加以假别和处理，另外我们也要留心自定义的跳转连接等。

另外我们要注意同源策略（Same-origin Poicy）

• 协议
• 域名
• 端口

进而保证请求的同源，不跨域。

使用CSP

• 哪些域名是安全的
• 来自安全源的脚本可以执行，反之则抛错
• 对eval+inline script说不

CSRF

防御Regex DoS

• 代码扫描
• 正则性能测试
• 不使用用户提供的正则

DDoS

• 流量治理
• 负载均衡
• API网关
• CDN
• 快速自动扩容
• 非核心服务降级

最后我们可以使用Https来加强我们的安全措施。