AngularJS cambia gli URL in "non sicuro:" nella pagina di estensione

186

Sto cercando di utilizzare Angular con un elenco di app e ognuna è un collegamento per vedere un'app in modo più dettagliato ( apps/app.id):

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

Ogni volta che faccio clic su uno di questi collegamenti, Chrome mostra l'URL come

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

Da dove unsafe:viene?

— EBI
fonte

1

Tieni presente che dovresti utilizzare ng-hrefin questo caso piuttosto che semplicemente href: docs.angularjs.org/api/ng/directive/ngHref

— hartz89,

Uso solo un metodo controllerfunction gotoURL(url) { $window.location.href = url; }

— Todd Hale,

362

È necessario aggiungere esplicitamente protocolli URL alla whitelist di Angular usando un'espressione regolare. Solo http, https, ftpe mailtosono abilitati per impostazione predefinita. Angular aggiungerà un prefisso a un URL non autorizzato con unsafe:quando si utilizza un protocollo come chrome-extension:.

Un buon posto per inserire nella whitelist il chrome-extension:protocollo sarebbe nel blocco di configurazione del tuo modulo:

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 stessa procedura si applica anche quando è necessario utilizzare protocolli come file:e tel:.

Per ulteriori informazioni, consultare la documentazione API di AngularJS $ compileProvider .

— Philip Bulley
fonte

11

In Angular 1.2 il nome del metodo divenne$compileProvider.aHrefSanitizationWhitelist

— Mart

6

Predefinito imgSrcSanitizationWhitelist Angular 1.2-rc2 è /^\s*(https?|ftp|file):|data:image\//, per accedere al filesystem locale per un'app pacchetto Chrome |filesystem:chrome-extension:dovrebbe essere aggiunto alla fine del regex.

— Henning,

29

Si noti che in Angular 1.2 esistono in realtà due metodi: uno per i collegamenti (aHrefSanitizationWhitelist) e uno per le immagini (imgSrcSanitizationWhitelist). Questo mi ha bloccato per un po '.

— mdierker,

1

Per un'app Chrome Packaged devi aggiungere |blob:chrome-extension:alla fine.

— adam8810

1

— BLOB

56

Nel caso qualcuno abbia questo problema anche con le immagini:

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

— R. Salisbury
fonte

Ho provato a usare l'espressione regolare per elencare in bianco le schermate delle immagini che sto catturando con html2canvas, ora non c'è nessun errore che dice non sicuro: dati; ma l'immagine non viene catturata. Qualche idea su quale espressione regolare dovrei usare? Sto catturando un'immagine / png come url base64. Ora l'html è simile a: <img ng-src = "data :," class = "img-responsive" src = "data:,"> invece dell'URL base64 effettivo

— hakuna,

6

Se hai solo bisogno di posta, tel e sms usa questo:

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

— Ivasyliv
fonte

2

Google Chrome richiede che le sue estensioni collaborino Content Security Policy (CSP).

È necessario modificare l'estensione per soddisfare i requisiti di CSP.

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

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

Inoltre, angularJS ha una ngCspdirettiva che devi usare.

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

— Umur Kontacı
fonte

Ho già la direttiva ngCsp per quella pagina '<html ng-app = "myApp" ng-csp>'. Questo è il CSP dal mio manifest: "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", devo cambiare il csp nel manifest?

— 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
fonte

2

Perché Angular 2+puoi usare DomSanitizeril bypassSecurityTrustResourceUrlmetodo.

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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

— Raman
fonte

Ciao, puoi fornire un esempio più elaborato per lo stesso.

— Jayesh Choudhary,

Ciao @JayeshChoudhary, per favore fammi sapere cosa stai cercando in modo specifico e potrei essere in grado di aiutarti meglio.

— Raman