Search code examples
angularjsgoogle-chrome-extensioncontent-security-policyfirefox-addon-webextensions

porting chrome extension to firefox webextension - unsafe angular image call

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?

Solution

  • 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.