微信公众号爆出前端安全漏洞

昨日在公众号中挖掘到了一个 XSS 安全漏洞，具体复现流程以下：

1. 发一篇公众号文章，标题中包含 <input onfocus="alert('1')">
2. 用户打开文章后，在写留言页面中会发现标题没有被转义，正常被渲染成了 HTML
3. 用户点击被渲染出来的输入框后执行代码

如下是复现漏洞的视频

视频连接

若是视频又打不开了，能够去我公众号的文章里看。

如今咱们来分析下这个漏洞的产生过程。

首先标题中存在 HTML <input onfocus="alert('1')">，在网页中若是不对这部分文本作转义的话，就会正常渲染为 HTML。

在文章详情中其实咱们并无发现这个问题，也就说明了在该页面中开发者是作了文本转义的。

可是在留言页面中却出现了该问题，也就是说开发者并无作标题的转义，所以致使了这个问题的发生。

虽然这个问题触发条件不是那么容易，可是对于微信这样亿级日活的产品出现这样低级的安全问题实属没想到。

咱们把这样的安全问题称之为 XSS 攻击。根据攻击的来源，咱们能够将此类攻击分为三种，分别为：

• 反射型
• 存储型
• DOM 型

在这个案例中咱们遇到的是存储型 XSS 攻击。此类攻击是攻击者将恶意代码提交至服务器并保存在数据库中，用户访问该页面触发攻击行为。这种类型的攻击常见于保存用户编辑数据的场景下，好比案例中的发表文章，亦或者评论场景等等。

防范存储型 XSS 攻击的策略就是不相信一切用户提交的信息，好比说用户的评论、发表的文章等等。对于这些信息一概进行字符串转义，主要是引号、尖括号、斜杠

function escape(str) {
  str = str.replace(/&/g, '&')
  str = str.replace(/</g, '&lt;')
  str = str.replace(/>/g, '&gt;')
  str = str.replace(/"/g, '&quto;')
  str = str.replace(/'/g, '&#39;')
  str = str.replace(/`/g, '&#96;')
  str = str.replace(/\//g, '&#x2F;')
  return str
}
// "&lt;script&gt;alert(1)&lt;&#x2F;script&gt;"
escape('<script>alert(1)</script>')
复制代码

可是在显示富文本的场景下其实不能把全部的内容都转义了，由于这样会把须要的格式也过滤掉。对于这种状况，一般考虑采用白名单过滤的办法。

// 使用 js-xss 开源项目
const xss = require('xss')
let html = xss('<h1 id="title">XSS</h1><script>alert("xss");</script>')
// -> <h1>XSS</h1>&lt;script&gt;alert("xss");&lt;/script&gt;
console.log(html)
复制代码

在白名单的状况下，h1 标签不会被转义，可是 script 能被正常转义。

最后

安全无小事，你们在作项目的时候应该时刻关注在相似场景下的可能出现的安全问题。

以为内容有帮助能够关注下个人公众号 「前端真好玩」咯，按期分享如下主题内容：

• 前端小知识、冷知识
• 原理内容
• 提高工做效率
• 我的成长