一个HTML标签引起出微信重大的BUG

• 做者：陈大鱼头
• github： KRISACHAN

做为一枚技术公众号运营者，写文章，发文章都是平常操做了，但在一第二天常的发文中却意外地发现了微信公众号的重大BUG，这到底是怎么回事呢？

在9月3日当天，鱼头我发了一篇名为《个人<input />不可能这么可爱》的技术文章，原本觉得是常规发文，结果有人给我反馈，当点击留言进入公众号文章留言模块的时候，会有BUG：

我愣了1,2,3秒。。。心想：“咦，不对，这不是把 <input />” 给宣传成dom了吗？

结果有了

而后就在群里说了这事，知道的胖友们都纷纷行动起来去作测试。。。

而后有了如下的测试流程：

1. 在公众号上发布一篇标题带有 <input onfocus="alert('1')"> 的文章；
2. 若是标题没有被转义，则用户打开文章以后，在留言界面会发现标题渲染成HTML；
3. 用户点击输入框则会执行上面的代码。

如下是复现漏洞的视频

视频连接

素材来自公众号「前端真好玩」

如今咱们来分析下这个BUG产生的缘由

首先标题中带有 <input onfocus="alert('1')"> ，网页若是不作转义处理，则会渲染成HTML。

在文章详情页中没有这个问题，就说明在文章页里开发者是作了转义的，可是在留言页面里却出现了这个问题，说明开发者在这里并无作标题的转义。

虽然这个问题触发条件比较艰难（基本只有开发者才懂），可是对于微信这种，亿级日活的产品，出现这种低级的安全问题，确实没想到。

咱们把这种安全问题称之为XSS攻击。

根据攻击源，咱们能够将XSS攻击分为三类：

• 反射型
• 存储型
• DOM 型

在这个场景中咱们遇到的是存储型 XSS 攻击。

此类攻击是攻击者将恶意代码提交至服务器并保存在数据库中，用户访问该页面触发攻击行为。

这种类型的攻击常见于保存用户编辑数据的场景下，好比案例中的发表文章，亦或者评论场景等等。

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

const 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
}
escape('<script>alert("hello world")</script>') // "&lt;script&gt;alert(&quto;hello world&quto;)&lt;&#x2F;script&gt;"
可是在显示富文本的场景下其实不能把全部的内容都转义了，由于这样会把须要的格式也过滤掉。对于这种状况，一般考虑采用白名单过滤的办法。
复制代码

// 使用 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能被正常转义。
复制代码

而后鱼头心想，除了 <input /> 标签，是否是别的标签也能够呢？例如 <script></script>

而后我就找了个也有公众号的朋友来帮我测试。可是这位朋友....

以迅雷不及掩耳之势给反馈到了微信那边。。。

而后微信那边也是以迅雷不及掩耳之势在当天就把这个BUG给解决了。

虽然以为有点惋惜，还想再多作点测试。可是这毕竟是个漏掉，并且是很严重的那种，若是被别有用心的人来钻空子，进行XSS攻击（虽然不必定能攻击），那么对微信，对微信用户来讲也很容易就会形成损失。

虽然在开发的过程当中，有BUG是很正常的，可是仍是但愿BUG能减小一些，尤为是有很是庞大用户群的应用，更是如此。

各位在平常开发中有没有遇到或者听到过什么让你印象深入的BUG呢？有的话不妨在下方留言区域留言讨论。

若是你、喜欢探讨技术，或者对本文有任何的意见或建议，你能够扫描下方二维码，关注微信公众号“ 鱼头的Web海洋”，随时与鱼头互动。欢迎！衷心但愿能够碰见你。