Using SCE in AngularJS to prevent XSS attacks, angularjsxss

Using SCE in AngularJS to prevent XSS attacks, angularjsxss

This article shows different XSS (Cross-Site Scripting) solutions and how to use the SCE ($ sceProvider) and sanitize service features in AngularJS to correctly process XSS. 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.

<div><form>  
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:Copy codeThe 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:Copy codeThe Code is as follows: address, article, aside, blockquote, caption, center, del, dir, div, 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:Copy codeThe 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:Copy codeThe 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.
 

<div><form>  
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, a section such as "<style>. the Code "hello {color: red} </style>" is inserted. 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.
 

<script type="text/javascript">  angular.module('HelloApp', ["ngSanitize"])  .controller('HelloCtrl', ['$scope', '$sce', function($scope, $sce){    $scope.name="";    $scope.processHtmlCode  =  function() {      $scope.helloMessage = "
The following figure shows what it looks like when you enter the HTML style code in the DOM to be inserted in the text field. the result is that other HTML elements are highlighted in red, as shown below. in some scenarios, hackers may insert a section with a background style, which may display a background that is not intended to be displayed and bring a bad experience to the end user.