Using SCE in AngularJS to prevent XSS attacks _ AngularJS

This article mainly introduces how to use SCE in AngularJS to prevent XSS attacks and prevent cross-site scripting vulnerabilities by reasonably transcoding to HTML, for more information about the XSS (cross-site scripting) solutions and how to use the SCE ($ sceProvider) and sanitize service features in AngularJS to correctly process XSS, see this article. If I leave out any important information, please directly comment/suggest. Sorry for the error.

The following content will be my focus:

• Transcoding all HTML
• Safely insert HTML and ignore tags like "script. If you do not pay attention to it, this will have the same risk and will also target the page, especially when there is an "img" label.
• Dependency and insertion of pure HTML; this also causes risks and makes the web page very ugly.

Use the ng-bind command to transcode HTML

You can use the ng-bind command to transcode the entire webpage. It transcodes all HTML tags, but still displays the original format. The following code shows the usage of ng-bind.

 
  ng-bind directive: Note that HTML text is entered as it is.
  {{helloMessage}}

The figure below demonstrates the above remarks. Note the HTML code in the input column. It is exactly the same as in HTML pages.

Insert HTML in a safe way. you can also use the ng-bind-html command to ignore elements such as "script ".

This is the key to solving XSS attacks. that is to say, you should still pay attention to elements such as "img" (included in the white list as a part; and empty elements) because it can display any images (including illegal ones) on your web page, it may also adversely affect your web page. using the ng-bind-html command, you can directly ignore JavaScript tags such as AngularJS and "script. the ng-bind-html command calculates the expression and inserts the result HTML into the element in a safe way. if the user inputs HTML content (for example, in comments), put it in the ng-bind-html command to ensure that the text is encoded as a secure HTML character in the white list. the whitelist of security characters is encoded as part of $ sanitize. the following items are included in the security list (obtained directly from the source code ):

Empty element:

The code is as follows:

Area, br, col, hr, img, wbr.

For more information, visit the http://dev.w3.org/html5/spec/Overview.html#void-elements

Block element:

The code is as follows:

Address, article, aside, blockquote, caption, center, del, dir, p, dl, figure, figcaption, footer, h1, h2, h3, h4, h5, h6, header, hgroup, hr, ins, map, menu, nav, ol, pre, script, section, table, ul

Inline element:

The code is as follows:

A, abbr, acronym, B, bdi, bdo, big, br, cite, code, del, dfn, em, font, I, img, ins, kbd, label, map, mark, q, ruby, rp, rt, s, samp, small, span, strike, strong, sub, sup, time, tt, u, var

End tag element:

The code is as follows:

Colgroup, dd, dt, li, p, tbody, td, tfoot, th, thead, tr, rp, rt.

For more information, visit the http://dev.w3.org/html5/spec/Overview.html#optional-tags

The following two elements need to be circumvented because their content is not trusted. in this case, if you want to display them, you need to use the $ sce service and call Angular's trustAsHtml method to execute the following elements.

• Script
• Style

The following code shows how to use the ng-bind-html command.

 
  ng-bind-html directive: Note that image is displayed appropriately as a result of text entered in the text field.  

The following figure shows what Angular looks like when HTML code is entered in a text field and is inserted to the DOM in a safe way. note that the "img" element is a part of the hollow element in the above list. because the code is entered into the text field, the images that appear as "img" are placed in a trusted list (white list.

Trust and insert the entire HTML segment

Warning: this is very dangerous and may easily cause pollution to your web site. trustAsHtml should be used only when you know and fully confirm it. in this way, you are confident that the text can be trusted. you should use the $ sce service and call the trustAsHtml method to insert the entire HTML segment into the DOM. When the $ sce service is used to call the trustAsHtml method to trust a piece of HTML code, pay attention to HTML and the JavaScript code block. in this case,This code is inserted, and it may add styles to existing HTML elements. This may not be good. People may also use this method to replace background images with illegal ones.