[feature] Sanitize XSS content (#494)

Co-authored-by: Ian Seabock (Centific Technologies Inc) <[email protected]>
microsoft · Jan 19, 2024 · 7a7a95a · 7a7a95a
1 parent 012c30e
commit 7a7a95a
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 114 deletions.
diff --git a/frontend/src/components/Answer/Answer.tsx b/frontend/src/components/Answer/Answer.tsx
@@ -1,6 +1,7 @@
 import { FormEvent, useEffect, useMemo, useState, useContext } from "react";
 import { useBoolean } from "@fluentui/react-hooks"
 import { Checkbox, DefaultButton, Dialog, FontIcon, Stack, Text } from "@fluentui/react";
+import DOMPurify from 'dompurify';
 import { AppStateContext } from '../../state/AppProvider';
 
 import styles from "./Answer.module.css";
@@ -12,6 +13,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import supersub from 'remark-supersub'
 import { ThumbDislike20Filled, ThumbLike20Filled } from "@fluentui/react-icons";
+import { XSSAllowTags } from "../../constants/xssAllowTags";
 
 interface Props {
     answer: AskResponse;
@@ -183,7 +185,7 @@ export const Answer = ({
                             <ReactMarkdown
                                 linkTarget="_blank"
                                 remarkPlugins={[remarkGfm, supersub]}
-                                children={parsedAnswer.markdownFormatText}
+                                children={DOMPurify.sanitize(parsedAnswer.markdownFormatText, {ALLOWED_TAGS: XSSAllowTags})}
                                 className={styles.answerText}
                             />
                         </Stack.Item>

diff --git a/frontend/src/constants/xssAllowTags.ts b/frontend/src/constants/xssAllowTags.ts
@@ -0,0 +1 @@
+export const XSSAllowTags = ['iframe', 'a', 'img', 'svg', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'p', 'span', 'small', 'del', 'img', 'pictrue', 'embed', 'video', 'audio', 'i', 'u', 'sup', 'sub', 'strong', 'strike', 'code', 'pre', 'body', 'section', 'article', 'footer', 'table', 'tr', 'td', 'th', 'thead', 'tbody', 'tfooter', 'ul', 'ol', 'li'];
diff --git a/frontend/src/pages/chat/Chat.tsx b/frontend/src/pages/chat/Chat.tsx
@@ -7,9 +7,11 @@ import remarkGfm from 'remark-gfm'
 import rehypeRaw from "rehype-raw";
 import uuid from 'react-uuid';
 import { isEmpty } from "lodash-es";
+import DOMPurify from 'dompurify';
 
 import styles from "./Chat.module.css";
 import Contoso from "../../assets/Contoso.svg";
+import { XSSAllowTags } from "../../constants/xssAllowTags";
 
 import {
     ChatMessage,
@@ -732,7 +734,7 @@ const Chat = () => {
                                 <ReactMarkdown
                                     linkTarget="_blank"
                                     className={styles.citationPanelContent}
-                                    children={activeCitation.content}
+                                    children={DOMPurify.sanitize(activeCitation.content, {ALLOWED_TAGS: XSSAllowTags})}
                                     remarkPlugins={[remarkGfm]}
                                     rehypePlugins={[rehypeRaw]}
                                 />

diff --git a/static/assets/index-87c2be60.js b/static/assets/index-87c2be60.js
diff --git a/static/assets/index-87c2be60.js.map b/static/assets/index-87c2be60.js.map
diff --git a/static/assets/index-c8bc2c87.js b/static/assets/index-c8bc2c87.js
diff --git a/static/assets/index-c8bc2c87.js.map b/static/assets/index-c8bc2c87.js.map
diff --git a/static/index.html b/static/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/x-icon" href="/favicon.ico?v=2" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Contoso</title>
-    <script type="module" crossorigin src="/assets/index-87c2be60.js"></script>
+    <script type="module" crossorigin src="/assets/index-c8bc2c87.js"></script>
     <link rel="stylesheet" href="/assets/index-5e49c158.css">
   </head>
   <body>