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

【问题标题】：porting chrome extension to firefox webextension - unsafe angular image call将 chrome 扩展移植到 firefox webextension - 不安全的角度图像调用
【发布时间】：2017-03-13 18:57:48
【问题描述】：

我的 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) 和旧版本的 angular (v1.5.5)。我已经看到，这个旧版本的 Angular 可能会在将应用程序提交到 FireFox (https://github.com/mozilla/addons-linter/issues/1000#issuecomment-255183470) 期间导致问题，但我没有看到任何迹象表明这会成为测试和当前错误。（并且在我引入任何带有 Angular 升级的进一步错误之前，我正在尝试解决这个问题）。

有什么建议吗？

【问题讨论】：

如果您愿意，可以在您的扩展程序代码中[确定您的扩展程序的 UUID]。
你为什么使用 URL 作为“unsafe:moz-extension://”而不是“moz-extension://”？
@Makyen 这是由 Angular 自动添加的。我没有完整的答案，但通常这需要猴子修补 Angular 来接受 moz-extension: 作为安全。例如，请参阅this question。
@Xan，感谢您提供该问题的链接。这种类型的解决方案的问题、原因和需求与我的预期一致。虽然我从未尝试在 Chrome 扩展程序中使用 Angular，也没有针对这个问题对其进行研究，但看到 src 属性中的 URL 意味着需要类似的东西才能让它工作。这个问题是否足以让我们以它作为 dup-target 来关闭这个问题？在我看来，它看起来像（没有来自 OP 的进一步信息）。
@xan - 这个问题意味着该 URL 仅适用于 Chrome。您是否知道 Chrome 是否为 URL 中前置的 unsafe: 添加了特殊处理，从而不再需要猴子补丁？

标签： angularjs google-chrome-extension content-security-policy firefox-addon-webextensions

【解决方案1】：

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

添加 unsafe: 会使链接不可用，并表明 Angular 无法将其识别为有效。

这是扩展程序中的已知行为：

如以上链接所示，可以通过修补$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):/
    );
});

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

【讨论】：