Sanitize raw HTML content and fix replies

While we usually can trust chat messages to originate from 'save' Markdown, it's still best practice to never inject user provided HTML directly into the DOM.

This patch also fixes visible HTML code in relies.

Author: defnull

package-lock.json

@@ -7,6 +7,7 @@
     "bowser": "^2.11.0",
     "classnames": "^2.3.1",
     "darkreader": "^4.9.46",
+    "dompurify": "^3.3.0",
     "linkify-react": "^3.0.4",
     "linkifyjs": "^3.0.5",
     "prop-types": "^15.8.1",
@@ -15,13 +16,13 @@
     "react-intl": "^6.2.5",
     "react-router-dom": "^6.4.3",
     "react-sizeme": "^3.0.2",
+    "recharts": "^2.12.7",
     "sass": "^1.52.1",
     "semver": "^7.5.2",
+    "styled-components": "^6.1.13",
     "tldraw-v1": "npm:@tldraw/tldraw@^1.2.7",
     "video.js": "^7.21.1",
-    "videojs-seek-buttons": "^3.0.1",
-    "recharts": "^2.12.7",
-    "styled-components": "^6.1.13"
+    "videojs-seek-buttons": "^3.0.1"
   },
   "devDependencies": {
     "react-scripts": "^5.0.1"

package.json

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import '../index.scss';
+import DOMPurify from 'dompurify';
 
 const propTypes = {
   active: PropTypes.bool,
@@ -34,9 +35,9 @@ const Reply = ({
   return (
     <span
       onClick={handleClickReply}
-      className={cx('reply-tag', {inactive: !active})}
+      className={cx('reply-tag', 'text-vanilla', {inactive: !active})}
+      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(text) }}
     >
-      {text}
     </span>
   );
 };

src/components/chat/messages/reply/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import DOMPurify from 'dompurify';
 
 const propTypes = {
   active: PropTypes.bool,
@@ -21,7 +22,7 @@ const Text = ({
   return (
     <div
       className='text-vanilla'
-      dangerouslySetInnerHTML={{ __html: text }}
+      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(text) }}
     />
   );
 };

src/components/chat/messages/user/text.js

@@ -6,6 +6,7 @@ import {
 import { ID } from 'utils/constants';
 import storage from 'utils/data/storage';
 import './index.scss';
+import DOMPurify from 'dompurify';
 
 const intlMessages = defineMessages({
   aria: {
@@ -26,7 +27,7 @@ const Notes = () => {
     >
       <div className="notes">
         <div
-          dangerouslySetInnerHTML={{ __html: storage.notes }}
+          dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(storage.notes) }}
           style={{ width: '100%' }}
         />
       </div>