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

---

theme: healer-readable

highlight: atelier-cave-light

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

Web开发安全

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

XSS原理

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

XSS的特点

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

XSS代码示例demo

原代码： ```js 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>;

```

我们提交恶意脚本： js // 提交数据 fetch("/submit",{ body:JSON.stringfy({ id:"1" content:`<script>alert("注入xss代码弹窗")</script>` }); }); 我们body中就是会出现这样的代码： ```js

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

Stored XSS

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

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

Reflected Xss

特点： - 不涉及数据库 - 直接在URL上攻击(很不幸，本人电脑中招了)

Reflected XSS代码示例

js 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是恶意脚本与浏览器形成了一个闭环。