Home > Developer > Web Develop

Angular ng-bind-html $sce. trustashtml

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

displaying HTML-signed content using ng-bind-html and $sce.trustashtmlAngularjs in the data binding by default will be in the form of text output, that is, the HTML tags in your data are not escaped the full receipt, so as to improve security, prevent injection attacks in HTML tags, but sometimes needed, especially when reading formatted text from the database, cannot be displayed correctly on the page. To escape HTML, use the Ng-bind-html property in the HTML tag of the data binding, which is dependent on the $sanitize, That is, you need to introduce the Angular-sanitize.js file and inject the service Ngsanitize when the module is defined. For example: HTML: 
 <  span  ng-controller  = "myctr"   ng-bind-html  = "Htmlstr"  ></ span  >  javascript:function myctr ($scope) {$scope. htmlstr = '  <  p  style  = "color:red;font-size=18px;"  ></ p  >
This allows for HTML escaping, but one problem is that the style tag is automatically filtered out by Angularjs, and in order to preserve it, you need to turn on non-secure mode. can be resolved by angular's own $sce service. $sce is Angularjs's own security processing module, $SCE. trustashtml (Input) method is to parse and return the contents of the data in HTML form. For example: 
<Divng-repeat= "article in articles">  <Divclass= "Panel-heading">  <h4><b>{{Article.title}}</b></h4>  </Div>  <Divclass= "Panel-body">  <articleID= "Word-display"ng-bind-html= "Article.content | trusthtml">  </article>  </Div>  </Div>
Javascript: 
Success (function  (data) {  = data;}); Myapp.filter (function  ($SCE) {  returnfunction  (input) {   return  $sce. trustashtml (input);  }  });
You can also use the $sanitize service, $sanitize will eliminate a whitelist to purify HTML tags. In this way, unsafe content is not returned. The whitelist is based on $compileprovider's ahrefsanitizationwhitelist and imgsrcsanitizationwhitelist functions. Post a code: 
<!DOCTYPE HTML><HTMLNg-app= "MYAPP"><Head>  <title></title>  <MetaCharSet= "Utf-8">  <Scriptsrc=".. /angular-1.3.2.js "></Script>  <Scriptsrc= "Angular-sanitize.min.js"></Script>  <Scriptsrc= "Script.js"></Script>  <Linktype= "Text/css"href=".. /bootstrap.css "rel= "stylesheet" /></Head><Body><Divclass= "Container">  <Tableclass= "Table table-bordered"Ng-controller= "Ctrl">  <caption>Parsing HTML through the $sanitize service of the Ngsanitize module</caption>  <thead>  <TR>  <th>Instructions for use</th>  <th>Method of formatting</th>  <th>The wording of the instruction</th>  <th>Parsing results</th>  </TR>  </thead>  <tbody>  <TR>  <TD>Ng-bind-html</TD>  <TD>Use the built-in $sanitize<BR/>(no need to appear in JS, as long as the model adds the Ngsanitize module,<BR/>Then using ng-bind-html, its value is automatically compiled by $sanitize)</TD>  <TD><Pre>&lt;Div ng-bind-html= "myhtml"&gt;<BR>&lt;/div&gt;</Pre></TD>  <TD><Divng-bind-html= "Myhtml"></Div></TD>  </TR>  <TR>  <TD>Ng-bind-html</TD>  <TD>Compiling using $sce's Trustashtml method<BR/>(Will be fine to speak $SCE service, here is not the focus)</TD>  <TD><Pre>&lt;Div ng-bind-html= "trusthtml"&gt;<BR>&lt;/div&gt;</Pre></TD>  <TD><Divng-bind-html= "trusthtml"></Div></TD>  </TR>  <TR>  <TD>Ng-bind</TD>  <TD>Do not compile</TD>  <TD><Pre>&lt;Div ng-bind= "myhtml"&gt;<BR>&lt;/div&gt;</Pre></TD>  <TD><DivNg-bind= "Myhtml"></Div></TD>  </TR>  </tbody>  </Table>  <aclass= "Btn Btn-default"href= "Http://plnkr.co/edit/3FBasliZTRjKs3jwTpoR?p=preview"role= "button">Plunker</a></Div></Body></HTML>
JS section: 
var app =angular.module (' myApp ', [' ngsanitize ']); App.controller (' ctrl ',function($ Scope, $SCE) {  = ' <p style= ' color:blue ' >an html\n ' +  ' <em onclick= ' this.textcontent=\ ' Code_ Bunny\ ' ">click here</em>\n ' +  ' snippet</p> ';   = $sce. trustashtml ($scope. myhtml)});
Compare the results of these three scenarios: the specific results can be seen: http://plnkr.co/edit/3FBasliZTRjKs3jwTpoR?p=previewng-bind-html If you use the built-in $sanitize service, then $ The sanitize will automatically purify the myhtml. $sanitize will remove the attributes of the tag, as well as the events bound on the element. Only labels and content are retained. ng-bind-html if the subsequent return value is processed through $sce.trustashtml (), It is no longer purified by the $sanitize service. The. html () directly as an element is bound to an element, preserving all properties and events, and the contents of this line are not dependent on the Ngsanitize module, $sce the service is built-in. When using the Ng-bind Directive, The bound value is populated as a string into the element using ng-bind-html, which is easily caused by XSS (script injection attacks), which is described later.

Angular ng-bind-html $sce. trustashtml

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More