AngularJS changes URLs to “unsafe:” in extension page

AngularJS changes URLs to “unsafe:” in extension page

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/

Every time I click on one of these links, Chrome shows the URL as

Where does the unsafe: come from?


Solution 1:

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( [
    function( $compileProvider )
        // 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:

In case anyone has this problem with images, as well:

app.config(['$compileProvider', function ($compileProvider) {

Solution 3:

If you just need for mail, tel and sms use this:

app.config(['$compileProvider', function ($compileProvider) {

Solution 4:

Google Chrome require its extensions to cooperate with Content Security Policy (CSP).

You need to modify your extension to fulfill the requirements of CSP.

Related:  Why is there a `null` value in JavaScript?

Also, angularJS has ngCsp directive which you need to use.

Solution 5:

<a href="{{applicant.resume}}" download> download resume</a>

var app = angular.module("myApp", []);

    app.config(['$compileProvider', function($compileProvider) {


Solution 6:

For Angular 2+ you can use DomSanitizer‘s bypassSecurityTrustResourceUrl method.

import {DomSanitizer} from '@angular/platform-browser';

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

        private sanitizer: DomSanitizer){
        this.sanitizedURL = this.sanitizer.bypassSecurityTrustResourceUrl();