2015-10-19 3 views
13

я только собирался через примеры для угловых и OpenLayers директивы HERE и наткнулся на следующем примере:Какова цель угловой санитации?

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

пример можно рассматривать в качестве живого примера HERE.

Мой вопрос о том, загружаются файлы, я не совсем понимаю, почему ниже скрипт загружается:

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

Какова цель этого скрипта?

EDIT ::: я узнал GIT репозиторий и документы здесь для этого модуля в угловом HERE. , но я все еще не понимаю цели этого скрипта, в документации нет даже одного примера.

Я закодировал в jQuery честный бит, так может кто-нибудь объяснить это в терминах jQuery?

ответ

23

Если вы включаете скрипт angular-sanitize, входные данные дезинфицируются путем анализа HTML в токенах. Все безопасные маркеры (из белого списка) затем сериализуются обратно в правильно экранированную строку html. Это означает, что никакой небезопасный ввод не может попасть в возвращаемую строку.

Я включил небольшой пример ниже, вдохновленный этим blog post. Если вы запустите этот скрипт с помощью var app = angular.module("app", ["ngSanitize"]);, ссылки html отображаются правильно. Однако, если вы прокомментируете это заявление, и раскомментируйте var app = angular.module("app", []); следующее сообщение об ошибке возникает: 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

спасибо, вы можете дать небольшой пример? –

+1

Означает ли это, что 'ng-sanitize' полезен только в тех случаях, когда вход html является динамическим или происходит от ввода клиента? Поэтому при использовании только статических URL-адресов html и шаблонов (из нашего собственного доверенного домена (https) или кэша шаблонов) для загрузки html в наших представлениях/директивах нет необходимости в 'ng-sanitize'? Или существуют другие случаи, когда следует использовать «ng-sanitize». – Wilt

+1

'ng-sanitize' не требуется для статического html, но его следует использовать, когда вход html является динамическим или поступает с входа клиента прямо или косвенно. – Jaco

Смежные вопросы