将 chrome 扩展移植到 firefox webextension - 不安全 angular 图片调用

Question

我有一个 chrome 扩展，带有弹出窗口，效果很好，但无法在弹出窗口中获取本地图像以在移植的 firefox web 扩展中呈现。弹出窗口不呈现图像，呈现的 HTML 是：

    <img ng-src="assets/img/start_your_day_right.png" src="unsafe:moz-extension://d45045df-43fa-654a-b95c-70de00a23f5a/assets/img/start_your_day_right.png">

研究此错误后，我尝试了 manifest.json 文件中 CSP 设置的各种排列组合。这是我使用过的清单文件中的代码（还包括网络可访问资源，这也是推荐的）：

"web_accessible_resources": [
  "assets/img/*.png"
],
"content_security_policy": "img-src 'self' 'unsafe-eval'; script-src 'self' 'unsafe-eval' https://www.google-analytics.com; object-src 'self'",

我正在 popup.html 页面中使用 angular 渲染图像：

<img ng-src="{{ tile.imgSrc | htmlSafe }}" />

(其中 'tile.imgSrc' 渲染到图像的相对路径 link - 例如 'assets/img/start_your_day_right.png'。

我试过对 img-src 设置进行各种排列，包括 'unsafe-inline'、删除 'self' 等

我似乎无法逃避的错误是： screenshot of ffox console error

我是运行最新版本的 FireFox (52.0) 和旧版本的 angular (v1.5.5)。我已经看到 Angular 的这个旧版本可能会在应用程序提交到 FireFox (https://github.com/mozilla/addons-linter/issues/1000#issuecomment-255183470) 期间引起问题，但我没有看到任何迹象表明这将是测试和当前错误的一个因素。（在我通过 Angular 升级引入任何进一步的错误之前，我试图解决这个问题）。

有什么建议吗？

Answer 1

这里的问题是 Angular 清理了 ng-src 图片和 link 的 URL。

前置 unsafe: 使 link 不可用，并表示 Angular 不认为它有效。

这是扩展中的已知行为：

Angular changes urls to "unsafe:" in extension page
ng-src doesn't work in Chrome app, even with ng-csp

如上面的 link 所示，可以通过修补 $compileProvider 的 imgSrcSanitizationWhitelist 和 aHrefSanitizationWhitelist 来覆盖此行为。 Angular 开发人员 officially blessed 此解决方法并决定不修改核心 Angular 代码以供非 Web 使用。

由于您移植的扩展在 Chrome 中工作，它应该已经包含此补丁。您需要做的就是将 moz-extension: 添加到白名单。使用 bugtracker 的 example，修改为在 Chrome 和 Firefox 中工作：

var myModule = angular.module('myApp', [...], function($compileProvider) {
    ...
    $compileProvider.imgSrcSanitizationWhitelist(
      /^\s*(https?|ftp|file|chrome-extension|moz-extension):|data:image\//
    );
    $compileProvider.aHrefSanitizationWhitelist(
      /^\s*(https?|ftp|mailto|file|chrome-extension|moz-extension):/
    );
});

对于其他非网络平台，即对于 Edge 或 node-webkit，应该进行类似的修改。

将 chrome 扩展移植到 firefox webextension - 不安全 angular 图片调用

porting chrome extension to firefox webextension - unsafe angular image call

google-chrome-extension

angularjs

content-security-policy

firefox-addon-webextensions