Merge pull request #330 from defnull/develop

Sanitize raw HTML content and fix replies

Author: antobinary

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>