191

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?

2

6 Answers 6

367

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.

8
  • 11
    In Angular 1.2 the method name became $compileProvider.aHrefSanitizationWhitelist
    – Mart
    Aug 27, 2013 at 23:46
  • 6
    Default imgSrcSanitizationWhitelist Angular 1.2-rc2 is /^\s*(https?|ftp|file):|data:image\//, to access the local filesystem for a chrome packaged app |filesystem:chrome-extension: should be added to the end of the regex.
    – Henning
    Sep 19, 2013 at 12:08
  • 29
    Note that in Angular 1.2, there are actually two methods -- One for links (aHrefSanitizationWhitelist) and one for images (imgSrcSanitizationWhitelist). This had me stuck for a while.
    – mdierker
    Dec 5, 2013 at 23:17
  • 1
    For a Chrome Packaged App you'll need to add |blob:chrome-extension: to the end.
    – adam8810
    Mar 31, 2014 at 1:16
  • 1
    Note the file protocol is different from the blob protocol: $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|blob|ftp|mailto|chrome-extension):/); Jan 9, 2015 at 14:31
57

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

app.config(['$compileProvider', function ($compileProvider) {
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
}]);
1
  • I tried using the regular expression for white listing the image screen shots i am capturing with html2canvas , now there is no error that says unsafe:data; but the image is not getting captured. Any idea what regular expression i shall use ? I am capturing a image/png as base64 url. Now the html looks like : <img ng-src="data:," class="img-responsive" src="data:,"> instead of the actual base64 url
    – hakuna
    Feb 29, 2016 at 17:31
6

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):/);
}]);
3
<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):/);

        }]);
2

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.

http://docs.angularjs.org/api/ng.directive:ngCsp

1
  • I already have the ngCsp directive for that page '<html ng-app="myApp" ng-csp>'. This is the CSP from my manifest: "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", Do I need to change the csp in the manifest?
    – ebi
    Mar 26, 2013 at 4:16
2

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(); 
    }
}
2
  • Hi, Can you provide a more elaborated example for the same. Jun 5, 2019 at 12:17
  • Hi @JayeshChoudhary, Can you please let me know what you're specifically looking for and I might be able to help you better.
    – Raman
    Jun 9, 2019 at 8:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.