web-dev-qa-db-fra.com

AngularJS change l'URL en "unsafe:" dans la page d'extension

J'essaie d'utiliser Angular avec une liste d'applications, et chacune d'elles est un lien permettant de voir une application plus en détail (apps/app.id):

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

Chaque fois que je clique sur l'un de ces liens, Chrome affiche l'URL sous la forme

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

D'où vient le unsafe:?

javascriptangularjssecuritygoogle-chrome-extension
183
ebi

Vous devez explicitement ajouter les protocoles d'URL à la liste blanche d'Angular à l'aide d'une expression régulière. Seuls http, https, ftp et mailto sont activés par défaut. Angular préfixera unsafe: lors de l'utilisation d'un protocole tel que chrome-extension:.

Un bon endroit pour la liste blanche du protocole chrome-extension: serait dans le bloc de configuration de votre module:

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

La même procédure s'applique également lorsque vous devez utiliser des protocoles tels que file: et tel:.

Veuillez consulter AngularJS $ documentation de l'API compileProvider pour plus d'informations.

356
Philip Bulley

Au cas où quelqu'un aurait ce problème avec les images, aussi bien:

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

Si vous avez juste besoin de courrier, tel et sms utilisez ceci:

app.config(['$compileProvider', function ($compileProvider) {
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|sms|tel):/);
}]);
6
Ivasyliv
<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
D C

Pour Angular 2+, vous pouvez utiliser la méthode DomSanitizer's bypassSecurityTrustResourceUrl.

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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

Google Chrome nécessite que ses extensions coopèrent avec Content Security Policy (CSP).

Vous devez modifier votre extension pour répondre aux exigences de CSP.

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

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

De plus, angularJS a la directive ngCsp que vous devez utiliser.

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

2
Umur Kontacı