AngularJS zmienia adresy URL na „niebezpieczne:” na stronie rozszerzenia

Próbuję używać Angulara z listą aplikacji, a każda z nich jest linkiem, aby zobaczyć aplikację bardziej szczegółowo ( apps/app.id):

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

Za każdym razem, gdy klikam jeden z tych łączy, Chrome wyświetla adres URL jako

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

Skąd unsafe:pochodzi?

Musisz jawnie dodać protokoły URL do białej listy Angulara, używając wyrażenia regularnego. Tylko http, https, ftpi mailtosą włączone domyślnie. Angular poprzedzi adres URL, który nie znajduje się na białej liście, unsafe:przy użyciu protokołu takiego jak chrome-extension:.

Dobrym miejscem do umieszczenia chrome-extension:protokołu na białej liście jest blok konfiguracji modułu:

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

Ta sama procedura dotyczy również protokołów, takich jak file:i tel:.

Więcej informacji można znaleźć w dokumentacji interfejsu API AngularJS $ compileProvider .

W przypadku, gdy ktoś ma ten problem również z obrazami:

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

Jeśli potrzebujesz tylko poczty, tel i sms, użyj tego:

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

Google Chrome wymaga współpracy z rozszerzeniami Content Security Policy (CSP).

Musisz zmodyfikować swoje rozszerzenie, aby spełniało wymagania CSP.

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

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

Ponadto angularJS ma ngCspdyrektywę, której musisz użyć.

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

        }]);

Dla Angular 2+można użyć DomSanitizer„s bypassSecurityTrustResourceUrlmetody.

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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