Detailed Angularjs $sce and $scedelegate context escape service _angularjs

A strict context-escaping service

Strict context escaping (SCE) is a pattern that requires a certain context in which Angularjs bound values are marked as safe usage contexts.ng-bind-htmla user-bound arbitrary HTML statement is an example of this. We call these contexts escaped as privileges or SCE.

Second, $SCE

$SCE Service is a strict context-escaping service provided by ANGULARJS.

The following code is a simplified ngbindhtml implementation (of course, this is not a full version of ngbindhtml source):

 var ngbindhtmldirective = [' $sce ', function ($SCE) {return
 function (scope, element, attr) {
 scope. $watch ($ Sce.parseashtml (attr.ngbindhtml), function (value) {
  element.html (value | | '');
 });
 };
 }];

Which trust context types are supported?

$sce.HTML Bind the HTML code securely to the application.

$sce.CSSSecurely bind CSS style code to your application.

$sce.URLBind the URL securely to the application and make sure it is available. For example (HREF,SRC)

$sce.RESOURCE_URLBind the Resource_url securely to the application and make sure it is available. For example (NG-HREF,NG-SRC)

$sce.JSBind JavaScript code securely to your application.

How do I make the $SCE service available or unavailable?

 Angular.module ("myApp", []). config (["$sceProvider", function ($sceProvider) {
 $sceProvider. Enabled (True/false) ;
 }]);

Use:$sce();

Method:

IsEnabled ();

Returns a Boolean that indicates whether the SCE can be enabled.

parseAs(type,expression);

Converts a angular expression to a function. This is similar to $parse parsing and is the same when an expression is a constant. Otherwise, it will invoke$sce.getTrusted(type,result)the wrapping of the expression.

Type: the kind of result used in the context of the SCE.

Expression: A string expression that is compiled.

trustAs(type,value);

Represents $scedelegate.trustas.

Type: Values that can be used securely in the context, such as Url,resourceurl,html,js and CSS.

Value: values that need to be considered a security or value trust.

trustAsHtml(value);

$sceDelegate. Trustas ($sce. Html,value) shortcuts.

Value: The values that are trusted.

trustAsUrl(value);

$sceDelegate. Trustas ($sce. Url,value) shortcuts.

Value: The values that are trusted.

trustAsResourceUrl(value);

$sceDelegate. Trustas ($sce. Resource_url,value) shortcuts.

Value: The values that are trusted.

trustAsJs(value);

$sceDelegate. Trustas ($sce. Js,value) shortcuts.

Value: The values that are trusted.

getTrusted(type,maybeTrusted);

Represents $scedelegate.gettrusted. Therefore, the results of $SCE are obtained. If the context type of the query is a type of creation, call Trustas () and return the value originally supplied. If this condition is not satisfied, an exception is thrown.

getTrustedHtml(value);

$sceDelegate. gettrusted ($sce. Html,value) shortcuts.

Value: The values that are executed by $sce.gettrusted.

getTrustedCss(value);

$sceDelegate. gettrusted ($sce. Css,value) shortcuts.

Value: The values that are executed by $sce.gettrusted.

getTrustedUrl(value);

$sceDelegate. gettrusted ($sce. Url,value) shortcuts.

Value: The values that are executed by $sce.gettrusted.

getTrustedResourceUrl(value);

$sceDelegate. gettrusted ($sce. Resource_url,value) shortcuts.

Value: The values that are executed by $sce.gettrusted.

getTrustedJs(value);

$sceDelegate. gettrusted ($sce. Js,value) shortcuts.

Value: The values that are executed by $sce.gettrusted.

parseAsHtml(expression);

$sce. Parseas ($sce. Html,value) shortcuts.

Value: A string expression that is compiled.

parseAsCss(expression);

$sce. Parseas ($sce. Css,value) shortcuts.

Value: A string expression that is compiled.

parseAsUrl(expression);

$sce. Parseas ($sce. Url,value) shortcuts.

Value: A string expression that is compiled.

