AngularJS uses $sce to control code security checks

AngularJS uses $sce to control code security checks_AngularJS

WBOY

Release： 2016-05-16 15:21:47

Original

1083 people have browsed it

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&#63;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&#63;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