AngularJS altera URLs para "não seguro:" na página de extensão

Estou tentando usar o Angular com uma lista de aplicativos, e cada um é um link para ver um aplicativo em mais detalhes ( apps/app.id):

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

Sempre que clico em um desses links, o Chrome mostra o URL como

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

De onde unsafe:vem isso?

Você precisa adicionar explicitamente protocolos de URL à lista de permissões do Angular usando uma expressão regular. Apenas http, https, ftpe mailtosão ativadas por padrão. O Angular prefixará um URL que não esteja na lista de permissões unsafe:ao usar um protocolo como chrome-extension:.

Um bom lugar para colocar na lista branca o chrome-extension:protocolo seria no bloco de configuração do seu 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(...)
    }
]);

O mesmo procedimento também se aplica quando você precisa usar protocolos como file:e tel:.

Consulte a documentação da API AngularJS $ compileProvider para obter mais informações.

Caso alguém também tenha esse problema com imagens:

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

Se você precisar apenas de correio, tel e sms, use o seguinte:

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

O Google Chrome exige que suas extensões cooperem Content Security Policy (CSP).

Você precisa modificar sua extensão para atender aos requisitos de CSP.

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

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

Além disso, angularJS possui uma ngCspdiretiva que você precisa 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):/);

        }]);

Pois Angular 2+você pode usar DomSanitizero bypassSecurityTrustResourceUrlmétodo.

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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