Merge pull request #835 from plotly/decode-some-html-entities

Decode some html entities

Author: etpinard

src/constants/string_mappings.js

@@ -0,0 +1,36 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+// N.B. HTML entities are listed without the leading '&' and trailing ';'
+
+module.exports = {
+
+    entityToUnicode: {
+        'mu': 'μ',
+        'amp': '&',
+        'lt': '<',
+        'gt': '>',
+        'nbsp': ' ',
+        'times': '×',
+        'plusmn': '±',
+        'deg': '°'
+    },
+
+    unicodeToEntity: {
+        '&': 'amp',
+        '<': 'lt',
+        '>': 'gt',
+        '"': 'quot',
+        '\'': '#x27',
+        '\/': '#x2F'
+    }
+
+};

src/lib/html2unicode.js

@@ -10,13 +10,7 @@
 'use strict';
 
 var toSuperScript = require('superscript-text');
-
-var ENTITIES = {
-    'mu': 'μ',
-    'amp': '&',
-    'lt': '<',
-    'gt': '>'
-};
+var stringMappings = require('../constants/string_mappings');
 
 function fixSuperScript(x) {
     var idx = 0;
@@ -40,6 +34,7 @@ function stripTags(x) {
 }
 
 function fixEntities(x) {
+    var entityToUnicode = stringMappings.entityToUnicode;
     var idx = 0;
 
     while((idx = x.indexOf('&', idx)) >= 0) {
@@ -49,7 +44,7 @@ function fixEntities(x) {
             continue;
         }
 
-        var entity = ENTITIES[x.slice(idx + 1, nidx)];
+        var entity = entityToUnicode[x.slice(idx + 1, nidx)];
         if(entity) {
             x = x.slice(0, idx) + entity + x.slice(nidx + 1);
         } else {

src/lib/svg_text_utils.js

@@ -11,13 +11,11 @@
 
 /* global MathJax:false */
 
-var Plotly = require('../plotly');
 var d3 = require('d3');
 
 var Lib = require('../lib');
 var xmlnsNamespaces = require('../constants/xmlns_namespaces');
-
-var util = module.exports = {};
+var stringMappings = require('../constants/string_mappings');
 
 // Append SVG
 
@@ -45,7 +43,7 @@ d3.selection.prototype.appendSVG = function(_svgString) {
 
 // Text utilities
 
-util.html_entity_decode = function(s) {
+exports.html_entity_decode = function(s) {
     var hiddenDiv = d3.select('body').append('div').style({display: 'none'}).html('');
     var replaced = s.replace(/(&[^;]*;)/gi, function(d) {
         if(d === '<') { return '<'; } // special handling for brackets
@@ -56,7 +54,7 @@ util.html_entity_decode = function(s) {
     return replaced;
 };
 
-util.xml_entity_encode = function(str) {
+exports.xml_entity_encode = function(str) {
     return str.replace(/&(?!\w+;|\#[0-9]+;| \#x[0-9A-F]+;)/g, '&');
 };
 
@@ -66,10 +64,11 @@ function getSize(_selection, _dimension) {
     return _selection.node().getBoundingClientRect()[_dimension];
 }
 
-util.convertToTspans = function(_context, _callback) {
+exports.convertToTspans = function(_context, _callback) {
     var str = _context.text();
     var converted = convertToSVG(str);
     var that = _context;
+
     // Until we get tex integrated more fully (so it can be used along with non-tex)
     // allow some elements to prohibit it by attaching 'data-notex' to the original
     var tex = (!that.attr('data-notex')) && converted.match(/([^$]*)([$]+[^$]*[$]+)([^$]*)/);
@@ -112,7 +111,7 @@ util.convertToTspans = function(_context, _callback) {
     }
 
     if(tex) {
-        var td = Plotly.Lib.getPlotDiv(that.node());
+        var td = Lib.getPlotDiv(that.node());
         ((td && td._promises) || []).push(new Promise(function(resolve) {
             that.style({visibility: 'hidden'});
             var config = {fontSize: parseInt(that.style('font-size'), 10)};
@@ -195,7 +194,7 @@ function cleanEscapesForTex(s) {
 }
 
 function texToSVG(_texString, _config, _callback) {
-    var randomID = 'math-output-' + Plotly.Lib.randstr([], 64);
+    var randomID = 'math-output-' + Lib.randstr([], 64);
     var tmpDiv = d3.select('body').append('div')
         .attr({id: randomID})
         .style({visibility: 'hidden', position: 'absolute'})
@@ -236,22 +235,48 @@ var PROTOCOLS = ['http:', 'https:', 'mailto:'];
 
 var STRIP_TAGS = new RegExp('</?(' + Object.keys(TAG_STYLES).join('|') + ')( [^>]*)?/?>', 'g');
 
-util.plainText = function(_str) {
+var ENTITY_TO_UNICODE = Object.keys(stringMappings.entityToUnicode).map(function(k) {
+    return {
+        regExp: new RegExp('&' + k + ';', 'g'),
+        sub: stringMappings.entityToUnicode[k]
+    };
+});
+
+var UNICODE_TO_ENTITY = Object.keys(stringMappings.unicodeToEntity).map(function(k) {
+    return {
+        regExp: new RegExp(k, 'g'),
+        sub: '&' + stringMappings.unicodeToEntity[k] + ';'
+    };
+});
+
+exports.plainText = function(_str) {
     // strip out our pseudo-html so we have a readable
     // version to put into text fields
     return (_str || '').replace(STRIP_TAGS, ' ');
 };
 
+function replaceFromMapObject(_str, list) {
+    var out = _str || '';
+
+    for(var i = 0; i < list.length; i++) {
+        var item = list[i];
+        out = out.replace(item.regExp, item.sub);
+    }
+
+    return out;
+}
+
+function convertEntities(_str) {
+    return replaceFromMapObject(_str, ENTITY_TO_UNICODE);
+}
+
 function encodeForHTML(_str) {
-    return (_str || '').replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#x27;')
-        .replace(/\//g, '&#x2F;');
+    return replaceFromMapObject(_str, UNICODE_TO_ENTITY);
 }
 
 function convertToSVG(_str) {
+    _str = convertEntities(_str);
+
     var result = _str
         .split(/(<[^<>]*>)/).map(function(d) {
             var match = d.match(/<(\/?)([^ >]*)\s*(.*)>/i),
@@ -270,6 +295,7 @@ function convertToSVG(_str) {
                      * resurrect it.
                      */
                     extraStyle = extra.match(/^style\s*=\s*"([^"]+)"\s*/i);
+
                 // anchor and br are the only ones that don't turn into a tspan
                 if(tag === 'a') {
                     if(close) return '</a>';
@@ -316,7 +342,7 @@ function convertToSVG(_str) {
                 }
             }
             else {
-                return Plotly.util.xml_entity_encode(d).replace(/</g, '&lt;');
+                return exports.xml_entity_encode(d).replace(/</g, '&lt;');
             }
         });
 
@@ -397,7 +423,7 @@ function alignHTMLWith(_base, container, options) {
 
 // Editable title
 
-util.makeEditable = function(context, _delegate, options) {
+exports.makeEditable = function(context, _delegate, options) {
     if(!options) options = {};
     var that = this;
     var dispatch = d3.dispatch('edit', 'input', 'cancel');
@@ -431,7 +457,7 @@ util.makeEditable = function(context, _delegate, options) {
     }
 
     function appendEditable() {
-        var plotDiv = d3.select(Plotly.Lib.getPlotDiv(that.node())),
+        var plotDiv = d3.select(Lib.getPlotDiv(that.node())),
             container = plotDiv.select('.svg-container'),
             div = container.append('div');
         div.classed('plugin-editable editable', true)

src/plots/gl2d/convert.js

@@ -11,7 +11,7 @@
 
 var Plotly = require('../../plotly');
 
-var htmlToUnicode = require('../../lib/html2unicode');
+var convertHTMLToUnicode = require('../../lib/html2unicode');
 var str2RGBArray = require('../../lib/str2rgbarray');
 
 function Axes2DOptions(scene) {
@@ -115,7 +115,7 @@ proto.merge = function(options) {
 
         for(j = 0; j <= 2; j += 2) {
             this.labelEnable[i + j] = false;
-            this.labels[i + j] = htmlToUnicode(axTitle);
+            this.labels[i + j] = convertHTMLToUnicode(axTitle);
             this.labelColor[i + j] = str2RGBArray(ax.titlefont.color);
             this.labelFont[i + j] = ax.titlefont.family;
             this.labelSize[i + j] = ax.titlefont.size;

src/plots/gl2d/scene2d.js

@@ -18,7 +18,7 @@ var createSelectBox = require('gl-select-box');
 
 var createOptions = require('./convert');
 var createCamera = require('./camera');
-var htmlToUnicode = require('../../lib/html2unicode');
+var convertHTMLToUnicode = require('../../lib/html2unicode');
 var showNoWebGlMsg = require('../../lib/show_no_webgl_msg');
 
 var AXES = ['xaxis', 'yaxis'];
@@ -231,7 +231,7 @@ proto.computeTickMarks = function() {
         for(var i = 0; i < nextTicks[j].length; ++i) {
             // TODO add support for '\n' in gl-plot2d,
             // For now, replace '\n' with ' '
-            nextTicks[j][i].text = htmlToUnicode(nextTicks[j][i].text + '').replace(/\n/g, ' ');
+            nextTicks[j][i].text = convertHTMLToUnicode(nextTicks[j][i].text + '').replace(/\n/g, ' ');
         }
     }
 

src/plots/gl3d/layout/convert.js

@@ -10,7 +10,7 @@
 'use strict';
 
 var arrtools = require('arraytools');
-var convertHTML = require('../../../lib/html2unicode');
+var convertHTMLToUnicode = require('../../../lib/html2unicode');
 var str2RgbaArray = require('../../../lib/str2rgbarray');
 
 var arrayCopy1D = arrtools.copy1D;
@@ -77,7 +77,7 @@ proto.merge = function(sceneLayout) {
         var axes = sceneLayout[AXES_NAMES[i]];
 
         /////// Axes labels //
-        opts.labels[i] = convertHTML(axes.title);
+        opts.labels[i] = convertHTMLToUnicode(axes.title);
         if('titlefont' in axes) {
             if(axes.titlefont.color) opts.labelColor[i] = str2RgbaArray(axes.titlefont.color);
             if(axes.titlefont.family) opts.labelFont[i] = axes.titlefont.family;

src/plots/gl3d/layout/tick_marks.js

@@ -14,7 +14,7 @@
 module.exports = computeTickMarks;
 
 var Plotly = require('../../../plotly');
-var convertHTML = require('../../../lib/html2unicode');
+var convertHTMLToUnicode = require('../../../lib/html2unicode');
 
 var AXES_NAMES = ['xaxis', 'yaxis', 'zaxis'];
 
@@ -70,7 +70,7 @@ function computeTickMarks(scene) {
             var dataTicks = Plotly.Axes.calcTicks(axes);
             for(var j = 0; j < dataTicks.length; ++j) {
                 dataTicks[j].x = dataTicks[j].x * scene.dataScale[i];
-                dataTicks[j].text = convertHTML(dataTicks[j].text);
+                dataTicks[j].text = convertHTMLToUnicode(dataTicks[j].text);
             }
             ticks[i] = dataTicks;
 

test/image/mocks/axes_enumerated_ticks.json

@@ -33,7 +33,7 @@
         "xaxis": {
             "ticktext": [
                 "<span style=\"fill:green\">green</span> eggs",
-                "& ham",
+                "&amp; ham",
                 "H<sub>2</sub>O",
                 "Gorgonzola"
             ],

test/jasmine/tests/svg_text_utils_test.js

@@ -121,34 +121,33 @@ describe('svg+text utils', function() {
         });
 
         it('wrap XSS attacks in href', function() {
-            var node = mockTextSVGElement(
+            var textCases = [
+                '<a href="XSS\" onmouseover="alert(1)\" style="font-size:300px">Subtitle</a>',
                 '<a href="XSS" onmouseover="alert(1)" style="font-size:300px">Subtitle</a>'
-            );
-
-            expect(node.text()).toEqual('Subtitle');
-            assertAnchorAttrs(node);
-            assertAnchorLink(node, 'XSS onmouseover=alert(1) style=font-size:300px');
-        });
+            ];
 
-        it('wrap XSS attacks with quoted entities in href', function() {
-            var node = mockTextSVGElement(
-                '<a href="XSS&quot; onmouseover=&quot;alert(1)&quot; style=&quot;font-size:300px">Subtitle</a>'
-            );
+            textCases.forEach(function(textCase) {
+                var node = mockTextSVGElement(textCase);
 
-            console.log(node.select('a').attr('xlink:href'));
-            expect(node.text()).toEqual('Subtitle');
-            assertAnchorAttrs(node);
-            assertAnchorLink(node, 'XSS&quot; onmouseover=&quot;alert(1)&quot; style=&quot;font-size:300px');
+                expect(node.text()).toEqual('Subtitle');
+                assertAnchorAttrs(node);
+                assertAnchorLink(node, 'XSS onmouseover=alert(1) style=font-size:300px');
+            });
         });
 
         it('should keep query parameters in href', function() {
-            var node = mockTextSVGElement(
-                '<a href="https://abc.com/myFeature.jsp?name=abc&pwd=def">abc.com?shared-key</a>'
-            );
+            var textCases = [
+                '<a href="https://abc.com/myFeature.jsp?name=abc&pwd=def">abc.com?shared-key</a>',
+                '<a href="https://abc.com/myFeature.jsp?name=abc&amp;pwd=def">abc.com?shared-key</a>'
+            ];
 
-            assertAnchorAttrs(node);
-            expect(node.text()).toEqual('abc.com?shared-key');
-            assertAnchorLink(node, 'https://abc.com/myFeature.jsp?name=abc&pwd=def');
+            textCases.forEach(function(textCase) {
+                var node = mockTextSVGElement(textCase);
+
+                assertAnchorAttrs(node);
+                expect(node.text()).toEqual('abc.com?shared-key');
+                assertAnchorLink(node, 'https://abc.com/myFeature.jsp?name=abc&pwd=def');
+            });
         });
 
         it('allow basic spans', function() {
@@ -195,5 +194,14 @@ describe('svg+text utils', function() {
             expect(node.text()).toEqual('text');
             assertTspanStyle(node, 'quoted: yeah&\';;');
         });
+
+        it('decode some HTML entities in text', function() {
+            var node = mockTextSVGElement(
+                '100&mu; &amp; &lt; 10 &gt; 0 &nbsp;' +
+                '100 &times; 20 &plusmn; 0.5 &deg;'
+            );
+
+            expect(node.text()).toEqual('100μ & < 10 > 0  100 × 20 ± 0.5 °');
+        });
     });
 });