AngularJS ändert URLs auf der Erweiterungsseite in "unsicher:"

Ich versuche, Angular mit einer Liste von Apps zu verwenden, und jede ist ein Link, um eine App detaillierter anzuzeigen ( apps/app.id):

<a id="{{app.id}}" href="apps/{{app.id}}" >{{app.name}}</a>

Jedes Mal, wenn ich auf einen dieser Links klicke, zeigt Chrome die URL als an

unsafe:chrome-extension://kpbipnfncdpgejhmdneaagc.../apps/app.id

Woher kommt das unsafe:?

Sie müssen der Whitelist von Angular mithilfe eines regulären Ausdrucks explizit URL-Protokolle hinzufügen. Nur http, https, ftpund mailtosind standardmäßig aktiviert. Angular stellt einer URL ohne Whitelist unsafe:bei Verwendung eines Protokolls wie z chrome-extension:.

Ein guter Ort, um das chrome-extension:Protokoll auf die Whitelist zu setzen, ist der Konfigurationsblock Ihres Moduls:

var app = angular.module( 'myApp', [] )
.config( [
    '$compileProvider',
    function( $compileProvider )
    {   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
        // Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
    }
]);

Das gleiche Verfahren gilt auch, wenn Sie Protokolle wie file:und verwenden müssen tel:.

Weitere Informationen finden Sie in der AngularJS $ compileProvider-API-Dokumentation .

Falls jemand dieses Problem auch mit Bildern hat:

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

Wenn Sie nur Post, Tel und SMS benötigen, verwenden Sie diese:

app.config(['$compileProvider', function ($compileProvider) {
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|sms|tel):/);
}]);

Für die Zusammenarbeit mit Google Chrome sind die Erweiterungen erforderlich Content Security Policy (CSP).

Sie müssen Ihre Erweiterung ändern, um die Anforderungen von zu erfüllen CSP.

https://developer.chrome.com/extensions/contentSecurityPolicy.html

https://developer.mozilla.org/en-US/docs/Security/CSP

Außerdem verfügt angleJS über eine ngCspDirektive, die Sie verwenden müssen.

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

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

        }]);

Für Angular 2+Sie verwenden können DomSanitizer‚s - bypassSecurityTrustResourceUrlMethode.

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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