ASP.NET MVC 使用CKEditor之注意事項(一)

CKEditor 

應該是許多人最喜歡用的內容編輯器，但一不小心他就有可能成為你的網站的資安漏洞，以下見紹CKEditor的正確使用方式之一

首先，當你建立好一個ASP.NET MVC的網站專案，你必須載入CKEditor的JS檔，許多網站都有說明，這邊就直接貼上一頁簡單的Razor Code

@Html.TextAreaFor(model => model.Info, new { id = "editor1", rows = "10", cols = "80" })

接著我們再寫JS

$(document).ready(function () {
            CKEDITOR.replace('editor1');
        })

基本上這樣就完成了CKEditor畫面上的呈現，如下

，但真正的問題是送去後端時，你會發現送出時出現下錯誤

Server Error in '/' Application.

---

A potentially dangerous Request.Form value was detected from the client (Content="<p>test</p>
").

此原因是因為ASP.NET的預設專案有幫忙阻擋來自前端含有html的值，預防惡意的資料注入，

通常使用CKEditor的人遇到這問題去Google就會得到一堆解法，其中最常看到的就是再Web.config設定

<httpRuntime requestValidationMode="2.0" />


如此一來問題解決了，但整個網頁的門戶就大開了，所有的欄位都可以被注入，這方法當然是不好，但還是一堆人用，而且Google到的資料也一堆解決方法是教你使用這方法......


另外一種比較好一點的解法，會教你設定Web.config只在特定頁面開放，例如:

1. <location path="Admin/Taiwan8ViewAuthors/Create">
2. <system.web>
3. <httpRuntime requestValidationMode="2.0" />
4. </system.web>
5. </location>

此方法解決了門戶大開的問題，但問題是在指定的頁面上所有的欄位都仍然可以被輸入HTML語法，而我們真正要的可能只有一兩個欄位允許而已，所以我建議的解決方法是

再ViewModel裡面先定義好允許HTML的欄位，把欄位加上[AllowHtml]的標籤

如此便不需要再Web.config埋下一個大坑，讓人有機會再不該輸入HTML的欄位輸入HTML了~(灑花)

*PS:此方法並無完全防止XSS，因為需求就是要讓User編輯，可以輸入HTML標籤，所以後端還要再防一次，檢查字串有沒有<script>關鍵字，避免XSS