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

XSS

Cross-Site Scripting(XSS)

XSS主要利用了

盲目信任用户提交的内容
直接把用户提交的字符串转换成DOM

XSS的一些特点

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

XSS demo

下面是两个服务端接口，分别是submit接口和render接口。在submit接口中，用户将他所写的内容提交到服务端，服务端提取content和id字段存储到数据库中。在render接口中，服务器从数据库中提取content字段，并返回给客户端，用于生成HTML。无论是读数据接口，还是写数据接口都没有对用户提交的内容进行过滤。

public async submit(ctx) {
    const { content, id } = ctx.request.body;
    //没有对content 过滤
    await db.save( {
        content,
        id
    });
}

public async render(ctx) {
    const { content } = await db.query({
        id: ctx.query.id
    });
    //没有对content 过滤
    ctx.body = <div>${content}</div>;
}

XSS 分类

Stored XSS

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

Stored XSS.png

Reflected XSS

不涉及数据库
从URL上攻击

DOM-based XSS

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

Reflected vs DOM-based

完成注入脚本的地方

Reflected vs DOM-based.png

Mutation-based XSS

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

CSRF

Cross-site request forgery(CSRF)

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

CSRF demo

用户没有访问银行页面
银行页面中的特定接口被请求
请求执行成功

CSRF deom.png

CSRF -- GET

<a href="https: //bank.com/transfer?to=hacker&amount=100">点我抽奖</a>
<!--确实中奖了-->

<img style="display:none;" src="https://bank.com/transfer?to=hacker&amount=100"/>