Improves code readability for image traces

Author: antoinerg

src/traces/image/defaults.js

@@ -18,6 +18,7 @@ module.exports = function supplyDefaults(traceIn, traceOut) {
         return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
     }
     coerce('source');
+    // sanitize source to only allow for data URI representing images
     if(traceOut.source && !traceOut.source.match(dataUri)) delete traceOut.source;
     traceOut._isFromSource = !!traceOut.source;
 

src/traces/image/plot.js

@@ -13,6 +13,8 @@ var Lib = require('../../lib');
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 var constants = require('./constants');
 
+var unsupportedBrowsers = Lib.isIOS() || Lib.isSafari() || Lib.isIE();
+
 function compatibleAxis(ax) {
     return ax.type === 'linear' &&
         // y axis must be reversed but x axis mustn't be
@@ -23,7 +25,7 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
     var xa = plotinfo.xaxis;
     var ya = plotinfo.yaxis;
 
-    var supportsPixelatedImage = !Lib.isIOS() && !Lib.isSafari() && !Lib.isIE() && !gd._context._exportedPlot;
+    var supportsPixelatedImage = !(unsupportedBrowsers || gd._context._exportedPlot);
 
     Lib.makeTraceGroups(imageLayer, cdimage, 'im').each(function(cd) {
         var plotGroup = d3.select(this);

src/traces/image/style.js

@@ -13,7 +13,6 @@ var d3 = require('d3');
 module.exports = function style(gd) {
     d3.select(gd).selectAll('.im image')
         .style('opacity', function(d) {
-            if(d && d.hidden) return 0;
             return d[0].trace.opacity;
         });
 };

test/jasmine/tests/image_test.js

@@ -90,6 +90,15 @@ describe('image supplyDefaults', function() {
         expect(traceOut.visible).toBe(true);
     });
 
+    it('should not accept source attribute that is not a data URI of an image', function() {
+        traceIn = {
+            source: 'javascript:alert(\'attack\')'
+        };
+
+        supplyDefaults(traceIn, traceOut);
+        expect(traceOut.source).toBe(undefined);
+    });
+
     it('should set proper zmin/zmax depending on colormodel', function() {
         var tests = [
           ['rgb', [0, 0, 0], [255, 255, 255]],