AngularJS changes URLs to “unsafe:” in extension p

问题:

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?

回答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( [
    \'$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.

回答2:

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

app.config([\'$compileProvider\', function ($compileProvider) {
    $compileProvider.imgSrcSanitizationWhitelist(/^\\s*(https?|local|data|chrome-extension):/);
}]);

回答3:

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

回答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.

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

回答5:

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

        }]);

回答6:

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(); 
    }
}