前言
在前後端分離的開發模式中，從開發的角色和職能上來講，一個最明顯的變化就是：以往傳統中，只負責瀏覽器環境中開發的前端同學，需要涉獵到服務端層面，編寫服務端程式碼。而擺在眼前的一個基礎性問題就是如何保障Web安全？
本文就在前後端分離模式的架構下，針對前端在Web開發中，所遇到的安全問題以及應對措施和注意事項，並提出解決方案。
跨站腳本攻擊(XSS)的防禦
問題及解決思路
跨站腳本攻擊（XSS，Cross-site scripting）是最常見且基本的攻擊Web網站的方法。攻擊者可以在網頁上發布包含攻擊性程式碼的數據，當瀏覽者看到此網頁時，特定的腳本就會以瀏覽者使用者的身分和權限來執行。透過XSS可以比較容易修改使用者資料、竊取使用者資訊以及造成其它類型的攻擊，例如：CSRF攻擊。
預防XSS攻擊的基本方法是：確保任何被輸出到HTML頁面中的資料以HTML的方式進行轉義（HTML escape）。例如下面的模板程式碼：
這段程式碼中的$description為模板的變數（不同模板中定義的變數語法不同，這裡只是示意一下），由使用者提交的數據，那麼攻擊者可以輸入一段包含」JavaScript」的程式碼，使得上述模板語句的結果變成如下的結果：
上述程式碼，在瀏覽器中渲染，將會執行JavaScript程式碼並在螢幕上alert hello。當然這個程式碼是無害的，但攻擊者完全可以建立一個JavaScript來修改使用者資料或竊取cookie資料。
解決方法很簡單，就是將$description的值進行html escape，轉義後的輸出程式碼如下
以上轉義後的HTML程式碼是沒有任何危害的。
Midway的解
轉義頁面中所有使用者輸出的資料
對資料進行轉義有以下幾種情況與方法：
1. 使用模板內部提供的機制進行轉義
中途島內部使用KISSY xtemplate作為模板語言。
在xtemplate實作中，語法上使用兩個中括號（ {{val}}）解析模板數據， ，預設既是對數據進行HTML轉義的，所以開發者可以這樣寫模板：
在xtemplate中，如果不希望輸出的資料被轉義，需要使用三個中括號（{{{val}}}）。
2. 在Midway中明確的呼叫轉義函數
開發者可以在Node.js程式或範本中，直接呼叫Midway提供的HTML轉義方法，顯示的對資料進行轉義，如下：
方法1：在Node.js程式中對資料進行HTML轉義
方法2：在範本中對HTML資料進行HTML轉義
注意：只有當模板內部沒有對資料轉義的時候才使用Security.escapeHtml進行轉義。 否則，模板內部和程式會兩次轉義疊加，導致不符合預期的輸出。
推薦：如果使用xtemplate，建議直接使用模板內建的{{}}轉義； 如果使用其他模板，建議使用Security.escapeHtml進行轉義。
過濾頁中使用者輸出的富文本
你可能會想到：「其實我就是想輸出富文本，例如一些留言板、論壇給用戶一些簡單的字體大小、顏色、背景等功能，那麼我該如何處理這樣的富文本來防止XSS呢？
1. 使用Midway中Security提供的richText函數Midway中提供了richText方法，專門用來過濾富文本，防止XSS、釣魚、cookie竊取等漏洞。
有一個留言板，模板程式碼可能如下：
方法1: 直接在Node.js程式中呼叫
可以看出，首先：會造成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/
