Merge pull request #3 from mlnor27/master
Handling SSR with JSDOM window to work with DOMPurify
This commit is contained in:
commit
af7b09e2db
@ -44,6 +44,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"dompurify": "^1.0.5"
|
||||
"dompurify": "^1.0.5",
|
||||
"jsdom": "^12.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 };
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user