AngularJS cambia las URL a “inseguro:” en la página de extensión

Intento 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 ):

 {{app.name}} 

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 viene lo unsafe: viene?

Necesita agregar explícitamente protocolos URL a la lista blanca de Angular usando una expresión regular. Solo http , https , ftp y mailto están habilitados por defecto. Angular prefijará una URL no incluida en la lista blanca con unsafe: cuando se usa un protocolo como chrome-extension:

Un buen lugar para incluir en la lista blanca la chrome-extension: protocolo estarí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 API de compileProvider de AngularJS 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éfono y sms, use esto:

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

Google Chrome requiere que sus extensiones cooperen con 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 la directiva ngCsp que necesita 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 Angular 2+ puede usar el método bypassSecurityTrustResourceUrl .

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