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

一、Web 开发安全 - 攻击篇

1. Web 安全一窥

Web安全问题“很常见”，会危害

用户
公司
程序员（祭天->丢工作）

Web安全案例

image (96).png

image (97).png

2. 两个角度看Web安全

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

3. Cross-Site Scripting(XSS)

XSS是什么

跨站脚本攻击：恶意脚本注入

image (98).png

XSS主要利用了

对于开发者，盲目信任用户的提交内容
对于前端工程师，盲目将用户提交的字符串转换为DOM
- document.write
- element .innerHTML = anyString;
- SSR(user_data) // 伪代码

image (99).png

XSS 的一些特点

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

XSS demo

提交和渲染时没有对content进行过滤

image - 2023-02-08T233227.477.png

可以直接提交恶意脚本

image - 2023-02-08T233356.445.png

image - 2023-02-08T233359.422.png

XSS的分类

Stored XSS
- 恶意脚本被存在数据库中
- 访问页面 → 读数据 === 被攻击
- 危害最大，对全部用户可见

image - 2023-02-08T235808.170.png

Reflected XSS
- 不涉及数据库
- 从URL上攻击
- Reflected XSS Demo

image - 2023-02-09T135531.411.png

image - 2023-02-09T135535.550.png

DOM-based XSS
- 不需要服务器的参与
- 恶意攻击的发起＋执行，全在浏览器完成
- DOM-based XSS Demo（相同的URL）

image - 2023-02-09T135645.044.png

image - 2023-02-09T135649.706.png

Reflected vs DOM-based
- 区别在于：完成注入脚本的地方

image - 2023-02-09T135806.336.png

Mutation-based XSS
- 利用了浏览器渲染DOM的特性（独特优化)
- 不同浏览器，会有区别(按浏览器进行攻击)
- demo

image - 2023-02-09T135936.486.png

image - 2023-02-09T135945.384.png

4. Cross-site request forgery(CSRF)

CSRF是什么

跨站伪造请求：

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

image - 2023-02-09T140403.087.png

常见CSRF

CSRF——GET

image - 2023-02-09T141342.971.png

image - 2023-02-09T141347.694.png

CSRF——beyond GET

image - 2023-02-09T141422.175.png

5. lnjection

注入式攻击

SQL Injection

image - 2023-02-09T141828.310.png

Injection demo 1
- ①读取请求字段
- ②直接以字符串的形式拼接SQL语句

image - 2023-02-09T141857.462.png

image - 2023-02-09T142044.766.png

image - 2023-02-09T142051.282.png

达成->被动删库跑路成就

Injection不止于SQL

CLl
OS command
Server-Side Request Forgery(SSRF)，服务端伪造请求
- 严格而言，SSRF不是 injection，但是原理类似
lnjection demo 2——执行

image - 2023-02-09T142552.335.png

image - 2023-02-09T142554.685.png

image - 2023-02-09T142403.987.png

Injection demo 2——读取＋修改
- ①流量转发到真实第三方
- ②第三方扛不住新增流量
- ③第三方服务挂掉
- ④🔈：您的竞争对手已下线

image - 2023-02-09T142801.336.png

image - 2023-02-09T142804.879.png

SSRF demo
- ①请求【用户自定义】的callback URL
- ②web server 通常有内网访问权限

image - 2023-02-09T142956.603.png

6. Denial of Service(Dos)

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

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

重复匹配时「?」 vs 「no ?」：满足”一个“即可 vs 尽量多

image - 2023-02-09T143330.285.png

ReDoS：基于正则表达式的DoS

贪婪：n次不行？ n -1次再试试？——回溯

image - 2023-02-09T143525.900.png

会导致服务器响应时间大大延长，接口吞吐量大大下降

Logical DoS

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

image - 2023-02-09T144408.741.png

Distributed DoS(DDoS)

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

『不搞复杂的，量大就完事儿了』

DDoS的攻击特点
- 直接访问IP
- 任意 API
- 消耗大量带宽（耗尽)
DDoS demo
- SYN Flood 洪水攻击

image - 2023-02-09T144731.778.png

7. 传输层

中间人攻击利用了

①明文传输
②信息篡改不可知
③对方身份未验证

image - 2023-02-09T145904.138.png

二、Web 开发安全 - 防御篇

1. XSS

永远不信任用户的提交内容
不要将用户提交内容直接转换成 DOM

image - 2023-02-09T150153.754.png

XSS——现成工具

前端
- 主流框架默认防御 XSS
- google-closure-library
服务端(Node)
- DOMPurify

XSS——耗子尾汁

【用户需求】不讲武德，必须动态生成DOM
方法有：
- string -> DOM
- 上传svg
- Blob 动态生成script
- 自定义跳转链接
- 自定义样式

2. Content Security Policy(CSP)

