AngularJS muda os URLs para “inseguro:” na página de extensão

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

 {{app.name}} 

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

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

De onde vem o unsafe: ?

Você precisa include explicitamente os protocolos de URL na lista de desbloqueio do Angular usando uma expressão regular. Apenas http , https , ftp e mailto estão habilitados por padrão. Angular colocará um prefixo de URL não listado na lista de permissions como unsafe: ao usar um protocolo como o chrome-extension:

Um bom lugar para colocar na lista de permissions o protocolo chrome-extension: 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:

Por favor, veja a documentação da API compileProvider AngularJS $ para mais informações.

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

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

Se você só precisa de e-mail, tel e sms usam isso:

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

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

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

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

https://developer.mozilla.org/pt-BR/docs/Security/CSP

Além disso, o angularJS tem a diretiva ngCsp que você precisa usar.

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

  download resume 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 o Angular 2+ você pode usar o método bypassSecurityTrustResourceUrl do bypassSecurityTrustResourceUrl .

 import {DomSanitizer} from '@angular/platform-browser'; class ExampleComponent { sanitizedURL : SafeResourceUrl; constructor( private sanitizer: DomSanitizer){ this.sanitizedURL = this.sanitizer.bypassSecurityTrustResourceUrl(); } }