ASP.NET MVC整合RichText編輯器範例與注意事項

最近的ASP.NET MVC專案用到了RichText編輯器,允許使用者編輯包含不同字型、大小、粗細、顏色的格式化文字,其中有些需注意細節,整理筆記備忘。

網頁版RichText編譯器的選擇不少,本文以KendoEditor為例,結果則以PostBack方式回傳。即使換用其他編輯器或改以AJAX回傳,ASP.NET MVC整合重點大同小異。

範例的MVC網站共有Index及Result兩個View,Index為編輯器頁面,Result則用來顯示結果。Controller除了Index及Result兩個Action,再增加一個Sumbit Action,負責接受前端送回內容,模擬將結果寫入DB(為求簡化,以保存在記憶體替代)供Result View讀取顯示,接著導向Result View顯示編輯結果。

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace Mvc.Controllers
{
    public class HomeController : Controller
    {
        static string _content = string.Empty;
        void SaveToDb(string content)
        {
            //模擬寫入DB
            _content = content;
        }
        string ReadFromDb()
        {
            //模擬由DB讀取
            return _content;
        }
 
 
        public ActionResult Index()
        {
            return View();
        }
 
        [HttpPost]
        [ValidateInput(false)]
        public ActionResult Submit(string content)
        {
            SaveToDb(content);
            return RedirectToAction("Result");
        }
 
        public ActionResult Result()
        {
            ViewBag.Content = ReadFromDb();
            return View();
        }
    }
}

Index.cshtml已盡量簡化,網頁只有一個KendoEditor及一顆送出鈕,送出前透過JavaScript取出編輯結果(HTML)存入<input type="hidden" name="content" />,傳送給Submit Action接收:

 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Kendo Editor Test</title>
    <link rel="stylesheet" 
href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css" />
    <link rel="stylesheet" 
href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css" />
    <script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
    <div>
        @using (Html.BeginForm("Submit", "Home"))
        {
            <textarea id="editor" style="width: 480px; height: 200px;">
                黑暗執行緒
            </textarea>
            <input type="hidden" id="content" name="content" />
            <button id="submit" type="submit">Submit</button>
        }
    </div>
 
    <script>
        $("#editor").kendoEditor({
            tools: [
                "formatting",
                "bold",
                "italic",
                "underline",
                "strikethrough",
                "foreColor",
                "backColor"
            ]
        });
        var editor = $("#editor").data("kendoEditor");
        $("#submit").click(function () {
            $("#content").val(editor.value());
        });
    </script>
</body>
</html>

Result.cshtml也很單純,在Server端將HTML內容存入ViewBag.Content,View裡以@ViewBag.Content顯示的結果經過HtmlEncode處理(<變成&lt;)可呈現HTML原始碼,@Html.Raw(ViewBag.Content)則將HTML內容變成網頁一部分,可呈現HTML裡<h1>、<span style="color:#444">等樣式效果。注意:Html.Raw()允許使用者輸入內容成為網頁HTML語法的一部分,跟SQL Injection漏洞原理相仿,一旦引用就存在被注入惡意程式碼的風險,若一定要使用需嚴防XSS攻擊!這部分後面會再說明。

 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>結果顯示</title>
    <style>fieldset { width: 400px; height: 120px; }</style>
</head>
<body>
     <fieldset>
        <legend>輸入內容</legend>
        <div>@ViewBag.Content</div>
    </fieldset>
    <fieldset>
        <legend>HTML顯示結果</legend>
        <div>@Html.Raw(ViewBag.Content)</div>
    </fieldset>
</body>
</html>

就這樣,一個提供使用者編輯格式化文字內容的網頁介面就完成了。

接下來,來談談幾個需要注意的地方。

第一,Submit Action宣告為[HttpPost],不允許以GET方式執行。原因:永遠不要使用GET方式接收指令進行資料更新!

第二,在ActionResult Submit(string content)上有個[ValidateInput(false)],目的在關閉Request內容檢核。基於安全考量,ASP.NET MVC預設會攔截包含XML標籤的Request內容,避免有心人士透過Action注入XSS攻擊程式。但在RichText編輯情境,content包含HTML是正常的,若不設定[ValidateInput(false)]停用檢核機制,送出資料時會出現錯誤:

