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

Web开发安全

在web开发中，安全是非常重要的一环，如果不注意，用户信息，数据库权限等一些对企业、用户产生威胁将会掌握在不法分子的手中。我们需要不断地学习，发现代码的漏洞，与黑客斗智斗勇。这是一个你追我赶的过程。

XSS原理

XSS主要利用了盲目信任用户提交的内容，且将内容直接挂载到DOM中。在提交的内容中提交<script>标签的脚本。

XSS的特点

很能从UI上感知，因为它是在暗地里执行脚本。
窃取用户信息，比如 token、cookie等。
绘制UI，比如弹窗、frame等，让用户以为是官方表单或者UI，使得用户填写一些信息。

XSS代码示例demo

原代码：

public async submit(ctx){
     const {content,id}=ctx.request.body;
     //未对content进行过滤
     await db.save({
      content,
      id
     });
  }
  
public async render(ctx){
    const{ccontent}=await db.query({
        id:ctx.query.id
       });
    }
    // 没有过滤，直接上DOM
    ctx.body=`<div>${content}</div>`;

我们提交恶意脚本：

// 提交数据
fetch("/submit",{
        body:JSON.stringfy({
            id:"1"
            content:`<script>alert("注入xss代码弹窗")</script>`
            });
        });

我们body中就是会出现这样的代码：


ctx.body=`
    <div>
    //这样就被注入了xss <script>代码
    <script>alert("注入xss代码弹窗")</script>
    </div>`

Stored XSS

特点：

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

就像这个世界多了一个和你共享的人，无论是对用户还是企业，都会产生非常大的危害。

Reflected Xss

特点：

不涉及数据库
直接在URL上攻击（很不幸，本人电脑中招了）

Reflected XSS代码示例

public async render(ctx){
  // query获取url
    const {param}=ctx.query;
    ctx.status=200;
    // 直接上DOM
    xtx.body=`<div>${param}</div>`}

DOM-based XSS

特点：

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

这样达到了和Reflected XSS一样的效果，但是它们的攻击路径是有区别的。Reflected XSS是通过服务器将恶意脚本传到浏览器上的，而DOM-based XSS是恶意脚本与浏览器形成了一个闭环。

Web开发安全-攻击篇XSS | 青训营笔记