2015-10-19 15 views
13

właśnie przeżywa przykładów dla kanciasty i dyrektywą OpenLayers HERE i natknąłem się na następującym przykładzie:Do czego służy sanityzacja kątowa?

<!DOCTYPE html> 
<html ng-app="demoapp"> 
    <head> 
    <script src="../bower_components/openlayers3/build/ol.js"></script> 
    <script src="../bower_components/angular/angular.min.js"></script> 
    <script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script> 
    <script src="../dist/angular-openlayers-directive.js"></script> 
    <link rel="stylesheet" href="../bower_components/openlayers3/build/ol.css" /> 
    <script> 
     var app = angular.module('demoapp', ['openlayers-directive']); 
     app.controller('DemoController', [ '$scope', function($scope) { 
      angular.extend($scope, { 
       center: { 
        lat: 0, 
        lon: 0, 
        autodiscover: true 
       } 
      }); 
     }]); 
    </script> 
    </head> 
    <body ng-controller="DemoController"> 
    <openlayers ol-center="center" height="400px"></openlayers> 
    <h1>Center autodiscover example</h1> 
    <form> 
     Latitude : <input type="number" step="any" ng-model="center.lat" /> 
     Longitude : <input type="number" step="any" ng-model="center.lon" /> 
     Zoom : <input type="number" step="any" ng-model="center.zoom" /> 
     <button ng-click="center.autodiscover=true">Discover position</button> 
    </form> 
    </body> 
</html> 

Przykładem może być postrzegane jako przykład żywej HERE.

Moje pytanie dotyczy ładowanych plików, ja nie bardzo rozumiem dlaczego poniższy skrypt ładowany:

<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script> 

Co jest celem powyższego skryptu?

EDIT ::: Dowiedziałem się repo git i docs tutaj dla tego modułu w kątowym HERE. , ale nadal nie rozumiem celu tego skryptu, dokumentacja nie ma nawet jednego przykładu.

Mam kodowane w jQuery trochę, więc może ktoś wyjaśnić to w warunkach jQuery?

Odpowiedz

23

Dołączając skrypt angular-sanitize, dane wejściowe są odkażane przez analizowanie kodu HTML na tokeny. Wszystkie bezpieczne tokeny (z białej listy) są następnie przekształcane do postaci seryjnej z powrotem do poprawnie ukrytego łańcucha html. Oznacza to, że żadne niebezpieczne wejście nie może go wprowadzić do zwróconego ciągu.

Załączam mały przykład poniżej zainspirowany tym blog post. Jeśli uruchomisz ten skrypt za pomocą var app = angular.module("app", ["ngSanitize"]);, linki html będą renderowane poprawnie. Jeśli jednak skomentować to stwierdzenie z odkomentowane var app = angular.module("app", []); następujący komunikat o błędzie jest podniesione: Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js"></script> 
 
    <!-- BEGIN disable refresh --> 
 
    <script type="text/javascript"> 
 
    //Including ngSanitize ensures html links get properly sanitized 
 
    var app = angular.module("app", ["ngSanitize"]); 
 
    //If you use this code instead no html links get displayed 
 
    //var app = angular.module("app", []); 
 

 
    app.controller("mainController", function($scope) { 
 
     var main = this; 
 

 
     main.links = [ 
 
     "<a href='http://google.com'>Google</a>", 
 
     "<a href='http://odetocode.com'>OdeToCode</a>", 
 
     "<a href='http://twitter.com'>Twitter</a>" 
 
     ]; 
 
    }); 
 
    </script> 
 

 
</head> 
 

 
<body ng-app="app"> 
 
    <section ng-controller="mainController as main"> 
 
    <nav> 
 
     <ul> 
 
     <li ng-repeat="link in main.links" ng-bind-html="link"> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </section> 
 
</body> 
 

 
</html>

+0

dzięki, można dać mały przykład? –

+1

Czy to oznacza, że ​​'ng-sanitize' jest użyteczny tylko w przypadkach, w których dane wejściowe html są dynamiczne lub pochodzą z danych wejściowych klienta? Więc kiedy używamy tylko statycznych htmlów i szablonów (z naszej własnej zaufanej domeny (https) lub z pamięci podręcznej szablonów) do ładowania html w naszych widokach/dyrektywach, nie ma potrzeby "ng-sanitize"? Czy są inne przypadki, w których powinno się stosować 'ng-sanitize'. – Wilt

+1

'ng-sanitize' nie jest potrzebny do statycznego html, ale powinien być użyty, gdy dane wejściowe html są dynamiczne lub pochodzą z danych wejściowych klienta, bezpośrednio lub pośrednio. – Jaco