Angular.js aHrefSanitizationWhitelist not working?

Question

I'm experimenting a little bit with the basic Angular.js tutorial, but I'm having trouble trying to set up the url-schema's whitelist.

Basically I'm trying to add a custom scheme (cust-scheme) to the whitelist of angular, in order to avoid it from prefixing urls with unsafe:.

According to this StackOverflow's answer, I just need to add $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|cust-scheme):/); to the config parameters of the app.

I tried the following:

'use strict';

/* App Module */

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'ngSanitize',
  'phonecatAnimations',

  'phonecatControllers',
  'phonecatFilters',
  'phonecatServices'
]);

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }],
  ['$compileProvider',
  function( $compileProvider ) {   
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|cust-scheme):/);
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|cust-scheme):/);
  }
]);

but it doesn't work. The routing is fine but the cust-scheme schema is not whitelisted. Is there anything I'm missing? Perhaps I'm doing the multiple configurations thing wrong?

I also tried the following:

'use strict';

/* App Module */

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'ngSanitize',
  'phonecatAnimations',

  'phonecatControllers',
  'phonecatFilters',
  'phonecatServices'
]);

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]
);

phonecatApp.config(function( $compileProvider ) {   
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|cust-scheme):/);
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|cust-scheme):/);
  }
);

In this second case, the schema was whitelisted but the routing didn't work anymore.

Any help is appreciated!

Yours sincerly, an Angular.js newbie :)

scniro · Accepted Answer · 2015-01-15T23:35:58.427

7

Looks like you are just a bit off syntactically, so lets try to "merge" these two code snippets together. Hopefully this code is self describing and you can see that we are injecting $routeProvider and $compileProvider together in a min-safe and verbose way to call our app .config at once

phonecatApp.config(['$routeProvider', '$compileProvider', function($routeProvider, $compileProvider) {

    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);

    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
}]);

edited Jan 15 '15 at 23:35

answered Jan 15 '15 at 21:47

scniro

16,844
8
62
106

Almost there! I can now see images, but routing is still messed up. Clicking on a phone (I'm referring to the original example linked in the question) the app reloads the same phone list view... – GavinoGrifoni Jan 15 '15 at 23:26
@GavinoGrifoni Which version of angular are you using? – scniro Jan 15 '15 at 23:32
I already have `/^\s*(https?|ftp|mailto|chrome-extension|filesystem|filesystem:chrome-extension|blob:chrome-extension|cust-scheme):/` as regex, doesn't help – GavinoGrifoni Jan 15 '15 at 23:46
Is the `href` on your phones in the following format? ``? – scniro Jan 15 '15 at 23:47
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/68928/discussion-between-sal-niro-and-gavinogrifoni). – scniro Jan 15 '15 at 23:48
I'm accepting this as the correct answer. The other problems (highlighted here in the comments) such as the routing were caused by Chromium Embedded Framework, so indeed this is the solution to the original problem. – GavinoGrifoni Jan 22 '15 at 11:25

Angular.js aHrefSanitizationWhitelist not working?

1 Answers1