AngularJS cambia las URL a "inseguras:" en la página de extensión

186

Estoy tratando de usar Angular con una lista de aplicaciones, y cada una es un enlace para ver una aplicación con más detalle ( apps/app.id):

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

Cada vez que hago clic en uno de estos enlaces, Chrome muestra la URL como

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

¿De dónde unsafe:viene el?

— ebi
fuente

1

Tenga en cuenta que debe usar ng-hrefen este caso en lugar de solo href: docs.angularjs.org/api/ng/directive/ngHref

— hartz89

Sólo tiene que utilizar un método de controladorfunction gotoURL(url) { $window.location.href = url; }

— Todd Hale

362

Debe agregar explícitamente protocolos de URL a la lista blanca de Angular utilizando una expresión regular. Sólo http, https, ftpy mailtoestán habilitados de forma predeterminada. Angular agregará un prefijo a una URL que no esté en la lista blanca unsafe:cuando use un protocolo como chrome-extension:.

Un buen lugar para chrome-extension:incluir en la lista blanca el protocolo sería en el bloque de configuración de su módulo:

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

El mismo procedimiento también se aplica cuando necesita usar protocolos como file:y tel:.

Consulte la documentación de la API AngularJS $ compileProvider para obtener más información.

— Philip Bulley
fuente

11

En Angular 1.2 el nombre del método se convirtió$compileProvider.aHrefSanitizationWhitelist

— Martes

66

El valor predeterminado de imgSrcSanitizationWhitelist Angular 1.2-rc2 es que /^\s*(https?|ftp|file):|data:image\//, para acceder al sistema de archivos local para una aplicación empaquetada de Chrome, |filesystem:chrome-extension:debe agregarse al final de la expresión regular.

— Henning

29

Tenga en cuenta que en Angular 1.2, en realidad hay dos métodos: uno para enlaces (aHrefSanitizationWhitelist) y otro para imágenes (imgSrcSanitizationWhitelist). Esto me tuvo atrapado por un tiempo.

— mdierker

1

Para una aplicación empaquetada de Chrome, deberá agregarla |blob:chrome-extension:al final.

— adam8810

1

— Arnaud Leyder

56

En caso de que alguien tenga este problema con las imágenes, también:

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

— R. Salisbury
fuente

Intenté usar la expresión regular para la lista blanca de las capturas de pantalla de la imagen que estoy capturando con html2canvas, ahora no hay ningún error que diga inseguro: datos; pero la imagen no se captura. ¿Alguna idea de qué expresión regular debo usar? Estoy capturando una imagen / png como base64 url. Ahora el html se ve así: <img ng-src = "data :," class = "img-responsive" src = "data:,"> en lugar de la URL base64 real

— hakuna

6

Si solo necesita correo, tel y sms use esto:

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

— Ivasyliv
fuente

2

Google Chrome requiere sus extensiones para cooperar Content Security Policy (CSP).

Debe modificar su extensión para cumplir con los requisitos de CSP.

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

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

Además, angularJS tiene una ngCspdirectiva que debe usar.

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

— Umur Kontacı
fuente

Ya tengo la directiva ngCsp para esa página '<html ng-app = "myApp" ng-csp>'. Este es el CSP de mi manifiesto: "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", ¿Necesito cambiar la csp en el manifiesto?

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

        }]);

— corriente continua
fuente

2

Para Angular 2+que pueda utilizar DomSanitizerel bypassSecurityTrustResourceUrlmétodo.

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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

— Raman
fuente

Hola, ¿Puedes proporcionar un ejemplo más elaborado para lo mismo?

— Jayesh Choudhary

Hola, @JayeshChoudhary, ¿puedes decirme qué estás buscando específicamente y podría ayudarte mejor?

— Raman