[ASP. NET Basics] client and server data verification + CKEditer, asp. netckediter

[ASP. NET Basics] client and server data verification + CKEditer, asp. netckediter

1. The client uses Javascript for verification and directly prompts whether the data entered by the user complies with the specifications and is legal.

In this way, the client can get feedback immediately and reduce data interaction on the server.

In this way, the front-end data verification is not very secure. If the client directly Concatenates the QueryString string to request the server, it may execute some illegal actions.

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

Verify the new page withdrawal amount judgment in Ajax. Demo: QuKuan.html QuKuan. ashx

<! DOCTYPE html> 2. The server also needs to add data judgment and verification to ensure the correctness of data input.

3. After ASP. NET 4.0, requests are checked and verified by default in the ashx request detection..

If the request data contains <,> and other potential XSS (Cross Site Scripting) attack characters, an error is reported.

We submitted HTML messages in the previous message board project LiuYanban,<Font color = 'red'> HTML red font </font>The following error is prompted:

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

C. Add the js Code at the bottom of the HTML page and replace textarea with CKEDDITOR. replace ().

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

D. The effect is as follows:

<Ul id = "CreateLi"> </ul> <script type = "text/javascript"> // generate li var ul1 = document under ul. getElementById ("CreateLi"); var li1 = document. createElement ("li"); li1.innerHTML = "dynamically created li node"; ul1.appendChild (li1); </script>

The <li> tag is generated when you view the Element in F12.

　　

7. The principle of CKEditor is similar to that of the <li> label dynamically generated above. We continue to view the Element corresponding to CKEditor, and find that the original location TextArea is hidden and a <DIV> code section is added below it.

This Code calls css and js in CKEditor to implement the WYSIWYG editor function.

 

Summary:1. This article briefly introduces the data verification mechanism: the front-end js judgment provides a good user experience, and the acquired logic judgment data ensures data legitimacy;

2. CKEditor is a third-party visual editing tool. Its principle is to use js and css to draw an editing box and implement each button function.

 

Reference website:Http://ckeditor.com/

Download the complete Demo:LiuYanban_CKEditor