第六节 Web开发与安全 | 青训营笔记

Mayonnaise
118 阅读4分钟

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

本文将从两个方面介绍Web开发的安全知识--攻击与防御

一、Web安全之攻击篇

1. Cross-Site Scripting（XSS） 跨站脚本攻击

  • 攻击条件： 开发者直接把用户字符串转化为DOM，没有过滤用户输入。

image.png

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

  • 类型：

    • 存储型 Stored XSS
    • 反射型 Reflected XSS 服务器端从用户请求从读取字段，生成html片段，命中攻击。
    • DOM-based XSS 由浏览器读取参数
    • Mutation-based XSS

Stored XSS

特点：

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

image.png

Reflected XSS

特点：

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

Demo

image.png

DOM-based XSS

特点：

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

Demo： image.png

Reflected XSS 和 DOM-based XSS 的攻击方式其实非常相似，区别在于恶意脚本的注入位置

image.png

Mutation-based XSS

特点：

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

Demo：

image.png

2. Cross-site request forgery（CSRF） 跨站伪造请求

  • 攻击流程

image.png

  • 特点

    • 在用户不知情的前提下
    • 利用用户权限(cookie)
    • 构造指定HTTP请求，窃取或修改用户敏感信息
    • 最常见的CSPF利用GET请求 image.png
    • 也有使用POST请求的CSRF image.png

3. 注入攻击 Injection

类型

  • 最常见 SQL Injection

  • 其他

    • CLI
    • OS command
    • Server-Side Request Forgery（SSRF）

SQL Injection

攻击流程 image.png

demo：

1️⃣

image.png

  • 读取请求字段
  • 直接以字符串的形式拼接SQL语句

2️⃣

修改服务器配置文件，转发大流量攻击。

image.png

Server-Side Request Forgery（SSRF）

SSRF 服务端伪造请求，严格而言，SSRF 不是injection,但是原理类似。

image.png

  • 请求【用户自定义】的 callback URL
  • web server 通常有内网访问权限

4. Denial of Service（Dos）服务拒绝

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

  • 基于正则表达式的 DoS image.png

5. Distributed Dos （DDos）

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

  • 特点：

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

  • 洪水攻击： image.png

6. 中间人攻击

  • 攻击流程 image.png

  • 攻击条件

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

  • 可能的中间人

    • 恶意浏览器
    • 路由器
    • 运营商
    • ...

二、Web安全之防御篇

1. 防御XSS

  • 原则

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

工具

  • 前端

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

  • 服务端(Node)

    • DOMPurify

2. Content Security Policy（CSP） 内容安全策略

  • 策略

    • 限定哪些源（域名)被认为是安全的
    • 来自安全源的脚本可以执行，否则直接抛错
    • 直接限制eval + inline script，不予响应

  • 防御机制 image.png

  • token 除了利用Origin + Referrer，也可以利用token验证

image.png

3. SameSite Cookie

SameSite Cookie 避免用户信息被携带

  • image.png
  • image.png

4. 防御Injection

image.png 针对SQL Injection

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

5. 防御DoS

  • 分析代码中的性能瓶颈
  • 对访问限流
  • 避免写出匹配性能极差的正则表达式
  • 限制用户的正则匹配

6. 防御DDos

image.png

7. 防御中间人

  • 使用HTTPS（HTTP + TLS）

  • HTTPS的特性

    • 可靠性:加密
    • 完整性:MAC验证
    • 不可抵赖性:数字签名

  • TLS（v-1.2）握手过程 image.png

三、总结

Web从诞生至今得到了巨大的发展，但也衍生了许多安全机制问题。作为前端开发者，在关注业务和代码的同时，也应该注意系统和数据的安全性，此次课程初识Web安全知识，涉及的前端和Web攻击方式与防御机制丰富，也可见前端囊括的知识面之广。安全无小事，关注Web安全及其重要，要求我们保持恒久的学习热情，提高多维度高层次的技术能力。

avatar
文章
阅读
粉丝