Web 开发的安全之旅（攻击篇）｜青训营笔记这是我参与「第五届青训营」笔记创作活动的第8天一、本堂课重点内容：

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

一、本堂课重点内容：

两个角度看web安全：

假如你是一个hacker -- 攻击

二、详细知识点介绍：

2.1 攻击篇

XSS攻击

XSS攻击即跨站脚本攻击，主要攻击方式是攻击者想方设法的把恶意的脚本语言放进开发者开发的页面中。这种方式主要利用的是1.盲目的新人用户提交的内容

2.直接利用字符串去生成dom结构

xss的特点：

很难从UI上去进行感知，往往是暗地里去执行脚本
窃取用户的信息（存储在cookie/token）
绘制UI，例如弹窗，诱骗用户去执行点击或者填写表单的操作

存储型XSS

存储型XSS有以下几个特点

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

反射型XSS

特点：

不涉及数据库
从URL上攻击

基于DOM的XSS

特点：

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

基于mutation的XSS

特点：

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

CSRF攻击 CSRF攻击，即跨站伪造请求攻击，实际上就是用户不知情的情况下，利用用户的权限，伪造用户请求来窃取或者修改用户的敏感信息

注入（inject）攻击

三、实践练习例子：

3.1 XSS攻击的demo

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>`
}



// 攻击者在content中做一些操作
//提交的时候
fetch("/submit",{
    body:JSON.stringfy({
        id:"1",
        content:`<script>alert("XSS");</script>`
    })
})

//读取
ctx.body = `
    <div>
        <script>alert("XSS");</script>
    </div>
`