Add DOMPurify to sanitize DangerouslySetInnerHTML

RocketChat · Sep 18, 2024 · 5aae94a · 5aae94a
1 parent c8a68b3
commit 5aae94a
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -23,5 +23,8 @@
     "husky": "^9.0.11",
     "lerna": "^6.6.2",
     "typescript": "^5.1.3"
+  },
+  "dependencies": {
+    "dompurify": "^3.1.6"
   }
 }
diff --git a/packages/markups/src/elements/Emoji.js b/packages/markups/src/elements/Emoji.js
@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import emojione from 'emoji-toolkit';
 import { Box } from '@embeddedchat/ui-elements';
+import DOMPurify from 'dompurify';
 import { EmojiStyles as styles } from './elements.styles';
 
 const Emoji = ({ big = false, emoji }) => {
@@ -21,7 +22,7 @@ const Emoji = ({ big = false, emoji }) => {
     <Box
       is="span"
       css={[styles.emojione, styles.emojiInMessage]}
-      dangerouslySetInnerHTML={{ __html: emojiHtml }}
+      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(emojiHtml) }}
     />
   );
 };

diff --git a/packages/react/src/views/EmojiReaction/EmojiReaction.js b/packages/react/src/views/EmojiReaction/EmojiReaction.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import emojione from 'emoji-toolkit';
 import { css } from '@emotion/react';
 import { Box } from '@embeddedchat/ui-elements';
+import DOMPurify from 'dompurify';
 
 const EmojiReaction = ({ body }) => {
   const emojiHtml = emojione.toImage(body);
@@ -12,7 +13,7 @@ const EmojiReaction = ({ body }) => {
       css={css`
         font-size: 1rem;
       `}
-      dangerouslySetInnerHTML={{ __html: emojiHtml }}
+      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(emojiHtml) }}
     />
   );
 };