來自：美團技術團隊（微訊號：meituantech）

作者：李陽，美團點評前端工程師。2016年加入美團點評，負責美團外賣 Hybrid 頁面效能最佳化相關工作。

連結：https://tech.meituan.com/fe_security.html

背景

<input type="text" value="keyword") %>">
<button>搜尋button>
<div>
  您搜尋的關鍵詞是：<%= getParameter("keyword") %>
div>

然而，在上線後不久，小明就接到了安全組發來的一個神秘連結：

http://xxx/search?keyword=">

小明帶著一種不祥的預感點開了這個連結[請勿模仿，確認安全的連結才能點開]。果然，頁面中彈出了寫著”XSS”的對話方塊。

可惡，中招了！小明眉頭一皺，發現了其中的奧秘：

當瀏覽器請求 http://xxx/search?keyword="> 時，服務端會解析出請求引數 keyword，得到 ">，拼接到 HTML 中傳回給瀏覽器。形成瞭如下的 HTML：

<input type="text" value=""><script>alert('XSS');script>">
<button>搜尋button>

<div>
  您搜尋的關鍵詞是：”><script>alert(‘XSS’);script>
div>

瀏覽器無法分辨出  是惡意程式碼，因而將其執行。

這裡不僅僅 div 的內容被註入了，而且 input 的 value 屬性也被註入， alert 會彈出兩次。

面對這種情況，我們應該如何進行防範呢？

其實，這隻是瀏覽器把使用者的輸入當成了指令碼進行了執行。那麼只要告訴瀏覽器這段內容是文字就可以了。

聰明的小明很快找到解決方法，把這個漏洞修複：

<input type="text" value="keyword")) %>">
<button>搜尋button>
<div>
  您搜尋的關鍵詞是：<%= escapeHTML(getParameter("keyword")) %>
div>

escapeHTML() 按照如下規則進行轉義：

經過了轉義函式的處理後，最終瀏覽器接收到的響應為：

<input type="text" value="">">
<button>搜尋button>
<div>
  您搜尋的關鍵詞是：">
div>

惡意程式碼都被轉義，不再被瀏覽器執行，而且搜尋詞能夠完美的在頁面顯示出來。

透過這個事件，小明學習到瞭如下知識：

• 通常頁面中包含的使用者輸入內容都在固定的容器或者屬性內，以文字的形式展示。

• 攻擊者利用這些頁面的使用者輸入片段，拼接特殊格式的字串，突破原有位置的限制，形成了程式碼片段。

• 攻擊者透過在標的網站上註入指令碼，使之在使用者的瀏覽器上執行，從而引發潛在風險。

• 透過 HTML 轉義，可以防止 XSS 攻擊。[事情當然沒有這麼簡單啦！請繼續往下看]。

註意特殊的 HTML 屬性、JavaScript API

自從上次事件之後，小明會小心的把插入到頁面中的資料進行轉義。而且他還發現了大部分模板都帶有的轉義配置，讓所有插入到頁面中的資料都預設進行轉義。這樣就不怕不小心漏掉未轉義的變數啦，於是小明的工作又漸漸變得輕鬆起來。

但是，作為導演的我，不可能讓小明這麼簡單、開心地改 Bug 。

不久，小明又收到安全組的神秘連結：http://xxx/?redirect_to=javascript:alert('XSS')。小明不敢大意，趕忙點開頁面。然而，頁面並沒有自動彈出萬惡的“XSS”。

小明開啟對應頁面的原始碼，發現有以下內容：

<a href="redirect_to")) %>">跳轉...a>

這段程式碼，當攻擊 URL 為 http://xxx/?redirect_to=javascript:alert('XSS')，服務端響應就成了：

<a href="javascript:alert('XSS')">跳轉...a>

雖然程式碼不會立即執行，但一旦使用者點選 a 標簽時，瀏覽器會就會彈出alert(‘xss’)。

可惡，又失策了…

在這裡，使用者的資料並沒有在位置上突破我們的限制，仍然是正確的 href 屬性。但其內容並不是我們所預期的型別。

原來不僅僅是特殊字元，連 javascript: 這樣的字串如果出現在特定的位置也會引發 XSS 攻擊。

小明眉頭一皺，想到瞭解決辦法：

// 禁止 URL 以 "javascript:" 開頭
xss = getParameter("redirect_to").startsWith('javascript:');
if (!xss) {
  "redirect_to"))%>">
    跳轉...
  

} else {
  “/404″>
    跳轉…
  
}

// 根據專案情況進行過濾，禁止掉 "javascript:" 連結、非法 scheme 等
allowSchemes = ["http", "https"];

valid = isValid(getParameter("redirect_to"), allowSchemes);

if (valid) {
  "redirect_to"))%>">
    跳轉...
  

} else {
  “/404″>
    跳轉…
  
}

• 做了 HTML 轉義，並不等於高枕無憂。

• 對於連結跳轉，如  或 location.href="xxx"，要檢驗其內容，禁止以 javascript: 開頭的連結，和其他非法的 scheme。

<script>
var initData = <%= data.toJSON() %>
script>