Since browsers have same-origin loading policies, they cannot load files in different domains, nor can they access them using unsatisfactory protocols such as file.
In order to avoid security holes in angularJs, some ng-src or ng-include will be checked for security, so it is often encountered that ng-src in an iframe cannot be used.
What is SCE
SCE, that is, strict contextual escaping, my understanding is strict context isolation...The translation may not be accurate, but through literal understanding, it should be that angularjs strictly controls context access.
Since SCE is enabled by angular by default, it means that some unsafe behaviors will be prohibited by default, such as using a third-party script or library, loading a piece of HTML, etc.
This is indeed safe and avoids some cross-site XSS, but sometimes we want to load specific files ourselves, what should we do at this time?
At this time, you can use the $sce service to turn some addresses into safe and authorized links... Simply put, it is like telling the doorman that this stranger is actually my good friend and is very trustworthy, so there is no need to intercept it. !
Commonly used methods are:
$sce.trustAs(type,name);
$sce.trustAsHtml(value);
$sce.trustAsUrl(value);
$sce.trustAsResourceUrl(value);
$sce.trustAsJs(value);
The following ones are based on the first API. For example, trsutAsUrl actually calls trsutAs($sce.URL,"xxxx");
The optional value of type is:
$sce.HTML
$sce.CSS
$sce.URL //href in a tag, src
in 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>
<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>Copy after login
Example in action: ng-src link
<!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>Copy after login
There is still some time, let me introduce to you the ng-bind-html directive and $sce service in angular
One of the powerful features of angular js is its awesome feature of two-way data binding. Two things we often use are ng-bind and ng-model for forms. But in our projects we will encounter such a situation, the data returned by the background contains various html tags. Such as:
$scope.currentWork.description = “hello,
Where are we going today?”
We use instructions like ng-bind-html to bind, but the result is not what we want. It’s like this
hello,
Where are we going today?
What to do?
For versions below angular 1.2, we must use the $sce service to solve our problem. The so-called sce is the abbreviation of "Strict Contextual Escaping". Translated into Chinese is "strict context mode" which can also be understood as safe binding. Let’s see how to use it.
controller code:
$http.get('/api/work/get?workId=' + $routeParams.workId).success(function (work) {$scope.currentWork = work;});Copy after login
HTML code:
<p> {{currentWork.description}}</p>Copy after login
The content we return contains a series of html tags. The results are as mentioned at the beginning of our article. At this point we have to tell it to bind securely. It can be done by using $sce.trustAsHtml(). This method converts the value to one that is accepted by the privilege and safe for use with "ng-bind-html". So, 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);
});Copy after login
html code:
<p ng-bind-html="currentWork.description"></p>
Copy after login
The result will be perfectly displayed on the page:
hello
Where are we going today?
We can also use it this way, encapsulate it into a filter and call it on the template at any time
app.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}]);Copy after login
html code:
Select all and copy them into notes
<p ng-bind-html="currentWork.description | to_trusted"></p>
Copy after login
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
