这是我参与「第四届青训营」笔记创作活动的的第九天。 今天学习了《Web开发的安全之旅》，对于一个web安全小白来说，今天的课程实实在在的让我拓展了视野，确实之前没有想到这方面。看来，互联网的各方面还是非常的不安全，所以在网站开发上线时还是要多注意一些防御措施，避免造成不必要的损失。

本堂课重点内容

攻击篇
XSS、CSRF、注入、DoS
防御篇
XSS、CSRF、注入、DoS防御

详细知识点介绍

详细的笔记依旧分享在文章最后，说明，今天的课程笔记总结的一般般，希望不要介意！

课后个人总结

通过学习过基本的web安全的知识之后，发现自己对于网络这块的内容有了学习的兴趣，学好http和https以及在编码时使用各种安全的语法还是很重要的，即使这块在将来以后用的不是很多，而且一般来说前端框架技术都会对一些内容进行处理，但是这种安全意识的提高还是非常重要的。

笔记

Web开发的安全之旅

安全问题 "很常见"，会危害

用户
公司
程序员

一、两个角度看web安全

1、攻击篇

（1）Cross-Site Scripting（XSS）

造成的后果可能是用户的隐私泄露或者用户的电脑可能被当成“挖矿”的机器。

XSS的原理就是利用盲目信任用户的提交内容。

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

XSS分类

① Stored XSS

Stored XSS（存储型）

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

②Reflected XSS

Reflected XSS（反射型）

不涉及数据库
从URL上攻击

例如： host/path/?param=<script>alert('123')</script>

③DOM-based XSS

DOM-based XSS（基于DOM的）

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

例如： 

host/path/?param=<script>alert('123')</script>

const content = new URL(location.href).searchParams.get("param");
const div = document.createElement ("div");
div.innerHTML = content;
document.body.append(div);

实际上，反射性XSS攻击和基于DOM的XSS攻击在基本上很类似，区别只是在于完成注入脚本的地方。

④Mutation-based XSS

Mutation-based XSS（基于Mutation）

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

对于过滤工具来说，下面这段代码是平平无奇的title属性

<noscript><p title="</noscript><img src=x onerror=alert(1)>">

如果在浏览器端进行了DOM渲染，那么这段代码会被渲染成以下代码

<div>
    <noscript><p title="</noscript>
    <img src="x" onerror="alert(1)">
    "">"
</div>

<noscript>标签中的属性不规范，所以会进行一个回调，触发onerror事件，就完成了XSS攻击。

（2）Cross-site request forgery（CSRF）

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

跨站攻击一般用于GET请求，但是不局限于GET请求，攻击者可以构造一个隐藏的POST表单进行数据提交，也是可以进行攻击的。

（3）Injection

①SQL injection（SQL注入）

示例：
    1、读取请求字段
    2、直接以字符串的形式拼接SQL语句

②Other

注入不只是SQL注入，还有一些其他的方法。

CLI
OS command
Server-Side Request Forgery（SSRF，服务端伪造请求），服务端伪造请求（严格来说，SSRF不是注入，但是原理类似）

（4）Denial of Service（DoS）

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

小tips：
    正则表达式 --- 贪婪模式
    重复匹配 '?' 和 'no ?' ：满足 一个即可  和 尽量多

①ReDos：基于正则表达式的DoS

②Distributed Dos（DDoS）

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

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

（5）基于传输层的攻击方式

①中间人攻击

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

2、防御篇

（1）XSS防御

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

现成工具

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

如果必须动态生成DOM，该怎么防御？

1、 string -> DOM
    使用API  new DOMParser();
2、上传svg
    <svg>
        <script>alert(xxs);</script>
    </svg>
    必须要对svg进行一次扫描
3、尽量不要做自定义跳转链接
    <a href="javascript:alert('xss')"></a>
4、用户自定义样式也可导致XSS攻击

（2）Content Security Policy（CSP）

小tips：
    Same-origin Policy 同源策略，简单来说就是HTTP请求同源

Content Security Policy(内容安全策略)

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

（3）CSRF防御

① token方式

除了检测是否同源之外，还可以对token进行一个校验，用来防止CSRF请求。

用户绑定：攻击者也可以是注册用户 === 可以获取自己的token
过期时间：【前向保密】

② iframe攻击

限制Origin，还可以进行同源请求

我们可以通过响应头部 X-Frame-Options: DENY/SAMEORIGIN进行防御。

DENY：当前页面不能通过iframe进行加载
SAMEORIGIN：必须是同源页面才能加载iframe

③避免用户信息被携带

SameSite和CORS的区别：

（4）Injection防御

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

除了SQL注入的防御，下面是一些针对于通用的防御的建议

最小权限原则
建立允许名单 + 过滤
对 URL 类型参数进行协议、域名、ip等限制

（5）防御DoS

①Regex Dos

避免贪婪匹配的正则方式
代码扫描 + 正则性能测试
拒绝使用用户提供的正则

②DDos

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

③传输层 -- 防御中间人

使用HTTPS

可靠性：加密

明文加密 如TLS1.2

完整性：MAC验证

传输内容：加密信息 + 加密信息_hash

不可抵赖性：数字签名

签名执行者：
    privateKey(自己藏好)
    publicKey(公开可见)

④HTTP Strict-Transport-Security（HSTS）

将HTTP主动升级到HTTPS

⑤Subresource Integrity（SRI）

SRI主要是针对防御静态资源被劫持，会对原始内容hash和实际内容的hash进行一个对比，来确定资源的正确性。

3、提示

安全无小事
使用的依赖（npm package，甚至是NodeJS）可能称为最薄弱的一环
保持一个学习的心态

Web开发的安全之旅 ｜ 青训营笔记