Question

我在使用示例Chrome扩展程序中的链接时出现问题。

看起来Chrome认为我的内联代码（AngularJS绑定）不安全，基本上所有动态链接都不起作用。

例如，下面的链接（在HTML模板中，IndexCtrl）：

<a href="#/edit/{{ i.id }}"> Edit </a>

渲染到下面，当在chrome开发人员工具中查看时，我得到了这个：

<a href="unsafe:chrome-extension://abcd/index.html#/edit/1"> Edit </a>

请注意id of /edit/1已被角度正确绑定 - 所以很可能chrome有一些我将启用/禁用的安全功能，但是如何？

有什么建议吗？仅供参考，控制台中没有错误。

Answer 1

确保执行以下操作：

包括CSP声明：

<html lang="en" ng-app="app" ng-csp="">
使用ng-href

<a ng-href="#/edit/{{ item.id }}">Link</a>

将 chrome-extensions 添加到 Href清理白名单

var app = angular.module("app", []);
app.config( function ($compileProvider) {
   $compileProvider.aHrefSanitizationWhitelist (/^\s*(https?|ftp|mailto|file|tel|chrome-extension):/);
});

Answer 2

chrome-extension方案不在默认href白名单中，在href属性中存在绑定时使用该白名单。有关详细信息，请参阅$compileProvider的源代码here。

如this SO answer所述，您可以使用该正则表达式的副本调用aHrefSanitizationWhitelist并添加|chrome-extension，以防止隐藏unsafe:。

AngularJS - Google Chrome扩展程序中的动态链接已损坏

2 个答案: