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

本堂课主要内容

• Web的安全
• Web的攻击篇
• Web的防御篇

Web安全一窥

• 安全问题很“很常见”，会危害
  • 用户
  • 公司
  • 程序员(祭天)

攻击篇

Cross-Site Scripting(XSS)

<script>alert('xss');</script>

XSS 跨站脚本攻击跨 在我们的开发维护的页面攻击者通过一种方式把恶意脚本注入进来

• XSS主要利用了我们盲目信息用户提交的内容

XSS的一些特点

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

Stored XSS

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

Reflected XSS

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

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

public async render(ctx) {
    const { param } = ctx.query
    ctx.status = 200
    ctx.body = `<div>${param}</div>`
}

DOM-based XSS

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

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

const content = new URL(location.href).searchParams.get('param')
cosnt div = document.createElement('div')
//恶意脚本注入
div.innerHTML = content
document.body.append(div)

Mutation-based XSS

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

Injection

• SQL injection
• 请求SQL参数(恶意注入)
• 参数 -> SQL -> 运行SQL code
• 获取其他数据 修改数据 删除数据...

防御篇

XSS

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

XSS现成工具

• 前端
  • 前端框架React、Vue
  • Google-closure-library
• 服务端(Node)
  • DOMPurify

Content Security Policy(CSP)

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