Angular--$sce and $sceDelegate

$sce

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

Strict context-escaping service

Strict context escaping (SCE) is a pattern that requires a context in which Angularjs bound values are marked as safe to use. An example of this is the binding of arbitrary HTML statements by the user through ng-bind-html. We call these contexts escaped as privileged or SCE.

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

  function($sce) {      functionfunction(value) {element.html (value | | "); }); }; }];

Which trust context types are supported?

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

$sce. CSS binds CSS style code securely to the application.

$sce. The URL securely binds the URL to the application and guarantees it is available. For example (HREF,SRC)

$sce. Resource_url binds the resource_url securely to the application and guarantees it is available. For example (NG-HREF,NG-SRC)

$sce. JS securely binds JavaScript code to the application.

How can 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 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 constant. Otherwise, it will call $sce.gettrusted (Type,result) to wrap the expression.

Type: The types of results used in the context of the SCE.

Expression: The string expression that was compiled.

Trustas (Type,value);

Represents $scedelegate.trustas.

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

Value: You need to be considered a safe or a value of trust.

trustashtml (value);

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

Value: The values that are trusted.

Trustasurl (value);

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

Value: The values that are trusted.

Trustasresourceurl (value);

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

Value: The values that are trusted.

Trustasjs (value);

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

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 creative type, call Trustas () and return the value originally provided. If this condition is not met, an exception is thrown.

gettrustedhtml (value);

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

Value: Values after execution by $sce.gettrusted.

Gettrustedcss (value);

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

Value: Values after execution by $sce.gettrusted.

Gettrustedurl (value);

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

Value: Values after execution by $sce.gettrusted.

Gettrustedresourceurl (value);

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

Value: Values after execution by $sce.gettrusted.

Gettrustedjs (value);

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

Value: Values after execution by $sce.gettrusted.

parseashtml (expression);

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

Value: The string expression that was compiled.

PARSEASCSS (expression);

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

Value: The string expression that was compiled.

Parseasurl (expression);

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

Value: The string expression that was compiled.

Parseasresourceurl (expression);

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

Value: The string expression that was compiled.

PARSEASJS (expression);

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

Value: The string expression that was compiled.

How to use:

  <DivNg-app= "Demo"Ng-controller= "Testctrl as CTRL"><TextAreaNg-model= "Ctrl.jscontext"></TextArea><PreNg-bind= "Ctrl.jsbody"></pre> <button ng-click= "Ctrl.runjs ()" >run</button< Span style= "color: #0000ff;" >> <div = "Ctrl.htmltext"  Class= "Mycss" ></div > </div>                 

 (function,testctrl]); function Testctrl ($sce, $scope) {var vm = thisfunction (n) {vm.jsbody = n;}); vm.runjs = function () {eval (vm.jsBody.toString ());}; vm.htmltext ="  Vm.htmltext = $sce. trustashtml (Vm.htmltext);}} ()); 

Put in filter using:

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

 (function

Above is an HTML code string that will not be recognized as trusted by angular through the $SCE set to the trusted HTML code and insert the example, here is a small trick, it is not in the controller to do this step, directly into a filter service, As long as you filter it where you want it, and you can specify a type, it's written as a unified dynamic selection type. So when do you need these two services, the answer is when you bind the ng-bind-html times wrong: error: [$SCE: Unsafe]attempting to uses an unsafe value in a safe context. The time. haha ~ ~ ~

$sceDelegate

$sceDelegate is a service that ANGULARJS provides strict context-escaping services for $SCE services.

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 multitude of shortcuts, you actually only need to rewrite the three core features (trustas,gettrusted and valueof) to override the way events work, because $SCE represents these actions for $scedelegate.

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

Use : $sceDelegate ();

Method :

Trustas (Type,value);

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

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

Value: You need to be considered a safe or a value of trust.

ValueOf (value);

If the passed parameter is returned by a previous $scedelegate.trustas call, returns the value passed $scedelegate.trustas. Otherwise, the original value is returned.

Value: The result of the previous $scedelegate.trustas call or any other result.

Gettrusted (type,maybetrusted);

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

Type: Types of values that need to be used.

Value: The result of the previous $scedelegate.trustas 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"]);  }]); 

After writing to sleep--. -This preparation for two days, in Google to find some more detailed information on the following, and then write a general Chinese, and then write the demo, but feel this related article more is more, write the copy of the source code, note 2-3 sentence is almost, not as practical to a demo, So throw it straight up. Two serial test after the successful code ...

Angular--$sce and $sceDelegate