为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Html/CSS

作为一枚技术公众号运营者,写文章,发文章都是日常操作了,但在一次日常的发文中却意外地发现了微信公众号的重大BUG,这究竟是怎么回事呢?

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

https://img1.sycdn.imooc.com//5da19c600001dff203970700.jpg

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

结果有了

https://img1.sycdn.imooc.com//5da19c700001bddf03990614.jpg

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

然后有了以下的测试流程:

  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, '&amp;')
  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>

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

https://img1.sycdn.imooc.com//5da19cc40001400704720549.jpg

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

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

https://img1.sycdn.imooc.com//5da19ccf0001abb504170412.jpg

虽然觉得有点可惜,还想再多做点测试。但是这毕竟是个漏掉,而且是很严重的那种,如果被别有用心的人来钻空子,进行XSS攻击(虽然不一定能攻击),那么对微信,对微信用户来说也很容易就会造成损失。

虽然在开发的过程中,有BUG是很正常的,但是还是希望BUG能减少一些,尤其是有非常庞大用户群的应用,更是如此。

https://img1.sycdn.imooc.com//5da19cd60001afa303150215.jpg

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



点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
109
获赞与收藏
602

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消