Merge pull request #3 from mlnor27/master

Handling SSR with JSDOM window to work with DOMPurify

package.json

@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "babel-preset-env": "^1.7.0",
-    "dompurify": "^1.0.5"
+    "dompurify": "^1.0.5",
+    "jsdom": "^12.0.0"
   }
 }

src/IconInner.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import DOMPurify from 'dompurify';
+import { JSDOM } from 'jsdom';
 // for now this icons json is generated via the build script from latest feather
 // TODO: automatically generate this JSON via this repo's build script
 import icons from './icons.json';
@@ -8,10 +9,27 @@ import icons from './icons.json';
 class IconInner extends PureComponent {
   createMarkup(markup) {
     // sanitize markup first:
-    const sanitizedMarkup = DOMPurify.sanitize(markup);
+    const sanitizedMarkup = this.sanitizeMarkup(markup);
+ 
     // now do the weird thing for dangerouslySetInnerHTML
-    return {__html: sanitizedMarkup};
+    return { __html: sanitizedMarkup };
   }
+
+  sanitizeMarkup(markup) {
+    // For server environement
+    if (!window) {
+      // We create a window out of JSDOM
+      const window = (new JSDOM('')).window;
+      // Then we plug it to DOMPurify
+      const DOMPurifyServer = DOMPurify(window);
+      // and finally sanitize the markup
+      return  DOMPurifyServer.sanitize(markup);
+    }
+
+    // Sanitize the markup
+    return  DOMPurify.sanitize(markup);
+  }
+
   render() {
     // <g> is just a wrapper it does nothing except let me use valid JSX markup
     // icons are based on generated icons.json from feather lib