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

186

J'essaie d'utiliser Angular avec une liste d'applications, et chacune est un lien pour 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 comme

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

D'où vient le unsafe:?

— ebi
source

1

Gardez à l'esprit que vous devriez utiliser ng-hrefdans ce cas plutôt que simplement href: docs.angularjs.org/api/ng/directive/ngHref

— hartz89

J'utilise juste une méthode de contrôleurfunction gotoURL(url) { $window.location.href = url; }

— Todd Hale

362

Vous devez ajouter explicitement des protocoles d'URL à la liste blanche d'Angular à l'aide d'une expression régulière. Seulement http, https, ftpet mailtosont activés par défaut. Angular préfixera une URL non sur liste blanche unsafe:lors de l'utilisation d'un protocole tel que chrome-extension:.

Un bon endroit pour ajouter le chrome-extension:protocole à la liste blanche 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 la documentation de l'API AngularJS $ compileProvider pour plus d'informations.

— Philip Bulley
source

11

Dans Angular 1.2, le nom de la méthode est devenu$compileProvider.aHrefSanitizationWhitelist

— Mart

6

Par défaut imgSrcSanitizationWhitelist Angular 1.2-rc2 est /^\s*(https?|ftp|file):|data:image\//, pour accéder au système de fichiers local pour une application empaquetée de chrome |filesystem:chrome-extension:doit être ajouté à la fin de l'expression régulière.

— Henning

29

Notez que dans Angular 1.2, il existe en fait deux méthodes - une pour les liens (aHrefSanitizationWhitelist) et une pour les images (imgSrcSanitizationWhitelist). Cela m'a coincé pendant un moment.

— mdierker

1

Pour une application Chrome Packaged, vous devrez ajouter |blob:chrome-extension:à la fin.

— adam8810

1

— Arnaud Leyder

56

Au cas où quelqu'un aurait également ce problème avec les images:

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

— R. Salisbury
source

J'ai essayé d'utiliser l'expression régulière pour lister en blanc les captures d'écran d'image que je capture avec html2canvas, maintenant il n'y a pas d'erreur qui dit unsafe: data; mais l'image n'est pas capturée. Une idée de l'expression régulière que j'utiliserai? Je capture une image / png comme URL base64. Maintenant, le code HTML ressemble à: <img ng-src = "data :," class = "img-responsive" src = "data:,"> au lieu de l'url base64 réelle

— hakuna

6

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

— Ivasyliv
source

2

Google Chrome a besoin de ses extensions pour coopérer 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

En outre, angularJS a une ngCspdirective que vous devez utiliser.

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

— Umur Kontacı
source

J'ai déjà la directive ngCsp pour cette page '<html ng-app = "myApp" ng-csp>'. Voici le CSP de mon manifeste: "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", Dois-je modifier le csp dans le manifeste?

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

2

Car Angular 2+vous pouvez utiliser DomSanitizerla bypassSecurityTrustResourceUrlméthode de.

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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

— Raman
source

Salut, Pouvez-vous fournir un exemple plus élaboré pour le même.

— Jayesh Choudhary

Salut @JayeshChoudhary, Pouvez-vous s'il vous plaît laissez-moi savoir ce que vous recherchez spécifiquement et je pourrais peut-être mieux vous aider.

— Raman le