AngularJS changes URLs to "unsafe:" in extension page
JavascriptAngularjsSecurityGoogle Chrome-ExtensionJavascript Problem Overview
I am trying to use Angular with a list of apps, and each one is a link to see an app in more detail (apps/app.id):
<a id="{{app.id}}" href="apps/{{app.id}}" >{{app.name}}</a>
Every time I click on one of these links, Chrome shows the URL as
unsafe:chrome-extension://kpbipnfncdpgejhmdneaagc.../apps/app.id
Where does the unsafe: come from?
Javascript Solutions
Solution 1 - Javascript
You need to explicitly add URL protocols to Angular's whitelist using a regular expression. Only http, https, ftp and mailto are enabled by default. Angular will prefix a non-whitelisted URL with unsafe: when using a protocol such as chrome-extension:.
A good place to whitelist the chrome-extension: protocol would be in your module's config block:
var app = angular.module( 'myApp', [] )
.config( [
'$compileProvider',
function( $compileProvider )
{
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
// Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
}
]);
The same procedure also applies when you need to use protocols such as file: and tel:.
Please see the AngularJS $compileProvider API documentation for more info.
Solution 2 - Javascript
In case anyone has this problem with images, as well:
app.config(['$compileProvider', function ($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
}]);
Solution 3 - Javascript
If you just need for mail, tel and sms use this:
app.config(['$compileProvider', function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|sms|tel):/);
}]);
Solution 4 - Javascript
Google Chrome require its extensions to cooperate with Content Security Policy (CSP).
You need to modify your extension to fulfill the requirements of CSP.
https://developer.chrome.com/extensions/contentSecurityPolicy.html
https://developer.mozilla.org/en-US/docs/Security/CSP
Also, angularJS has ngCsp directive which you need to use.
Solution 5 - Javascript
<a href="{{applicant.resume}}" download> download resume</a>
var app = angular.module("myApp", []);
app.config(['$compileProvider', function($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
}]);
Solution 6 - Javascript
For Angular 2+ you can use DomSanitizer's bypassSecurityTrustResourceUrl method.
import {DomSanitizer} from '@angular/platform-browser';
class ExampleComponent {
sanitizedURL : SafeResourceUrl;
constructor(
private sanitizer: DomSanitizer){
this.sanitizedURL = this.sanitizer.bypassSecurityTrustResourceUrl();
}
}