AngularJS 在扩展页面中将 URL 更改为“不安全:”

我正在尝试使用 Angular 的应用程序列表，每一个都是一个链接，看到一个应用程序的更多细节(apps/app.id) :

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

每次我点击其中一个链接，Chrome 都会显示如下的 URL

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

unsafe:从何而来？

102361 次浏览
小开

谷歌浏览器要求其扩展与 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

小开
最佳答案

您需要使用正则表达式显式地将 URL 协议添加到 Angular 的白名单中。默认情况下只启用 http、 https、 ftp和 mailto。在使用诸如 chrome-extension:之类的协议时，Angular 将在非白名单 URL 前面加上 unsafe:。

将 chrome-extension:协议列入白名单的好地方是在模块的配置块中:

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 编译提供者 API 文档了解更多信息。

小开

如果有人对图像也有这个问题的话:

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

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

app.config(['$compileProvider', function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|sms|tel):/);
}]);
小开 
<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):/);


}]);
小开

对于 Angular 2+，可以使用 DomSanitizer的 bypassSecurityTrustResourceUrl方法。

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


class ExampleComponent {
sanitizedURL : SafeResourceUrl;


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

提交答案