插播：Same-origin Policy 同源策略

HTTP 请求：同源允许，跨域拒绝 ===> 看服务器的配置

image - 2023-02-09T150643.866.png

Content Security Policy(CSP)

哪些源（域名)被认为是安全的
来自安全源的脚本可以执行，否则直接抛错
对 eval + inline script 抛错拒绝

image - 2023-02-09T150825.909.png

CSP demo
- 服务器的响应头部
- 浏览器meta

3. CSRF的防御

image - 2023-02-09T150951.024.png

CSRF——token

💡先有页面，后有请求
CSRF——token的实现
- ①用户绑定🤔：攻击者也可以是注册用户 === 可以获取自己的 token
- ②过期时间：【前向保密】

CSRF——iframe攻击

绕过源限制的攻击

一个demo：
	https://codesandbox.io/s/boring-ptolemy-4rjy6?file=/src/App.js

CSRF anti-pattern

GET !== GET + POST

避免用户信息被携带：SameSite Cookie

image - 2023-02-09T153221.600.png

SameSite Cookie限制的是：
- ①Cookie domain
- ②页面域名
SameSite Cookie 依赖Cookie的第三方服务怎么办?
- 内嵌一个X站播放器，识别不了用户登录态，发不了弹幕🙃🙃

SameSite vs CORS

image - 2023-02-09T154131.786.png

SameSite demo

FirstPartyCookie：
	https://csb-7kweu-liuyuchenzh.vercel.app/
3PartyCookie：
	https://csb-mnlu0-liuyuchenzh.vercel.app/

image - 2023-02-09T154207.021.png

SameSite Cookie

image - 2023-02-09T154729.049.png

首次导航的限制🤔：避免敏感操作跳过二次确认，例如【重置密码】的🔗 ⚠：Lax首次导航🆗

image - 2023-02-09T154734.876.png

防御CSRF的正确姿势

Case by case防御？🙅‍♂️

4. Injection的防御

找到项目中查询SQL的地方
使用prepared statement

lnjection beyond SQL

最小权限原则
- 不要执行或授权 sudo ll root
建立允许名单＋过滤
- 拒绝 rm
对URL类型参数进行协议、域名、ip等限制
- 避免能访问内网

5. 防御 DoS

Regex Dos

完善Code Review工作，避免写出贪婪匹配方式
代码扫描＋正则性能测试
拒绝使用用户提供的使用正则

Logical DoS

image - 2023-02-09T213715.633.png

DDoS

过滤：
- 在流量治理层中，对负载均衡、API网关进行流量识别和过滤
抗量：
- 前置CDN，所以流量都需经过CDN
- 流量激增时，快速自动扩容
- 对非核心服务进行降级关闭

6. 传输层——防御中间人

image - 2023-02-09T215733.818.png

HTTPS 的一些特性

可靠性：加密
- 避免明文传输
完整性：MAC验证
- 确保信息不被篡改
不可抵赖性：数字签名
- 确保双方身份可被信任

TLS 1.2的大致流程

image - 2023-02-09T222700.535.png

HTTPS——完整性

image - 2023-02-09T222820.079.png

插播：数字签名

image - 2023-02-09T222919.960.png

HTTPS——不可抵赖：数字签名

CA: Certificate Authority 证书机构 ---> 完成签名工作
数字签名在HTTPS 中的工作
浏览器会内置大量CA证书
HTTPS——证书 demo
成也证书，败也证书
- 当签名算法不够健壮时，可能会有证书造假

HTTP Strict -Transport-Security (HSTS)

将HTTP主动升级到HTTPS

Subresource lntegrity (SRI)

静态资源被劫持篡改怎么办？
- 对比hash
SRI——demo
- 标签hash (原始内容hash) vs 实际内容 hash

补充内容

Feature Policy/erwission Policy
- 一个源(页面)下，可以使用哪些功能
- camera
- microphone
- autoplay
- ...

尾声

npm install除了带来了黑洞，还可以带来漏洞

安全无小事
使用的依赖(npm package，甚至是NodeJS）可能成为最薄弱的一环
- left- pad事件（npm Blog Archive: kik, left-pad, and npm (npmjs.org)）
- eslint-scope事件（Postmortem for Malicious Packages Published on July 12th, 2018 - ESLint - Pluggable JavaScript Linter）
- event-stream事件（npm Blog Archive: Details about the event-stream incident (npmjs.org)）
保持学习心态

推荐读物

三、总结

在网络时代下，Web 安全随处可见并且危害极大，维护 Web 安全工作是重中之重。通过本节课的学习，先从Web开发安全的攻击者视角出发，了解了危害Web安全的几类技术手段及其攻击原理，从而为防御对应攻击手段采取有针对性的措施。总之，要高度重视Web安全防护。

Web开发安全 | 青训营笔记