Remove inline styles that break plots in strict CSP setups

Support strict Content Security Policies that don't allow unsafe inline
styles by:
* Removing add/deleteRelatedStyleRule from modebar and use event
  listeners to emulate the on hover behavior by setting style properties
  directly on the element, which is allowed in strict CSP environments.
* Output the main/library-wide CSS rules that are inlined when the
  library loads into a static CSS file so that users can include it
  within their applications in an acceptable manner. This allows
  `addRelatedStyleRule` calls to fail without affecting functionality.
* Provide a way to prevent `addRelatedStyleRule` from running when the
  static CSS file is already included in the app to prevent superfluous
  errors in console output.
* Replace inline styles from "newplotlylogo" with attribute to set the
  fill color directly on the elements.

Note: The `dist/plotly.css` file will need to be added to the release
files.

Fixes plotly#2355 Plotly uses inline CSS

src/components/modebar/modebar.js

@@ -56,11 +56,8 @@ proto.update = function(graphInfo, buttons) {
  var style = fullLayout.modebar;
  var bgSelector = context.displayModeBar === 'hover' ? '.js-plotly-plot .plotly:hover ' : '';
 
- Lib.deleteRelatedStyleRule(modeBarId);
- Lib.addRelatedStyleRule(modeBarId, bgSelector + '#' + modeBarId + ' .modebar-group', 'background-color: ' + style.bgcolor);
- Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn .icon path', 'fill: ' + style.color);
- Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn:hover .icon path', 'fill: ' + style.activecolor);
- Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn.active .icon path', 'fill: ' + style.activecolor);
+ // set styles on hover using event listeners instead of inline CSS that's not allowed by strict CSP's
+ Lib.setStyleOnHover('#' + modeBarId + ' .modebar-btn', '.active', '.icon path', 'fill: ' + style.activecolor, 'fill: ' + style.color);
 
  // if buttons or logo have changed, redraw modebar interior
  var needsNewButtons = !this.hasButtons(buttons);
@@ -129,6 +126,10 @@ proto.updateButtons = function(buttons) {
 proto.createGroup = function() {
  var group = document.createElement('div');
  group.className = 'modebar-group';
+
+ var style = this.graphInfo._fullLayout.modebar;
+ group.style.backgroundColor = style.bgcolor;
+
  return group;
 };
 
@@ -246,18 +247,35 @@ proto.updateActiveButton = function(buttonClicked) {
  var isToggleButton = (button.getAttribute('data-toggle') === 'true');
  var button3 = d3.select(button);
 
+ // set style on button based on its state at the moment this is called
+ // (e.g. during the handling when a modebar button is clicked)
+ var updateButtonStyle = function(button, isActive) {
+ var style = fullLayout.modebar;
+ var childEl = button.querySelector('.icon path');
+ if(childEl) {
+ if(isActive || button.matches(':hover')) {
+ childEl.style.fill = style.activecolor;
+ } else {
+ childEl.style.fill = style.color;
+ }
+ }
+ };
+
  // Use 'data-toggle' and 'buttonClicked' to toggle buttons
  // that have no one-to-one equivalent in fullLayout
  if(isToggleButton) {
  if(dataAttr === dataAttrClicked) {
- button3.classed('active', !button3.classed('active'));
+ var isActive = !button3.classed('active');
+ button3.classed('active', isActive);
+ updateButtonStyle(button, isActive);
  }
  } else {
  var val = (dataAttr === null) ?
  dataAttr :
  Lib.nestedProperty(fullLayout, dataAttr).get();
 
  button3.classed('active', val === thisval);
+ updateButtonStyle(button, val === thisval);
  }
  });
 };
