一個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海洋」，隨時與魚頭互動。歡迎！衷心但願能夠碰見你。