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

186

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:?

ebi
quelle
1
Denken Sie daran, dass Sie ng-hrefin diesem Fall nicht nur verwenden sollten href: docs.angularjs.org/api/ng/directive/ngHref
hartz89
Ich benutze nur eine Controller-Methodefunction gotoURL(url) { $window.location.href = url; }
Todd Hale

Antworten:

362

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 .

Philip Bulley
quelle
11
In Angular 1.2 wurde der Methodenname$compileProvider.aHrefSanitizationWhitelist
Mart
6
Standardmäßig sollte imgSrcSanitizationWhitelist Angular 1.2-rc2 am Ende der Regex hinzugefügt werden /^\s*(https?|ftp|file):|data:image\//, um auf das lokale Dateisystem für eine Chrome-App zuzugreifen |filesystem:chrome-extension:.
Henning
29
Beachten Sie, dass es in Angular 1.2 tatsächlich zwei Methoden gibt - eine für Links (aHrefSanitizationWhitelist) und eine für Bilder (imgSrcSanitizationWhitelist). Das hat mich eine Weile festgefahren.
Mdierker
1
Für eine Chrome Packaged App müssen Sie |blob:chrome-extension:am Ende hinzufügen .
Adam8810
1
Beachten Sie, dass sich das Dateiprotokoll vom Blob-Protokoll unterscheidet: $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|blob|ftp|mailto|chrome-extension):/);
Arnaud Leyder
56

Falls jemand dieses Problem auch mit Bildern hat:

app.config(['$compileProvider', function ($compileProvider) {
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
}]);
R. Salisbury
quelle
Ich habe versucht, den regulären Ausdruck für Weiß zu verwenden, um die Bild-Screenshots aufzulisten, die ich mit html2canvas aufnehme. Jetzt gibt es keinen Fehler, der unsicher sagt: data; Das Bild wird jedoch nicht erfasst. Irgendeine Idee, welchen regulären Ausdruck ich verwenden soll? Ich nehme ein Bild / PNG als base64-URL auf. Jetzt sieht der HTML-Code wie folgt aus: <img ng-src = "data:," class = "img-responsive" src = "data :,"> anstelle der eigentlichen base64-URL
hakuna
6

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

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

Umur Kontacı
quelle
Ich habe bereits die ngCsp-Direktive für diese Seite '<html ng-app = "myApp" ng-csp>'. Dies ist der CSP aus meinem Manifest: "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", Muss ich den csp im Manifest ändern?
ebi
2
<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):/);

        }]);
DC
quelle
2

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(); 
    }
}
Raman
quelle
Hallo, können Sie ein ausführlicheres Beispiel dafür liefern?
Jayesh Choudhary
Hallo @JayeshChoudhary, können Sie mir bitte mitteilen, wonach Sie speziell suchen, und ich kann Ihnen möglicherweise besser helfen.
Raman