微信公衆號爆出前端安全漏洞

昨日在公衆號中挖掘到了一個 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 能被正常轉義。

最後

安全無小事，你們在作項目的時候應該時刻關注在相似場景下的可能出現的安全問題。

以爲內容有幫助能夠關注下個人公衆號 「前端真好玩」咯，按期分享如下主題內容：

• 前端小知識、冷知識
• 原理內容
• 提高工做效率
• 我的成長