Because browsers have a homologous load policy, you cannot load files under different domains, and you cannot use an incompatible protocol such as file for access.
In order to avoid security vulnerabilities in Angularjs, some ng-src or ng-include will perform security checks, so it is often encountered that ng-src in an IFRAME cannot be used.
What is SCE
SCE, that strict contextual escaping, my understanding is strict context isolation ... Translation may not be accurate, but by literal understanding, it should be Angularjs strict control context access.
Since the angular is enabled by default, it means that the default is to deny some unsafe behavior, such as using a Third-party script or library, loading a piece of HTML, and so on.
It's really safe to avoid some cross-site XSS, but sometimes we want to load specific files ourselves.
At this point, you can turn some addresses into secure, authorized links via the $sce service ... To put it simply, it's like telling the doorman that this stranger is actually a good friend of mine who is trustworthy enough not to intercept it!
The common methods are:
$sce. Trustas (Type,name);
$sce. trustashtml (value);
$sce. Trustasurl (value);
$sce. Trustasresourceurl (value);
$sce. Trustasjs (value);
The following are all based on the first API, such as Trsutasurl actually calls Trsutas ($sce. URL, "xxxx");
The optional values for the type are:
$sce. Html
$sce. Css
$sce. URL//a the href in the tag, the SRC in the img tag
$sce. Resource_url//ng-include,src or NGSRC, like an IFRAME or an object.
$sce. Js
Example from the official website: ng-bind-html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="mySceApp">
<div ng-controller="AppController">
<i ng-bind-html="explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i>
</div>
<script type="text/javascript">
angular.module('mySceApp',[])
.controller('AppController', ['$scope', '$sce',
function($scope, $sce) {
$scope.explicitlyTrustedHtml = $sce.trustAsHtml(
'<span onmouseover="this.textContent="Explicitly trusted HTML bypasses ' +
'sanitization."">Hover over this text.</span>');
}]);
</script>
</body>
</html>
Examples of practical work: NG-SRC links
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="mySceApp">
<div ng-controller="AppController">
<iframe width="100%" height="100%" seamless frameborder="0" ng-src="{{trustSrc}}"></iframe>
</div>
<script type="text/javascript">
angular.module('mySceApp',[])
.controller('AppController', ['$scope','$sce',function($scope,$sce) {
$scope.trustSrc = $sce.trustAs($sce.RESOURCE_URL,"http://fanyi.youdao.com/");
// $scope.trustSrc = $sce.trustAsResourceUrl("http://fanyi.youdao.com/");//等同于这个方法
}]);
</script>
</body>
</html>
There's still time, and then we'll introduce the ng-bind-html instructions and $SCE services in angular.
Angular JS is one of the strengths of his data two-way binding this cow B function, we will often use two things is ng-bind and for the form of the Ng-model. However, in our project we will encounter a situation where the data returned in the background with a variety of HTML tags. Such as:
$scope. currentwork.description = "hello,<br><b> where are we going today?" </b> "
We use ng-bind-html to bind, and the result is not what we want. That is true
Hello
Where are we going today?
What do we do?
For the angular 1.2 version we have to use the $SCE service to solve our problems. The so-called SCE is the abbreviation of "Strict contextual escaping". Translated into Chinese is "strict context mode" can also be understood as a security binding bar. 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 content we return contains a series of HTML tags. The results appear as we said at the beginning of our article. That's when we have to tell IT security bindings. It can be done by using $ sce.trustashtml (). This method converts a value to a privilege and can safely use "ng-bind-html". So, we have to introduce $SCE service into 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>
This results in a perfect presentation on the page:
Hello
Where are we going today?
We can also use this to encapsulate it into a filter that can be invoked at any time on the template.
App.filter (' to_trusted ', [' $sce ', function ($SCE) {return
function (text) {return
$sce. trustashtml (text);
} ;
}]);
HTML code:
Select all copies into your 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
