unsafe link in angular
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" }
];
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):/);
});
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.
angular.module('somemodule').config(['$compileProvider' , function ($compileProvider)
{
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto):/);
}]);
I'm using angular 1.4.0
and the following format worked:
ng-href="http://{{baseURLHref}}{{baseURLPort}}/routingPathName"
Adding http://
in the beginning of ng-href
helped in getting rid of the unsafe
appended by ng-Sanitize
- If you're on
https
, then it shouldn't be a problem to hard code everything. - But if you've a system that has to work on both environments, you might want to use a protocol detection from
location.protocol
I'm setting the variables in $rootScope
(they help with issues with proxy servers that consume css from my site)
angular.module('myApp').run(function ($route, $rootScope, $location) {
$rootScope.baseURLHref = '';
$rootScope.baseURLPort = '';
if($location.host() != 'localhost'){
$rootScope.baseURLHref = $location.host();
$rootScope.baseURLPort = ':' + $location.port();
}
...