add sanitization to dangerouslySetInnerHTML values

package.json

@@ -39,6 +39,7 @@
     "brace": "^0.11.1",
     "core-js": "^2.5.1",
     "custom-event-polyfill": "^0.3.0",
+    "dompurify": "^1.0.8",
     "draft-convert": "^2.0.0",
     "draft-js": "^0.10.3",
     "draft-js-export-html": "^1.2.0",

src/react/Editor/convertToHTML.js

@@ -4,6 +4,8 @@
 import React from 'react';
 import { convertToHTML } from 'draft-convert';
 
+import { sanitizeHTML } from '../utils/utils';
+
 export default contentState =>
   convertToHTML({
     styleToHTML: () => {},
@@ -22,7 +24,7 @@ export default contentState =>
             <div>
               <div
                 id={`liveblog-codeblock-identifier-${entity.getData().title.replace(/\s+/g, '-')}`}
-                dangerouslySetInnerHTML={{ __html: entity.getData().code }}
+                dangerouslySetInnerHTML={{ __html: sanitizeHTML(entity.getData().code) }}
               />
             </div>
           );

src/react/components/AuthorSelectOption.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
+import { sanitizeHTML } from '../utils/utils';
+
 class AuthorSelectOption extends Component {
   handleMouseDown(event) {
     const { onSelect, option } = this.props;
@@ -28,7 +30,10 @@ class AuthorSelectOption extends Component {
         onMouseEnter={this.handleMouseEnter.bind(this)}
         onMouseMove={this.handleMouseMove.bind(this)}
       >
-        { option.avatar && <div dangerouslySetInnerHTML={{ __html: option.avatar }} /> }
+        {
+          option.avatar &&
+          <div dangerouslySetInnerHTML={{ __html: sanitizeHTML(option.avatar) }} />
+        }
         {option.name}
       </div>
     );

src/react/components/Event.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { timeAgo } from '../utils/utils';
+
+import { timeAgo, sanitizeHTML } from '../utils/utils';
 
 const Event = ({ event, click, onDelete, canEdit, utcOffset, dateFormat }) => (
   <li className="liveblog-event">
@@ -14,7 +15,7 @@ const Event = ({ event, click, onDelete, canEdit, utcOffset, dateFormat }) => (
         <span
           className="liveblog-event-content"
           onClick={click}
-          dangerouslySetInnerHTML={{ __html: event.key_event_content }}
+          dangerouslySetInnerHTML={{ __html: sanitizeHTML(event.key_event_content) }}
         />
       </div>
     </div>

src/react/containers/EntryContainer.js

@@ -5,7 +5,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import * as apiActions from '../actions/apiActions';
 import * as userActions from '../actions/userActions';
-import { triggerOembedLoad, timeAgo, formattedTime } from '../utils/utils';
+import { triggerOembedLoad, timeAgo, formattedTime, sanitizeHTML } from '../utils/utils';
 import EditorContainer from '../containers/EditorContainer';
 
 class EntryContainer extends Component {
@@ -88,10 +88,10 @@ class EntryContainer extends Component {
                     { author.avatar &&
                       <div
                         className="liveblog-meta-author-avatar"
-                        dangerouslySetInnerHTML={{ __html: author.avatar }} />
+                        dangerouslySetInnerHTML={{ __html: sanitizeHTML(author.avatar) }} />
                     }
                     <span className="liveblog-meta-author-name"
-                      dangerouslySetInnerHTML={{ __html: author.name }} />
+                      dangerouslySetInnerHTML={{ __html: sanitizeHTML(author.name) }} />
                   </div>
                 ))
               }
@@ -107,7 +107,7 @@ class EntryContainer extends Component {
               : (
                 <div
                   className="liveblog-entry-content"
-                  dangerouslySetInnerHTML={{ __html: entry.render }}
+                  dangerouslySetInnerHTML={{ __html: sanitizeHTML(entry.render) }}
                 />
               )
           }

src/react/containers/PreviewContainer.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { getPreview } from '../services/api';
 import Loader from '../components/Loader';
+import { sanitizeHTML } from '../utils/utils';
 
 class PreviewContainer extends Component {
   constructor(props) {
@@ -41,7 +42,7 @@ class PreviewContainer extends Component {
     return (
       <div
         className="liveblog-preview"
-        dangerouslySetInnerHTML={{ __html: entryContent }}
+        dangerouslySetInnerHTML={{ __html: sanitizeHTML(entryContent) }}
       />
     );
   }

src/react/utils/utils.js

@@ -1,3 +1,5 @@
+import DOMPurify from 'dompurify';
+
 import moment from './extendedMoment';
 
 /* eslint-disable no-param-reassign */
@@ -200,3 +202,35 @@ export const getScrollToId = (entries, key) => {
 
   return `id_${entries[0].id}`;
 };
+
+/**
+ * Sanitize HTML for output. Help prevent XSS attacks.
+ *
+ * @link https://www.npmjs.com/package/dompurify
+ * @param  {string} dirty HTML to sanitize
+ * @return {string} sanitized HTML
+ */
+export const sanitizeHTML = (dirty) => {
+  // Whitelist iframes for the plugins 'embded media' feature.
+  const iframeWhitelist = [
+    'www.hulu.com',
+    'player.hulu.com',
+    'open.spotify.com',
+    'player.vimeo.com',
+    'www.youtube.com',
+    // Instagram and Twitter don't use iframes.
+  ];
+  const regex = RegExp(`^(https:|)//(${iframeWhitelist.join('|')})/`, 'im');
+  DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+    if (node.tagName === 'IFRAME') {
+      const iframeSrc = node.getAttribute('src');
+      if (iframeSrc && !iframeSrc.match(regex)) {
+        node.removeAttribute('src');
+      }
+    }
+  });
+  const clean = DOMPurify.sanitize(dirty, {
+    ADD_TAGS: ['iframe'],
+  });
+  return clean;
+};