"ASP. NET Foundation "client, server-side data validation + Ckediter

Source: Internet
Author: User

1, the client uses JavaScript authentication, directly prompts the user to enter the data whether conforms to the specification, is legitimate.

This way, the client can get feedback immediately and reduce the data interaction on the server side.

So the front-end data validation is not very secure, if the client directly stitching QueryString string to request the server, it is possible to perform some illegal actions.

For example: http://localhost:40201/qukuan.ashx?deleteid=2 client can modify the value of Deleteid according to this request, and delete other data illegally.

Add a new page in Ajax.demo verification of withdrawal amount judgment: qukuan.html qukuan.ashx

<! DOCTYPE html>"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/> <title></title> <script type="Text/javascript">function Check () {varQukunjine = document.getElementById ('Amount'). Value; if(Parseint (Qukunjine,Ten) > -) {alert ('Single withdrawal amount cannot be greater than'); return false; }        }    </script>"qukuan.ashx"Method="Post"onsubmit="return confirm (' Are you really submitting? ')">--> <!--<form action="qukuan.ashx"Method="Post"onsubmit="var qukunjine = document.getElementById (' Amount '). Value, if (parseint (Qukunjine, ten) >) {alert (' The amount of a single withdrawal cannot be greater than 3000 '); return false;}">--> <form action="qukuan.ashx"Method="Get"onsubmit="Check ()"> <input type="Hidden"Name="IsPostBack"Value="true"/>Please enter the withdrawal amount:<input type="text"Name="Jine"Id="Amount"/> <br/> <input type="Submit"Value="Confirm Withdrawal"/> </form></body>View Code
usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingsystem.web;namespaceajaxdemo{/// <summary>    ///Summary description of Qukuan/// </summary>     Public classQukuan:ihttphandler { Public voidProcessRequest (HttpContext context) {context. Response.ContentType="text/html"; if(string. IsNullOrEmpty (context. request.querystring["IsPostBack"]))            {                //page Load First                stringstrHTML = common_nvelocity.renderhtml ("qukuan.html",NULL); Context.            Response.Write (strhtml); }            Else            {                stringStrjine = context. request.querystring["Jine"]; if(Convert.ToInt16 (Strjine) > -) {context. Response.Write ("withdrawal failed, a maximum withdrawal of 2000 yuan per transaction"); }                //To do ------                Else{context. Response.Write ("withdrawals are successful and your amount is"+ Strjine +"Yuan"); }            }        }         Public BOOLisreusable {Get            {                return false; }        }    }}
View Code

2, the server side also needs to add data judgment, validation to ensure the correctness of data entry.

after 3,asp.net 4.0, the request is checked and verified by default in the ASHX request detection .

If there are some potential XSS (cross site Scripting) attack characters in the request data, there will be an error.

We submitted the HTML message in the previous Message board project Liuyanban,<font color= ' red ' > HTML font </font> system will prompt the following error:

  

 If you allow the client to submit HTML code, you can modify the Webconfig,<system.web> node to join

(the page at the top of the. aspx page also joins vilidaterequest= "Fasle"). After adding a message, you can display:

  

4, allow the function of the website to add code to open, users can add js,css and other code.

  The following example, the message added JS code hints to win, so that other users open the message board when the page will also pop up the winning reminder message

  

5,ckeditor is a third-party JavaScript tool that is an HTML editor that can be visualized.

CKEditor How to use: A, after downloading the website, put the CKEditor package into the project

  

B, add a reference to ckeditor.js in the HTML page

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

C, add the JS code at the bottom of the HTML page and replace the textarea with the Ckedditor.replace () ckeditor

<script type="text/javascript">    var mestextarea = document.getElementById ("msgcontent");    Ckeditor.replace (Mestextarea); </script>

D, the effect is as follows:

  

6,ckeditor creates a visual editor with JavaScript that defines the actions that each button performs, such as: bold B, adding <strong></strong> code

Let's look at a small example of a JavaScript dynamically generating HTML tags: 

<ul id="Createli"></ul><script type="Text/javascript">//ur under generation li    varUL1 = document.getElementById ("Createli"); varLi1 = Document.createelement ("Li"); Li1.innerhtml="dynamically-created LI nodes"; Ul1.appendchild (LI1);</script>

F12 view element to see, generated <li> tags

  

7, the CKEditor principle is similar to the above dynamic generation <li> labeling. We continue to look at the element elements of the CKEditor, and find that the textarea of the original position is hidden and a section of <DIV> code is added below it.

It is this code, called CKEditor in the CSS and JS implementation of WYSIWYG editor function

Summary: 1, this paper briefly introduces the data validation mechanism: The front-end JS judgment to the user a good experience, the acquired logic judgment data to ensure the legitimacy of data;

2,ckeditor is a third-party visual editing tool, and the principle is to use JS,CSS to draw the edit box and implement the function of each button.

This article reference website:http://ckeditor.com/

full demo Download: Liuyanban_ckeditor

"ASP. NET Foundation "client, server-side data validation + Ckediter

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.