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.