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 :)

Answer 1

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'
      });
}]);