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

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?

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.

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

Si solo necesita correo, tel y sms use esto:

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

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

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

        }]);

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(); 
    }
}