【ASP.NET基礎】客戶端、服務器端的數據驗證+CKEditer

2019-11-14 16:00:07

字體：大中小

來源：轉載

供稿：網友

1，客戶端用javascript進行驗證，直接提示用戶輸入的數據是否符合規范，是否合法。

　　這樣體驗行比較好，客戶端立即就可以得到反饋，而且減少了服務器端的數據交互。

　　這樣前端數據驗證并不是很安全，如果客戶端直接拼接QueryString字符串去請求服務器，就有可能執行一些非法動作。

　　例如： http://localhost:40201/qukuan.ashx?deleteid=2 客戶端可以根據這個請求去修改 deleteid 的值，非法刪除其他數據。

　　Ajax.Demo 中添加新頁面取款金額判斷的驗證：QuKuan.html QuKuan.ashx

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <script type="text/Javascript">        function Check() {            var QuKunJine = document.getElementById('amount').value;            if (parseInt(QuKunJine, 10) > 2000) {                alert('單筆取款金額不能大于2000');                return false;            }        }    </script></head><body>    <!--<form action="QuKuan.ashx" method="post" onsubmit="return confirm('真的提交嗎？')">-->    <!--<form action="QuKuan.ashx" method="post" onsubmit="var QuKunJine = document.getElementById('amount').value; if (parseInt(QuKunJine, 10) > 2000) {alert('單筆取款金額不能大于3000'); return false;}" >-->    <form action="QuKuan.ashx" method="get" onsubmit="Check()">        <input type="hidden" name="IsPostBack" value="true" />        請輸入取款金額：        <input type="text" name="JinE" id="amount" />        <br />        <input type="submit" value="確認取款" />    </form></body></html>

View Code

using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace AjaxDemo{    /// <summary>    /// QuKuan 的摘要說明    /// </summary>    public class QuKuan : IHttpHandler    {        public void PRocessRequest(HttpContext context)        {            context.Response.ContentType = "text/html";            if (string.IsNullOrEmpty(context.Request.QueryString["IsPostBack"]))            {                //頁面首次加載                string strHtml = Common_Nvelocity.RenderHTML("QuKuan.html", null);                context.Response.Write(strHtml);            }            else            {                string strJinE = context.Request.QueryString["JinE"];                if (Convert.ToInt16(strJinE) > 2000)                {                    context.Response.Write("取款失敗，單筆最多取款2000元");                }                //To Do ------                else                {                    context.Response.Write("取款成功，您的巨款金額為" + strJinE + "元");                }            }        }        public bool IsReusable        {            get            {                return false;            }        }    }}

View Code

2，服務器端同樣需要加入數據判斷、驗證以保證數據錄入的正確性。

3，asp.net 4.0 之后對ashx請求檢測中默認對請求進行了檢查、校驗 。

　　如果請求數據中有一些 <，>等潛在的XSS(跨站腳本，Cross Site Scripting) 攻擊字符，則會報錯。

　　我們在之前的留言板項目LiuYanban中提交HTML留言，<font color='red'> HTML紅色字體</font> 系統會提示如下錯誤：

　　如果允許客戶端可以提交HTML代碼可以修改Webconfig，<system.web>節點加入 <httpRuntime requestValidationMode="2.0"/> 把驗證模式變為2.0

　　（.aspx頁面頂部的Page還要加入VilidateRequest="fasle"）。添加留言后，即可顯示：

4，允許網站留言功能中添加代碼的功能開放，用戶就可以添加js,CSS等代碼。

　　下面這個例子，留言中添加JS代碼提示中獎，這樣其他用戶在打開留言板的時候頁面也會彈出中獎提醒信息

5，CKEditor 是第三方的Javascript工具，是可以進行可視化的HTML編輯器。

　　CkEditor使用方法：A,官網下載后，把CKEditor包放入項目中

　　B, HTML頁面中添加對 ckeditor.js 的引用　

 <script src="../ckeditor/ckeditor.js"></script>

　　C, HTML頁面底部添加js代碼，用CKEDDITOR.replace() 實現把 textarea替換為 CKEditor　　

<script type="text/javascript">    var MesTextArea = document.getElementById("MsgContent");    CKEDITOR.replace(MesTextArea);</script>

　　D, 效果如下：

6，CKEditor，通過Javascript創建了可視化編輯器，定義每個按鈕執行的動作，例如：加粗 B ，就添加了 <strong></strong>代碼

　 我們先看一個javascript動態生成HTML標簽的一個小例子：　

<ul id="CreateLi"></ul><script type="text/javascript">    //ul 下生成 li    var ul1 = document.getElementById("CreateLi");    var li1 = document.createElement("li");    li1.innerHTML = "動態創建的li節點";    ul1.appendChild(li1);</script>