Of Stack

AngularJS USES $sce to control code security checks

  • 2020-11-18 06:08:12
  • OfStack

Because browsers have the same loading policy, files in different domains cannot be loaded, nor can they be accessed using unsatisfactory protocols such as file.

In order to avoid security vulnerabilities in angularJs, 1 ng-ES6en or ES7en-ES8en will perform security verification, so it is often encountered that ng-ES11en in 1 iframe cannot be used.

What is a SCE

SCE, strict contextual escaping, my understanding is strict context isolation... The translation may be inaccurate, but by literal interpretation, it should be angularjs's strict control of context access.

Since angular turns SCE on by default, this means that you will default to unsafe behavior such as using a third party script or library, loading a paragraph of html, and so on.

It's safe to do this, avoiding some cross-site XSS, but sometimes we want to load a particular file ourselves, so what do we do?

At this point, you can turn 1 of these addresses into secure, authorized links through the $sce service... Simply put, it's like telling the doorman that this stranger is actually a good friend of mine and is trustworthy enough not to intercept him!

Common methods are:

$sce.trustAs(type,name);
$sce.trustAsHtml(value);
$sce.trustAsUrl(value);
$sce.trustAsResourceUrl(value);
$sce.trustAsJs(value);

The last few are based on the first api. For example, trsutAsUrl actually calls trsutAs($sce.URL,"xxxx").

Where, the optional value of type is:

$sce.HTML
$sce.CSS
sce. href in URL //a tag, src in img tag
$sce.RESOURCE_URL // ES73en-ES74en,src or ngSrc, such as iframe or Object
$sce.JS

Example from the website: ES83en-ES84en-ES85en 


<!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 in action: the ES89en-ES90en 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/");// That's the same thing as this method 
     }]);
  </script>
</body>
</html>

There is still time to introduce the ES95en-ES96en-ES97en directive and the $sce service in angular

One of the strengths of angular js is its bi-directional data binding. The two things we will use frequently are ES104en-ES105en and ES107en-ES108en for form. In our project, however, we encountered a situation where the data returned in the background was tagged with various html tags. Such as:

$scope. currentWork. description = "hello, < br > < b > Where shall we go today? < /b > "
We used ng-ES127en-ES128en to bind, but the result is not what we want. Is this

hello,

Where shall we go today?

What to do?

For the version of angular 1.21 we had to use the $sce service to solve our problem. sce is short for Strict Contextual Escaping. Translated into Chinese, "strict context mode" can also be understood as security binding. Let's see how it works.

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 1 html tag. The results are just as they were 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 be accepted by the privilege and can safely use "ES157en-ES158en-ES159en". So, we have to introduce the $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>

The result appears perfectly on the page:

hello

Where shall we go today?

We can also use it like this, encapsulating it as a filter that 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 and copy them into your notes 


<p ng-bind-html="currentWork.description | to_trusted"></p>
Related articles: