porting chrome extension to firefox webextension - unsafe angular image call

Question

I've got a chrome extension working nicely w/ a popup, but can't get local images in the popup to render in the ported firefox webextension. the popup renders no images and the HTML rendered is:

    <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">

After researching this error, I've tried various permutations of the CSP setting in the manifest.json file. Here's the code in the manifest file I've used (also included is the web accessible resources, which was recommended as well):

"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'",

I'm rendering the image w/ angular in the popup.html page:

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

(where 'tile.imgSrc' renders to a relative path link to the image - eg. 'assets/img/start_your_day_right.png'.

I've tried including various permutations of the img-src setting, including 'unsafe-inline', removing 'self', etc.

The error I can't seem to escape is: screenshot of ffox console error

I'm running the latest version of FireFox (52.0) w/ an older version of angular (v1.5.5). I have seen that this older version of Angular may cause issues during the submission of the app to FireFox (https://github.com/mozilla/addons-linter/issues/1000#issuecomment-255183470), but I've seen no indication that this would be a factor w/ testing and the current error. (And I'm trying to solve this before I introduce any further errors w/ an Angular upgrade).

Any tips out there?

You can [determine the UUID for your extension] from within your extension's code, if you desire to do so. — Makyen, Mar 13 '17 at 23:09
Why are you using the URL as "unsafe:moz-extension://" instead of "moz-extension://"? — Makyen, Mar 13 '17 at 23:10
@Makyen This is automatically added by Angular. I don't have a full answer, but normally this needs monkey-patching Angular to accept `moz-extension:` as safe. See [this question](https://stackoverflow.com/questions/15606751/angular-changes-urls-to-unsafe-in-extension-page), for instance. — Xan, Mar 14 '17 at 15:17
@Xan, Thanks for the link to that question. The issue, cause and the need for that type of resolution is consistent with my expectations. While I have never tried using Angular in a Chrome extension and did not research it for this question, seeing that URL in the `src` attribute implied that something like that would be needed to get this to work. Is that question a sufficient duplicate for us to close this one with that as the dup-target? To me it looks like it (without further information from the OP). — Makyen, Mar 14 '17 at 16:26
@xan - This question implies that the URL just works in Chrome. Do you know if Chrome added special handling for the prepended `unsafe:` in URLs, so that the monkey-patching was no longer needed? — Makyen, Mar 14 '17 at 16:27
@Makyen If anyone added support, it's Angular. It's also possible that extension from the question already has this patch. — Xan, Mar 14 '17 at 17:23
@Xan, So... basically, the question doesn't contain enough information to duplicate the problem, correct? That was my first impression, but it was possible I was wrong, so I have not yet close-voted. — Makyen, Mar 14 '17 at 17:30
Relevant: https://github.com/angular/angular.js/issues/3721 Therefore, if extension works correctly in Chrome, it's likely that this workaround is implemented. We need confirmation from the poster. — Xan, Mar 14 '17 at 18:03
@Xan and @Makyen, Thanks much for the input. The addition of `app.config(['$compileProvider', function ($compileProvider) { $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|file|local|data|chrome-extension|moz-extension):/); }])` as suggested in the link by @Xan fixed the problem. This white list included the regex 'chrome-extension' already, but this was inherited code and I didn't catch it. — bthorn, Mar 14 '17 at 23:09
@Xan, I'm happy to accept your answer if you'd like to expand your comment! Thanks! — bthorn, Mar 14 '17 at 23:11

score 1 · Accepted Answer · answered Mar 15 '17 at 07:35

The issue here is that Angular sanitizes ng-src URLs for images and links.

Prepending unsafe: renders the link unusable, and signals that Angular does not recognize it as valid.

This is a known behavior in extensions:

As shown in the links above, this behavior can be overridden by patching $compileProvider's imgSrcSanitizationWhitelist and aHrefSanitizationWhitelist. Angular developers officially blessed this workaround and decided not to modify core Angular code for non-web use.

Since the extension you're porting is working in Chrome, it should already contain this patching. All you need to do is to add moz-extension: to the whitelist. Using the bugtracker's example, modified to work in both Chrome and 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):/
    );
});

It should be similarly modified for other non-web platforms, i.e. for Edge or node-webkit.

porting chrome extension to firefox webextension - unsafe angular image call

1 Answers1