AngularJS utilise $sce pour contrôler les contrôles de sécurité du code

AngularJS utilise $sce pour contrôler les contrôles de sécurité du code_AngularJS

WBOY

Libérer： 2016-05-16 15:21:47

original

1083 Les gens l'ont consulté

Étant donné que les navigateurs ont des politiques de chargement de même origine, ils ne peuvent pas charger de fichiers dans des domaines différents, ni y accéder en utilisant des protocoles insatisfaisants tels que file.

Afin d'éviter les failles de sécurité dans angulaireJs, certains ng-src ou ng-include seront vérifiés pour la sécurité, il arrive donc souvent que ng-src dans une iframe ne puisse pas être utilisé.

Qu'est-ce que le SCE

SCE, c'est-à-dire un échappement contextuel strict, ma compréhension est une isolation stricte du contexte... La traduction n'est peut-être pas exacte, mais grâce à une compréhension littérale, il devrait être qu'angularjs contrôle strictement l'accès au contexte.

Étant donné que SCE est activé par défaut par angulaire, cela signifie que certains comportements dangereux seront interdits par défaut, comme l'utilisation d'un script ou d'une bibliothèque tierce, le chargement d'un morceau de code HTML, etc.

C'est effectivement sûr et évite certains XSS intersites, mais parfois nous voulons charger nous-mêmes des fichiers spécifiques, que devons-nous faire dans ce cas ?

En ce moment, vous pouvez utiliser le service $sce pour transformer certaines adresses en liens sûrs et autorisés... En termes simples, c'est comme dire au portier que cet inconnu est en fait mon bon ami et qu'il est très digne de confiance, alors là il n'est pas nécessaire de l'intercepter !

Les méthodes couramment utilisées sont :

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

Les suivants sont basés sur la première API. Par exemple, trsutAsUrl appelle en fait trsutAs($sce.URL,"xxxx");

La valeur facultative du type est :

$sce.HTML
$sce.CSS
$sce.URL //href dans une balise, src
dans la balise img $sce.RESOURCE_URL //ng-include,src ou ngSrc, tel que iframe ou Object
$sce.JS

Exemple tiré du site officiel : 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>

Copier après la connexion

Exemple en action : lien ng-src

<!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>

Copier après la connexion

Il reste encore du temps, laissez-moi vous présenter la directive ng-bind-html et le service $sce en angulaire

L'une des fonctionnalités puissantes d'angular js est sa fonctionnalité impressionnante de liaison de données bidirectionnelle. Deux éléments que nous utilisons souvent sont ng-bind et ng-model pour les formulaires. Mais dans nos projets, nous rencontrerons une telle situation, les données renvoyées par l'arrière-plan contiennent diverses balises html. Tel que :

$scope.currentWork.description = « bonjour,
Où allons-nous aujourd'hui ? »
Nous utilisons des instructions telles que ng-bind-html pour effectuer la liaison, mais le résultat n'est pas celui que nous souhaitons. C'est comme ça

Bonjour,

Où allons-nous aujourd'hui ?

Que faire ?

Pour les versions inférieures à angulaire 1.2, nous devons utiliser le service $sce pour résoudre notre problème. Ce qu'on appelle sce est l'abréviation de « Strict Contextual Escapeping ». Traduit en chinois, il s'agit du « mode contexte strict » qui peut également être compris comme une liaison sécurisée. Voyons comment l'utiliser.

code du contrôleur :

$http.get('/api/work/get&#63;workId=' + $routeParams.workId).success(function (work) {$scope.currentWork = work;});

Copier après la connexion

Code HTML :

<p> {{currentWork.description}}</p>

Copier après la connexion

Le contenu que nous renvoyons contient une série de balises html. Les résultats sont tels que mentionnés au début de notre article. À ce stade, nous devons lui dire de se lier en toute sécurité. Cela peut être fait en utilisant $sce.trustAsHtml(). Cette méthode convertit la valeur en une valeur acceptée par le privilège et pouvant être utilisée en toute sécurité avec "ng-bind-html". Il faut donc introduire le service $sce dans notre contrôleur

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);
});

Copier après la connexion

Code HTML :

<p ng-bind-html="currentWork.description"></p>

Copier après la connexion

Le résultat sera parfaitement affiché sur la page :

Bonjour

Où allons-nous aujourd'hui ?

On peut aussi l'utiliser de cette façon, l'encapsuler dans un filtre et l'appeler sur le template à tout moment

app.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
  return $sce.trustAsHtml(text);
};
}]);

Copier après la connexion

Code HTML :

Sélectionnez tout et copiez-les dans des notes

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

Copier après la connexion