Home > Developer > JavaScript
AngularJS uses $ sce to control code security checks, and angularjssce
Because browsers all have same-source loading policies, files in different domains cannot be loaded or accessed using an undesired protocol such as file.
To avoid security vulnerabilities in angularJs, some ng-src or ng-include perform security verification. Therefore, ng-src in an iframe is often unavailable.
What is SCE?
SCE, that is, strict contextual escaping. My understanding is that strict context isolation... translation may be inaccurate, but through literal understanding, angularjs strictly controls context access.
Angular enables SCE by default, which means that some insecure behaviors will be eliminated by default. For example, you have used a third-party script or library, loaded a piece of html, and so on.
This is indeed safe to avoid cross-site XSS, but sometimes we want to load specific files on our own. What should we do at this time?
At this time, you can use the $ sce service to convert some addresses into secure and authorized links... simply put, it is like telling the guard that this stranger is actually a good friend of mine. It is trustworthy and does not have to be intercepted!
Common methods include:
$ Sce. trustAs (type, name );
$ Sce. trustAsHtml (value );
$ Sce. trustAsUrl (value );
$ Sce. trustAsResourceUrl (value );
$ Sce. trustAsJs (value );
The following are all used based on the first api. For example, trsuasurl actually calls trsuas ($ sce. URL, "xxxx ");
The optional value of type is:
$ Sce. HTML
$ Sce. CSS
$ Sce. URL // href in the tag, src in the img tag
$ Sce. RESOURCE_URL // ng-include, src or ngSrc, such as iframe or Object
$ Sce. JS
Example from the official website: ng-bind-html
<!DOCTYPE html>Example in actual work: ng-src Link
<! DOCTYPE html>Let's take a moment to introduce the ng-bind-html commands and $ sce services in angular.
One of the strengths of angular js is its two-way data binding feature. We often use ng-bind and ng-model for form. However, we may encounter such a situation in our project. The data returned in the background contains various html tags. For example:
$ Scope. currentWork. description = "hello, <br> <B> where are we going today? </B>"
We use commands such as ng-bind-html to bind, but the result is not what we want. Yes.Hello,
Where are we going today?
What should we do?
For angular 1.2, we must use the $ sce service to solve our problem. Sce stands for "Strict Contextual Escaping. Translation into Chinese is "strict context mode", which can also be understood as secure binding. Let's see how to use it.
Controller code:
$http.get('/api/work/get?workId=' + $routeParams.workId).success(function (work) {$scope.currentWork = work;});HTML code:
<p> {{currentWork.description}}</p>The returned content contains a series of html tags. The results are shown as we mentioned at the beginning of the article. At this time, we must inform it of secure binding. You can use $ sce. trustAsHtml (). This method converts the value to accepted by the privilege and securely uses "ng-bind-html ". Therefore, we must introduce the $ sce service in our controller.
controller('transferWorkStep2', ['$scope','$http','$routeParams','$sce', function ($scope,$http, $routeParams, $sce) {$http.get('/api/work/get?workId=' + $routeParams.workId).success(function (work) { $scope.currentWork = work; $scope.currentWork.description = $sce.trustAsHtml($rootScope.currentWork.description);});Html code:
<p ng-bind-html="currentWork.description"></p>In this way, the results are perfectly displayed on the page:
Hello
Where are we going today?
We can also use it like this to encapsulate it into a filter so that it can be called on the template at any time.
app.filter('to_trusted', ['$sce', function ($sce) {return function (text) { return $sce.trustAsHtml(text);};}]);Html code:
Select All copies and put them in notes
<p ng-bind-html="currentWork.description | to_trusted"></p>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
