AngularJS verwendet $sce zur Steuerung der Code-Sicherheitsprüfungen

AngularJS verwendet $sce zur Steuerung der Code-Sicherheitsprüfungen_AngularJS

WBOY

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

Original

1102 Leute haben es durchsucht

Da Browser über Laderichtlinien für denselben Ursprung verfügen, können sie keine Dateien in verschiedenen Domänen laden und auch nicht über unbefriedigende Protokolle wie Datei darauf zugreifen.

Um Sicherheitslücken in AngularJs zu vermeiden, werden einige ng-src oder ng-include auf Sicherheit überprüft, sodass es häufig vorkommt, dass ng-src in einem Iframe nicht verwendet werden kann.

Was ist SCE

SCE, das heißt, strikte kontextuelle Flucht, mein Verständnis ist strikte Kontextisolation ... Die Übersetzung ist möglicherweise nicht korrekt, aber durch wörtliches Verständnis sollte es sein, dass AngularJS den Kontextzugriff streng kontrolliert.

Da SCE standardmäßig von Angular aktiviert ist, bedeutet dies, dass einige unsichere Verhaltensweisen standardmäßig verboten sind, z. B. die Verwendung eines Skripts oder einer Bibliothek eines Drittanbieters, das Laden eines HTML-Teils usw.

Das ist zwar sicher und vermeidet einiges an Cross-Site-XSS, aber manchmal möchten wir bestimmte Dateien selbst laden. Was sollen wir in diesem Fall tun?

Zu diesem Zeitpunkt können Sie den $sce-Dienst nutzen, um einige Adressen in sichere und autorisierte Links umzuwandeln ... Einfach ausgedrückt ist es so, als würde man dem Portier sagen, dass dieser Fremde tatsächlich mein guter Freund und sehr vertrauenswürdig ist, also so Es besteht keine Notwendigkeit, es abzufangen!

Häufig verwendete Methoden sind:

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

Die folgenden basieren auf der ersten API. Beispielsweise ruft trsutAsUrl tatsächlich trsutAs($sce.URL,"xxxx");

auf

Der optionale Wert des Typs ist:

$sce.HTML
$sce.CSS
$sce.URL //href in einem Tag, src
im img-Tag $sce.RESOURCE_URL //ng-include,src oder ngSrc, z. B. iframe oder Object
$sce.JS

Beispiel von der offiziellen 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>

Nach dem Login kopieren

Beispiel in Aktion: 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>

Nach dem Login kopieren

Es ist noch etwas Zeit, ich möchte Ihnen die ng-bind-html-Direktive und den $sce-Dienst in Angular vorstellen

Eine der leistungsstarken Funktionen von Angular Js ist die großartige Funktion der bidirektionalen Datenbindung. Zwei Dinge, die wir häufig verwenden, sind ng-bind und ng-model für Formulare. In unseren Projekten werden wir jedoch auf eine solche Situation stoßen: Die vom Hintergrund zurückgegebenen Daten enthalten verschiedene HTML-Tags. Zum Beispiel:

$scope.currentWork.description = „Hallo,
Wohin gehen wir heute?“
Wir verwenden Anweisungen wie ng-bind-html zum Binden, aber das Ergebnis ist nicht das, was wir wollen. Es ist so

Hallo,

Wohin gehen wir heute?

Was tun?

Für Versionen unter Angular 1.2 müssen wir den $sce-Dienst verwenden, um unser Problem zu lösen. Das sogenannte sce ist die Abkürzung für „Strict Contextual Escaping“. Ins Chinesische übersetzt heißt es „strenger Kontextmodus“, der auch als sichere Bindung verstanden werden kann. Mal sehen, wie man es benutzt.

Controller-Code:

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

Nach dem Login kopieren

HTML-Code:

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

Nach dem Login kopieren

Der von uns zurückgegebene Inhalt enthält eine Reihe von HTML-Tags. Die Ergebnisse sind wie am Anfang unseres Artikels erwähnt. An diesem Punkt müssen wir es anweisen, sicher zu binden. Dies kann mit $sce.trustAsHtml() erfolgen. Diese Methode konvertiert den Wert in einen Wert, der von der Berechtigung akzeptiert wird und für die Verwendung mit „ng-bind-html“ sicher ist. Also müssen wir den $sce-Dienst in unserem Controller einführen

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

Nach dem Login kopieren

HTML-Code:

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

Nach dem Login kopieren

Das Ergebnis wird perfekt auf der Seite angezeigt:

Hallo

Wohin gehen wir heute?

Wir können es auch auf diese Weise verwenden, es in einen Filter kapseln und es jederzeit auf der Vorlage aufrufen

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

Nach dem Login kopieren

HTML-Code:

Alle auswählen und in Notizen kopieren

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

Nach dem Login kopieren