@@ -317,7 +335,6 @@ proto.removeAllButtons = function() {
 
 proto.destroy = function() {
  Lib.removeElement(this.container.querySelector('.modebar'));
- Lib.deleteRelatedStyleRule(this._uid);
 };
 
 function createModeBar(gd, buttons) {

src/fonts/ploticon.js

@@ -167,29 +167,19 @@ module.exports = {
  name: 'newplotlylogo',
  svg: [
  '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 132 132\'>',
- '<defs>',
- ' <style>',
- ' .cls-0{fill:#000;}',
- ' .cls-1{fill:#FFF;}',
- ' .cls-2{fill:#F26;}',
- ' .cls-3{fill:#D69;}',
- ' .cls-4{fill:#BAC;}',
- ' .cls-5{fill:#9EF;}',
- ' </style>',
- '</defs>',
  ' <title>plotly-logomark</title>',
  ' <g id=\'symbol\'>',
- ' <rect class=\'cls-0\' x=\'0\' y=\'0\' width=\'132\' height=\'132\' rx=\'18\' ry=\'18\'/>',
- ' <circle class=\'cls-5\' cx=\'102\' cy=\'30\' r=\'6\'/>',
- ' <circle class=\'cls-4\' cx=\'78\' cy=\'30\' r=\'6\'/>',
- ' <circle class=\'cls-4\' cx=\'78\' cy=\'54\' r=\'6\'/>',
- ' <circle class=\'cls-3\' cx=\'54\' cy=\'30\' r=\'6\'/>',
- ' <circle class=\'cls-2\' cx=\'30\' cy=\'30\' r=\'6\'/>',
- ' <circle class=\'cls-2\' cx=\'30\' cy=\'54\' r=\'6\'/>',
- ' <path class=\'cls-1\' d=\'M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z\'/>',
- ' <path class=\'cls-1\' d=\'M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z\'/>',
- ' <path class=\'cls-1\' d=\'M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z\'/>',
- ' <path class=\'cls-1\' d=\'M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z\'/>',
+ ' <rect fill=\'#000\' x=\'0\' y=\'0\' width=\'132\' height=\'132\' rx=\'18\' ry=\'18\'/>',
+ ' <circle fill=\'#9EF\' cx=\'102\' cy=\'30\' r=\'6\'/>',
+ ' <circle fill=\'#BAC\' cx=\'78\' cy=\'30\' r=\'6\'/>',
+ ' <circle fill=\'#BAC\' cx=\'78\' cy=\'54\' r=\'6\'/>',
+ ' <circle fill=\'#D69\' cx=\'54\' cy=\'30\' r=\'6\'/>',
+ ' <circle fill=\'#F26\' cx=\'30\' cy=\'30\' r=\'6\'/>',
+ ' <circle fill=\'#F26\' cx=\'30\' cy=\'54\' r=\'6\'/>',
+ ' <path fill=\'#FFF\' d=\'M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z\'/>',
+ ' <path fill=\'#FFF\' d=\'M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z\'/>',
+ ' <path fill=\'#FFF\' d=\'M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z\'/>',
+ ' <path fill=\'#FFF\' d=\'M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z\'/>',
  ' </g>',
  '</svg>'
  ].join('')

src/lib/dom.js

@@ -60,6 +60,10 @@ function addStyleRule(selector, styleString) {
 function addRelatedStyleRule(uid, selector, styleString) {
  var id = 'plotly.js-style-' + uid;
  var style = document.getElementById(id);
+ if(style && style.matches('.no-inline-styles')) {
+ // Do not proceed if user disable inline styles explicitly...
+ return;
+ }
  if(!style) {
  style = document.createElement('style');
  style.setAttribute('id', id);
@@ -69,7 +73,9 @@ function addRelatedStyleRule(uid, selector, styleString) {
  }
  var styleSheet = style.sheet;
 
- if(styleSheet.insertRule) {
+ if(!styleSheet) {
+ loggers.warn('Cannot addRelatedStyleRule, probably due to strict CSP...');
+ } else if(styleSheet.insertRule) {
  styleSheet.insertRule(selector + '{' + styleString + '}', 0);
  } else if(styleSheet.addRule) {
  styleSheet.addRule(selector, styleString, 0);
@@ -85,6 +91,46 @@ function deleteRelatedStyleRule(uid) {
  if(style) removeElement(style);
 }
 
+/**
+ * Setup event listeners on button elements to emulate the ':hover' state without using inline styles,
+ * which is not allowed with strict CSP. This supports modebar buttons set with the 'active' class,
+ * in which case, the active style remains even when it's no longer hovered.
+ * @param {string} selector selector for button elements to be styled when hovered
+ * @param {string} activeSelector selector used to determine if selected element is active
+ * @param {string} childSelector the child element on which the styling needs to be updated
+ * @param {string} activeStyle style that has to be applied when 'hovered' or 'active'
+ * @param {string} inactiveStyle style that has to be applied when not 'hovered' nor 'active'
+ */
+function setStyleOnHover(selector, activeSelector, childSelector, activeStyle, inactiveStyle) {
+ var activeStyleParts = activeStyle.split(':');
+ var inactiveStyleParts = inactiveStyle.split(':');
+ var eventAddedAttrName = 'data-btn-style-event-added';
+
+ document.querySelectorAll(selector).forEach(function(el) {
+ if(!el.getAttribute(eventAddedAttrName)) {
+ // Emulate ":hover" CSS style using JS event handlers to set the
+ // style in a strict CSP-compliant manner.
+ el.addEventListener('mouseenter', function() {
+ var childEl = this.querySelector(childSelector);
+ if(childEl) {
+ childEl.style[activeStyleParts[0]] = activeStyleParts[1];
+ }
+ });
+ el.addEventListener('mouseleave', function() {
+ var childEl = this.querySelector(childSelector);
+ if(childEl) {
+ if(activeSelector && this.matches(activeSelector)) {
+ childEl.style[activeStyleParts[0]] = activeStyleParts[1];
+ } else {
+ childEl.style[inactiveStyleParts[0]] = inactiveStyleParts[1];
+ }
+ }
+ });
+ el.setAttribute(eventAddedAttrName, true);
+ }
+ });
+}
+
 function getFullTransformMatrix(element) {
  var allElements = getElementAndAncestors(element);
  // the identity matrix
@@ -162,6 +208,7 @@ module.exports = {
  addStyleRule: addStyleRule,
  addRelatedStyleRule: addRelatedStyleRule,
  deleteRelatedStyleRule: deleteRelatedStyleRule,
+ setStyleOnHover: setStyleOnHover,
  getFullTransformMatrix: getFullTransformMatrix,
  getElementTransformMatrix: getElementTransformMatrix,
  getElementAndAncestors: getElementAndAncestors,

src/lib/index.js

@@ -189,6 +189,7 @@ lib.removeElement = domModule.removeElement;
 lib.addStyleRule = domModule.addStyleRule;
 lib.addRelatedStyleRule = domModule.addRelatedStyleRule;
 lib.deleteRelatedStyleRule = domModule.deleteRelatedStyleRule;
+lib.setStyleOnHover = domModule.setStyleOnHover;
 lib.getFullTransformMatrix = domModule.getFullTransformMatrix;
 lib.getElementTransformMatrix = domModule.getElementTransformMatrix;
 lib.getElementAndAncestors = domModule.getElementAndAncestors;

tasks/preprocess.js

@@ -3,6 +3,7 @@ var path = require('path');
 var sass = require('sass');
 
 var constants = require('./util/constants');
+var mapBoxGLStyleRules = require('./../src/plots/mapbox/constants').styleRules;
 var common = require('./util/common');
 var pullCSS = require('./util/pull_css');
 var updateVersion = require('./util/update_version');
@@ -13,19 +14,33 @@ exposePartsInLib();
 copyTopojsonFiles();
 updateVersion(constants.pathToPlotlyVersion);
 
-// convert scss to css to js
+// convert scss to css to js and static css file
 function makeBuildCSS() {
  sass.render({
  file: constants.pathToSCSS,
  outputStyle: 'compressed'
  }, function(err, result) {
  if(err) throw err;
 
- // css to js
+ // To support application with strict CSP where styles cannot be inlined,
+ // build a static CSS file that can be included into such applications.
+ var staticCSS = String(result.css);
+ for(var k in mapBoxGLStyleRules) {
+ staticCSS = addAdditionalCSSRules(staticCSS, '.js-plotly-plot .plotly .mapboxgl-' + k, mapBoxGLStyleRules[k]);
+ }
+ fs.writeFile(constants.pathToCSSDist, staticCSS, function(err) {
+ if(err) throw err;
+ });
+
+ // css to js to be inlined
  pullCSS(String(result.css), constants.pathToCSSBuild);
  });
 }
 
+function addAdditionalCSSRules(staticStyleString, selector, style) {
+ return staticStyleString + selector + '{' + style + '}';
+}
+
 function exposePartsInLib() {
  var obj = {};
 

tasks/util/constants.js

@@ -221,6 +221,7 @@ module.exports = {
 
  pathToSCSS: path.join(pathToSrc, 'css/style.scss'),
  pathToCSSBuild: path.join(pathToBuild, 'plotcss.js'),
+ pathToCSSDist: path.join(pathToDist, 'plotly.css'),
 
  pathToTestDashboardBundle: path.join(pathToBuild, 'test_dashboard-bundle.js'),
  pathToReglCodegenBundle: path.join(pathToBuild, 'regl_codegen-bundle.js'),