具有潛在危險Request.Form的值已從用戶端(content="<h2><span style="col…")偵測到。

關閉ValidateInput代表我們預期並接受content參數包含HTML語法,但於此同時也開始要承擔「content內容可能包藏XSS攻擊」風險。等等,KendoEditor並不容許輸入<script>、<iframe>,使用者應該沒法搞怪吧?錯!只要資料來自前端由使用者提供,處處隱藏殺機,例如以下XSS注入示範:

不需用特殊道具,瀏覽器開啟F12跑一行指令,即可篡改傳送內容加入惡意程式碼,若Result View是公眾瀏覽的頁面,就可能被當成發動攻擊的跳板。

第三點,要防止使用者輸入HTML夾帶惡意程式,最有效的方法是使用Sanitizer工具進行過濾,只保留白名單列舉的HTML標籤,排除可能夾帶惡意內容的管道。至於過濾工具,過去大家蠻常用的AntiXSS Library Sanitizer,處於3.x版不夠安全,4.x版把不該殺的也殺光光的尷尬處境(4.x版被一顆星評價洗版),已不再是好選擇。重新評估,我選擇較活躍的開源專案-HtmlSanitizer

【2016-08-22更新】感謝Bruce補充,AntiXSS Library在4.3.1版再改回白名單保留邏輯(被罵了兩年,呼~),可再納入考量。

可使用NuGet安裝:

裝妥後在Submit()加上content = new HtmlSanitizer().Sanitize(content),即可過濾content可能有害的內容,前述示範惡意插入的JavaScript會整段被移除。

[HttpPost]
[ValidateInput(false)]
public ActionResult Submit(string content)
{
    content = new HtmlSanitizer().Sanitize(content);
    SaveToDb(content);
    return RedirectToAction("Result");
}

重新整理重點:

  • Razor語法插入後端內容時預設會經過HtmlEncode,基本上能有效防止XSS攻擊。但RichText在呈現時必須原始呈現,需使用@Html.Raw()嵌入頁面。使用Html.Raw()代表使用者輸入內容有可能成為網頁HTML一部分,務必從嚴檢核,防範被插入惡意程式。
  • 接收資料進行更動作業的Action宜加上[HttpPost]降低被攻擊機率。
  • 接收HTML資料的Action需加上[ValidateInput(false)],避免資料傳送被封鎖。
  • 關閉ValidateInput後,防範攻擊就變成我們的責任,HTML內容進入系統前應使用Sanitizer濾掉可能有害部分。
    注意:所有可能以Html.Raw()內嵌或直接成為網頁HTML一部分的輸入參數都應該處理。

[2016-08-19更新]

關閉ValidateInput後Action的所有參數都允許傳入HTML,如要進一步限定只開放某個參數接受HTML,使用AllowHTML Attribute會更安全,可一次避免其他參數被植入XSS攻擊的風險,感謝demo補充。

歡迎推文分享:
Published 18 August 2016 11:35 PM 由 Jeffrey
Filed under: ,
Views: 5,942



意見

# demo said on 18 August, 2016 10:55 AM

建議不要使用[ValidateInput(false)]

因為這樣會關閉整個Action的檢查,使用Viewmodel接受資料,並且針對唯一需要開放

HTML的屬性使用 AllowHTML attribute 可以進一步的把開放的空間再縮小

# Jeffrey said on 18 August, 2016 05:46 PM

to demo, 感謝補充,已加入本文。

# KKbruce said on 22 August, 2016 03:37 AM

AntiXSS 4.3.0 有改回來哦

參考:blog.kkbruce.net/.../microsoft-web-protection-library-430.html

# Jeffrey said on 22 August, 2016 04:17 AM

to KKBruce,感謝提供,已補充於本文。

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<August 2016>
SunMonTueWedThuFriSat
31123456
78910111213
14151617181920
21222324252627
28293031123
45678910
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication