Menu
I was just going through the examples for a angular and openlayers directive HERE and came across the following example:
<!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> The example can be seen as a live example HERE.
My question is about the files being loaded, I don't quite understand why the below script being loaded:
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script> What is the purpose of the above script ?
EDIT:: : i found out the git repo and the docs here for this module in angular HERE. , but i still don't understand the purpose of this script , the documentation does't even have a single example.
I have coded in jQuery a fair bit , so can somebody explain this in jQuery terms ?
321
If you include the angular-sanitize script, inputs are sanitized by parsing the HTML into tokens. All safe tokens (from a whitelist) are then serialized back to properly escaped html string. This means that no unsafe input can make it into the returned string.
Sanitization is the inspection of an untrusted value, turning it into a value that's safe to insert into the DOM. In many cases, sanitization doesn't change a value at all. Sanitization depends on context: A value that's harmless in CSS is potentially dangerous in a URL.
Angular does automatically sanitize content.When a value is inserted into the DOM from a template, via property, attribute, style, class binding, or interpolation, Angular sanitizes and escapes untrusted values.
DomSanitizer helps preventing Cross Site Scripting Security bugs (XSS) by sanitizing values to be safe to use in the different DOM contexts.
If you include the angular-sanitize script, inputs are sanitized by parsing the HTML into tokens. All safe tokens (from a whitelist) are then serialized back to properly escaped html string. This means that no unsafe input can make it into the returned string.
I have included a small example below inspired by this blog post. If you run this script with var app = angular.module("app", ["ngSanitize"]); the html links are rendered correctly. However, if you comment this statement out and uncomment var app = angular.module("app", []); the following error message is raised: 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
