AngularJS modifie les URL en les remplaçant par "unsafe:" dans la page d'extension

Question

Je suis en train d'essayer d'utiliser Angular avec une liste d'applications, et chacune est un lien pour voir une application en détail (apps/app.id):

{{app.name}}

Chaque fois que je clique sur l'un de ces liens, Chrome montre l'URL comme

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

D'où vient le préfixe unsafe:?

Answer 1

Vous devez ajouter explicitement des protocoles d'URL à la liste blanche d'Angular en utilisant une expression régulière. Seuls http, https, ftp et mailto sont activés par défaut. Angular ajoutera un préfixe unsafe: à une URL qui n'est pas dans la liste blanche en utilisant un protocole tel que chrome-extension:.

Un bon endroit pour ajouter le protocole chrome-extension: à 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):/);
        // Avant la version 1.2 d'Angular, on utilisait $compileProvider.urlSanitizationWhitelist(...)
    }
]);

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

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

Answer 2

Si quelqu'un rencontre également ce problème avec les images :

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

Answer 3

Si vous avez uniquement besoin de mail, de téléphone et de SMS, utilisez ceci :

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

Answer 4

 télécharger le CV

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

        }]);

Answer 5

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

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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