unsafe link in angular

Question

In AngularJS, in the following scenario, Firefox puts unsafe: in front of urls that are generated in the following fashion. It then display an error-page saying "The address wasn't understood". This is a file request on my local PC.

Link:

<li ng-repeat="fruit in fruits">     <a href="{{ fruit.link }}">{{ fruit.title }}</a> </li> 

Array:

$scope.fruits = [     {   "title"     :   "Orange",         "link"      :   "fruits_orange.html"  } ]; 

Answer 1

You are seeing side-effect of this commit: https://github.com/angular/angular.js/commit/9532234bf1c408af9a6fd2c4743fdb585b920531 that aims at addressing some security hazards.

This commit introduced a non-backward compatible change for urls starting with file:// (it was subsequently relaxed in https://github.com/angular/angular.js/commit/7b236b29aa3a6f6dfe722815e0a2667d9b7f0899

I assume that you are using one of 1.0.5 or 1.1.3 AngularJS versions. If so you can re-enable support for the file:// URLs by configuring $compileProvider like so:

angular.module('myModule', [], function ($compileProvider) {    $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file):/);  }); 

Or in Angular 1.2.8 and above:

angular.module('myModule', [], function ($compileProvider) {    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file):/);  }); 

Answer 2

Add a white list to your controller.

For Angular.js 1.2:

app.config(['$compileProvider', function($compileProvider) {     $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|tel):/); }]); 

For Angular 1.1.x and 1.0.x, use urlSanitizationWhitelist. See reference.