"Notes" web front-end security code

Recent development involves the output of the correct HTML tags such problems, just on the character encoding this piece of a lot to see, before the understanding of this area is not deep, the thinking is really not enough, if the next encounter similar problems, if again a lot of time to investigate the flowers, it is not worth the candle.

Just like the regular expression, it seems you know it, but every development needs to be checked and tested, and you will be like me, each time it will take some unexpected time.

In short, the heavy learning.

There is an article, this Bo friends have summed up very in place, introduced in this, see the classmate, hope can see more of his summary:

In the development of the Web development process, the front end is always in the processing of the various variables, the variable can contain a variety of characters, if not the characters to "special" processing, the light causes the page is not normal display, sneak into other things, that is, the page hangs, or pop up should not pop things, These are what we do not expect to see, the heavy can lead to password disclosure, the site's traffic suddenly soared, the server hangs.

In front-end development, the following contexts are involved:

1) displayed directly on the page, eg:<div>{%username%}</div>,<input type= "text" value= "{%username%}"/>

2) in the script tag, eg: <script>var test = ' {%username%} '; var test= "{%username%}" </script>

3) in the page event, Eg:<div onclick= "alert (' {%username%} ')" >334455</div>

4) In the context of innerHTML, Eg:<div id= "test" ></div> <script>var test= "{%username%}"; document.getElementById (' Test '). InnerHTML =test; </script>

5) in the URL of the page link: eg:<a href= "{%username%}" ></a>

6) Submit URL parameter processing

7) JS gets the URL parameter value when

One of the following analyses describes the escape scenarios in 7 contexts:

1) Directly on the page (for short, in the HTML context of the page):

In order to ensure that the user's intention, completely displayed on the page, this type is mainly to prevent the label self-closing, the attribute of the single quotation mark, double quotation marks already exist in the case of incorrect display, so must escape 4 characters: <,>, "," to escape meaning (hereinafter)

(1) < to &lt;

(2) > to &gt;

(3) "to &quot;

(4) ' to & #39;

2) in the script tag (JS environment):

In JavaScript, "and" both represent strings, there is no difference, so if these 2 characters appear in the variable, it will affect the subsequent incorrect display, so you must escape the 2 characters, similarly, if the variable contains \ will be after the "or" to escape,

Become true ' and ', nor closed, resulting in grammatical errors, so this character also needs to be escaped, and in our comments there is */*/This form, if the variable appears in the */this character, will be commented out part of the code to burst out, so also to escape/character,

In summary, the characters to be escaped in the script tag are:

(1) ' to \ '

(2) "to \"

(3) \ to \ \

(4)/to \

3) in the page event:

This kind of context relates to the page HTML and JS environment, what to do to escape it? In the end is the HTML in JS, or first JS and then HTML escape it? Let's look at an example:

Eg:<div onclick= "alert (' {%username%} ')" ></div>

When username = ", if the first HTML, and then JS escape, then it is <div onlick=" alert (' &qout; ') " ></div> we get the page to execute, find grammar error

If is first JS, successively in the HTML escape, then is <div onlick= "alert (' \&qout; ')" ></div> we get the page up to execute, success!!

So the conclusion is to first JS escape, and then HTML escape, why is this? Because here it is to execute a JS function, if all as HTML to parse, here the JS function will not be executed, there is no JS environment meaning.

In summary, the characters that need to be escaped in this tired context are:

(1) ' to \& #38;

(2) "to \&quot;

(3) \ to \ \

(4)/to \

(5) < to &lt;

(6) < to &gt;

4) in the innerHTML environment:

This kind of context is first in the JS environment, followed by the HTML environment, it is clear that the first JS escape, and then HTML escape, the characters need to be escaped with the above 3)

5) in the URL context of the page link:

This kind of complex, the URL itself involves a lot of special characters, but also related to the HTML and JS environment in the case of assignment, especially note that URL encoding and HTML encoding is not the same, see the following Appendix URL encoding table and HTML encoding table

In HTML and JS environments, the characters that need to be escaped are: ", ', <,>,\,/

In other environments, the characters that need to be escaped are: +, space,? , =,&,#,%

This type of character is escaped as follows:

(1) "to% 22;

(2) ' to% 22;

(3) < to%3C

(4) > to%3e

(5) \ to%5c

(6)/to%2F

(7) + to%2B

(8) space to%20

(9)? To%3f

(Ten) = to%3d

(one) & to%26

# to 23

(+)% to%25

Why would you want to escape these characters? A little bit of web development experience, the reason is very simple, if there are these characters, do not escape, then we will not get what we deserve

Extension: When we splicing the URL, such as the data in the form extracted, in an AJAX way to submit, we also need to escape the above characters, otherwise the resulting is not the thought of things

6) Submit URL parameters for processing:

1) Form form submission method: Do not need to do any processing, the form will be encoded according to the page encoding

2) Ajax submission: Because the AJAX submission, is to be stitched into the URL of the way submitted to the backend, so must be considered on the +, space,? , =,&,#,% escaped, usually escaped with encodeURIComponent

For the required escape characters for the three functions of escape,encodeuri,encodeuricomponent, see the list of attachments later

7) JS Gets the value of the URL parameter when

(1) When you get the value of the parameter in the URL, you must first do unescape transcoding to use, because some special characters in the URL are encoded

(2) When setting the value of the URL to some parameters, such as hiding the value on the form (commit refer), Escape encoding is required

Appendix:

1) HTML code: http://wenku.baidu.com/view/0dbaa1dc7f1922791688e8a2.html

2) URL code: http://baike.baidu.com/view/204662.htm

3) Difference of escape,encodeuri,encodeuricomponent: http://www.alixixi.com/web/a/2008081147930.shtml

The above citation comes from: Web front-end Security Coding (template article)

I outline, divided into two categories, template (or display) related, the other is URL-related;

Template (display) Related:

We want to put the uncertainty back-end text variable (of course from the majority of the user's input), in order for it to be displayed correctly in the page (that is, HTML), or the correct execution of the JS code, we want to escape the special characters:

HTML Environment:

< escape &lt; > Escape &gt; " Escape &quot; ' Escape & #39

JS Environment:

' escape \ ' " escape \ " \ Escape \/escape \

URL Related:

.... A little .....

"Notes" web front-end security code