分机页面中的angular度更改会导致“不安全：”

我正在尝试使用angular度与应用程序的列表，每个人都是一个链接，更详细地看到一个应用程序（apps / app.id）：

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

每次点击其中一个链接时，Chrome浏览器都会显示该url为不安全：chrome-extension：//kpbipnfncdpgejhmdneaagc…../apps/app.id

不安全从哪里来？

Answer 1

您需要使用正则expression式将URL协议明确添加到Angular的白名单中。 只有http ， https ， ftp和mailto默认启用。 Angular将在不使用白名单的url前缀unsafe:情况下使用协议，如chrome-extension:

将chrome-extension:协议列入白名单的好地方应该在你模块的configuration块中：

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

当您需要使用诸如file:和tel:等协议时，同样的过程也适用。

请参阅AngularJS $ compileProvider API文档以获取更多信息。

Answer 2

如果有人有这个问题的图像，以及：

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

Answer 3

如果你只需要邮件，电话和短信使用这个：

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

Answer 4

Google Chrome要求其扩展程序与Content Security Policy (CSP)配合使用。

您需要修改您的扩展以满足CSP的要求。

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

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

另外，angularJS有你需要使用的ngCsp指令。

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