parseAsResourceUrl(expression);

$sce. Parseas ($sce. Resource_url,value) shortcuts.

Value: A string expression that is compiled.

parseAsJs(expression);

$sce. Parseas ($sce. Js,value) shortcuts.

Value: A string expression that is compiled.

How to use:

 <div ng-app= "Demo" ng-controller= "Testctrl as Ctrl" >
 <textarea ng-model= "Ctrl.jscontext" ></ textarea>
 <pre ng-bind= "Ctrl.jsbody" ></pre>
 <button ng-click= "Ctrl.runjs ()" >Run< /button>
 <div ng-bind-html= "Ctrl.htmltext" class= "Mycss" ></div>
 </div>

 (function () {
 angular.module (' Demo ', [])
 . Controller (' Testctrl ', ["$sce", "$scope", Testctrl]);
 function Testctrl ($SCE, $scope) {
  var vm = this;
  $scope. $watch ("Ctrl.jscontext", function (n) {
  vm.jsbody = n;
  });
  This.runjs = function () {
  eval (vm.jsBody.toString ());
  Vm.htmltext = "

Put in filter use:

 <div ng-app= "Demo" ng-controller= "Testctrl as Ctrl" >
 <div ng-bind-html= "ctrl.htmltext | Trust: ' HTML '" ></div>
 </div>

 (function () {
 angular.module (' Demo ', [])
 . Filter ("Trust", ["$sce", trust])
 . Controller (' Testctrl ', Testctrl);
 Function Trust ($SCE) {return
  function (value,type) {return
  $sce. Trustas (Type,value); 
  }
 ;
 function Testctrl () {
  this.htmltext = "

Above is an example of an HTML code string that will not be trusted by angular as an HTML code that is set to trust by $SCE and inserted, here with a little trick that is not done in controller, directly into a filter service, As long as the need to filter the place, and can specify the type, here written as a unified dynamic selection type. So when do you need to use these two services? When using the ng-bind-html bind HTML times Error: Error: [$SCE: unsafe]attempting to use an unsafe value in a safe context. Time to use.

Third, $sceDelegate

$sceDelegate is a ANGULARJS service that provides a strict context escape service for the $SCE service.

Typically, you will configure or rewrite $scedelegate to replace the $SCE service to customize the strict context-escaping mechanism in ANGULARJS. When $sce offers a number of shortcuts, you actually need to rewrite only three core functions (trustas,gettrusted and valueof) to replace how the event works, because $SCE represents these actions for $scedelegate.

When you have finished rewriting or configuring $scedelegate to change the behavior of $SCE, in general, you need to configure $scedelegateprovider to replace the whitelist and blacklist you use to load trusted ANGULARJS resources such as template.

Use:$sceDelegate();

Method:

trustAs(type,value);

Returns an object that is used in the angular as the specified value in the context of the service context that uses strict contexts.

Type: Values that can be used securely in the context, such as Url,resourceurl,html,js and CSS.

Value: values that need to be considered a security or value trust.

valueOf(value);

If the passed parameter is returned by the previous$sceDelegate.trustAscall, the passed value is returned$sceDelegate.trustAs. Otherwise, the original value is returned.

Value:$sceDelegate.trustAsThe result of the previous call or any other result.

getTrusted(type,maybeTrusted);

If the context type of the query is a type of creation, get the result of the $scedelegate call and return the value originally supplied. If this condition is not satisfactory, throw an exception.

Type: the kind of value that needs to be used.

Value:$sceDelegate.trustAsThe result of the previous call or any other result.

Use code (configure Whitelist/blacklist):

 Angular.module (' myApp ', []). config (["$ Scedelegateprovider", function ($sceDelegateProvider) {
 $ Scedelegateprovider.resourceurlwhitelist (["Whitelist value"]);
 $sceDelegateProvider. Resourceurlblacklist (["Blacklist value"]);
 

Summarize

The above is the entire content of this article, I hope to be able to learn or work to bring certain help, if there is doubt you can message exchange.