Question

我有一个Chrome扩展程序很好地使用弹出窗口，但无法在弹出窗口中获取本地图像以在移植的firefox webextension中呈现。弹出窗口不呈现图像，呈现的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辅助资源，也是推荐的）：

"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页面中渲染了带角度的图像：

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

（其中'tile.imgSrc'呈现到图像的相对路径链接 - 例如'assets / img / start_your_day_right.png'。

我尝试过包含img-src设置的各种排列，包括'unsafe-inline'，删除'self'等。

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

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

有任何提示吗？

Answer 1

这里的问题是Angular会清理图像和链接的ng-src网址。

预先unsafe:会使链接无法使用，并表示Angular无法将其识别为有效。

这是扩展中的已知行为：

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

由于您移植的扩展程序在Chrome中正常运行，因此它应该已包含此修补程序。您需要做的就是将moz-extension:添加到白名单。使用bugtracker＆＃39; 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):/
    );
});

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

将chrome扩展移植到firefox webextension - 不安全的角度图像调用

1 个答案: