专栏首页脑洞前端一个HTML标签引发出微信重大的BUG

一个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, '&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>

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

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

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

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

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

本文分享自微信公众号 - 脑洞前端(fe_lucifer)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 这几个前端开发奇技淫巧,你都知道吗?

    今天,就简单跟大家分享一下,之前我在 Twitter 和 GitHub 上看到的几个比较有意思的前端开发技巧,希望能给你耳目一新的感觉。

    lucifer210
  • 【leetcode系列】 155.最小栈

    符合直觉的方法是,每次对栈进行修改操作(push和pop)的时候更新最小值。然后getMin只需要返回我们计算的最小值即可, top也是直接返回栈顶元素即可。这...

    lucifer210
  • 229. 求众数 II

    https://leetcode.com/problems/majority-element-ii/description/

    lucifer210
  • 看女程序员是如何处理男友出轨,网友回复更精彩

    你知不知道,普通女生梦见男朋友出轨会血液循环加速,造成内分泌失调,内分泌失调就心情就不好,心情不好就压抑,一压抑就打人……最后的结果都是男朋友被暴打一顿。

    良月柒
  • MIPSsim使用说明

    MIPSsim下载:https://files.cnblogs.com/files/jiangxinnju/MIPSsim.zip

    用户1221057
  • [PHP] 算法-字符串的左循环的PHP实现

    陶士涵
  • 了解java的这些功能可以让你少走很多弯路

    平常工作中的一些现成的方法可以减少我们很多的工作时间,下面只是我总结的一小部分常用的类和方法,我会接着发~

    哲洛不闹
  • 【php性能优化】关于写入文件操作的取舍方案

    file_put_contents() 和 fopen()/fwrite()/fclose() 两种方案至于应该怎么选,我觉得应该分情况选择,下面是实验的效果图

    码缘
  • 性能优化小技巧-消除低效循环,让你的程序快到飞起

    但是由于编译器的优化非常小心,它必须确保优化前后执行的效果是保持一致的,因此有些时候它会变得保守,并不能帮你优化太多。

    编程珠玑
  • file 协议导致的跨域问题以及解决方案

    看起来是跨域问题,也就是只支持 http,https 等这种类型的跨域请求,不支持 file 协议类型的(直接本地打开文件)。解决方案如下:

    Chor

扫码关注云+社区

领取腾讯云代金券