Question

19

What is the purpose of angular-sanitize ?

rated 0 times [ 22] [ 3] / answers: 1 / hits: 45618 / 9 Years ago, mon, october 19, 2015, 12:00:00

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 ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

joannam

Add To Favorites

Follow

Total Points: 331

Total Questions: 106

Total Answers: 105

Location: Sweden

Member since Mon, May 8, 2023

1 Year ago

answered 9 Years ago margaritakristinak · Accepted Answer

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>