基於NodeJS的前後端分離的思考與實踐（四）安全問題解決方案_node.js

前言

在前後端分離的開發模式中，從開發的角色和職能上來講，一個最明顯的變化就是：以往傳統中，只負責瀏覽器環境中開發的前端同學，需要涉獵到服務端層面，編寫服務端程式碼。而擺在眼前的一個基礎性問題就是如何保障Web安全？

本文就在前後端分離模式的架構下，針對前端在Web開發中，所遇到的安全問題以及應對措施和注意事項，並提出解決方案。

跨站腳本攻擊(XSS)的防禦

問題及解決思路

跨站腳本攻擊（XSS，Cross-site scripting）是最常見且基本的攻擊Web網站的方法。攻擊者可以在網頁上發布包含攻擊性程式碼的數據，當瀏覽者看到此網頁時，特定的腳本就會以瀏覽者使用者的身分和權限來執行。透過XSS可以比較容易修改使用者資料、竊取使用者資訊以及造成其它類型的攻擊，例如：CSRF攻擊。

預防XSS攻擊的基本方法是：確保任何被輸出到HTML頁面中的資料以HTML的方式進行轉義（HTML escape）。例如下面的模板程式碼：

複製程式碼 程式碼如下:

$description

這段程式碼中的$description為模板的變數（不同模板中定義的變數語法不同，這裡只是示意一下），由使用者提交的數據，那麼攻擊者可以輸入一段包含」JavaScript」的程式碼，使得上述模板語句的結果變成如下的結果：

複製程式碼 程式碼如下:

<br> <script>alert('hello')'</script>

上述程式碼，在瀏覽器中渲染，將會執行JavaScript程式碼並在螢幕上alert hello。當然這個程式碼是無害的，但攻擊者完全可以建立一個JavaScript來修改使用者資料或竊取cookie資料。

解決方法很簡單，就是將$description的值進行html escape，轉義後的輸出程式碼如下

複製程式碼 程式碼如下:

<br> <script>alert("hello!")</script>

以上轉義後的HTML程式碼是沒有任何危害的。

Midway的解

轉義頁面中所有使用者輸出的資料

對資料進行轉義有以下幾種情況與方法：

1. 使用模板內部提供的機制進行轉義

中途島內部使用KISSY xtemplate作為模板語言。

在xtemplate實作中，語法上使用兩個中括號（ {{val}}）解析模板數據， ，預設既是對數據進行HTML轉義的，所以開發者可以這樣寫模板：

複製程式碼 程式碼如下:

{{description}}

在xtemplate中，如果不希望輸出的資料被轉義，需要使用三個中括號（{{{val}}}）。

2. 在Midway中明確的呼叫轉義函數

開發者可以在Node.js程式或範本中，直接呼叫Midway提供的HTML轉義方法，顯示的對資料進行轉義，如下：

方法1：在Node.js程式中對資料進行HTML轉義

複製程式碼 程式碼如下:

var Security= require('midway-security');
//data from server，eg {html:''，other:""}
data.html =Security.escapeHtml(data.html);
xtpl = xtpl.render(data);

方法2：在範本中對HTML資料進行HTML轉義

複製程式碼 程式碼如下:

Security.escapeHtml({{{description}}})

注意：只有當模板內部沒有對資料轉義的時候才使用Security.escapeHtml進行轉義。 否則，模板內部和程式會兩次轉義疊加，導致不符合預期的輸出。

推薦：如果使用xtemplate，建議直接使用模板內建的{{}}轉義； 如果使用其他模板，建議使用Security.escapeHtml進行轉義。

過濾頁中使用者輸出的富文本

你可能會想到：「其實我就是想輸出富文本，例如一些留言板、論壇給用戶一些簡單的字體大小、顏色、背景等功能，那麼我該如何處理這樣的富文本來防止XSS呢？

1. 使用Midway中Security提供的richText函數

Midway中提供了richText方法，專門用來過濾富文本，防止XSS、釣魚、cookie竊取等漏洞。

有一個留言板，模板程式碼可能如下：

複製程式碼 程式碼如下:

{{{message}}}

因為message是用戶的輸入數據，其留言板的內容，包含了富文本信息，所以這裡在xtemplate中，使用了三個大括號，默認不進行HTML轉義；那麼用戶輸入的數據假如如下：

複製程式碼 程式碼如下:

style="color:red;font-size:20px;position:fixed;">我在留言

上述的富文本資料如果直接輸出到頁面中，必然會導致eval.com網站的js注入到目前頁面中，造成了XSS攻擊。為了防止這個漏洞，我們只要在模板或程式中，呼叫Security.richText方法，處理使用者輸入的富文本。
呼叫方法與escapeHtml類似，有以下兩種方式

方法1: 直接在Node.js程式中呼叫

複製程式碼 程式碼如下:

message =Security.richText(message);
var html = xtpl.render(message)

方法2： 在範本中呼叫

複製程式碼 程式碼如下:

Security.richText({{{message}}})

透過呼叫Security的richText方法後，最終的輸出如下：

複製程式碼 程式碼如下:

我在留言

可以看出，首先：會造成XSS攻擊的script標籤被直接過濾掉；同時style標籤中CSS屬性position:fixed;樣式也被過濾了。最後輸出了無害的HTML富文本

了解其他可能導致XSS攻擊的途徑

除了在頁面的模板中可能存在XSS攻擊之外，在Web應用中還有其他幾個途徑也可能會有風險。

1. 出錯頁的漏洞

一個頁面如果找不到，系統可能會報一個404 Not Found的錯誤，例如：http://localhost/page/not/found

404 NotFound
Page /page/not/found does not exsit
很明顯：攻擊者可以利用這個頁面，建構一個類似這樣的連接，http://localhost/

• 深入淺析Bootstrap列表組元件
• JavaScript函數柯里化詳解
• JS密碼產生與強度偵測完整實例(附demo源碼下載)
• Angularjs整合微信UI（weui）
• JavaScript快速切換繁體中文和簡體中文的方法及網站支援簡繁體切換的絕招_javascript技巧