From 1813141f2c334cd355d4e5bc1b70030906ea1b71 Mon Sep 17 00:00:00 2001
From: robin <robin@rnode.me>
Date: Mon, 30 Jan 2023 14:21:24 +0800
Subject: [PATCH] feat(ui): filter unsafe tags in html to prevent xss

---
 ui/src/components/Editor/Viewer.tsx |  8 +++++---
 ui/src/utils/common.ts              | 10 ++++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/Editor/Viewer.tsx b/ui/src/components/Editor/Viewer.tsx
index 93553887..217c0986 100644
--- a/ui/src/components/Editor/Viewer.tsx
+++ b/ui/src/components/Editor/Viewer.tsx
@@ -8,6 +8,7 @@ import {
 } from 'react';
 
 import { markdownToHtml } from '@/services';
+import { htmlToReact } from '@/utils';
 
 import { htmlRender } from './utils';
 
@@ -38,6 +39,7 @@ const Index = ({ value }, ref) => {
     }
 
     previewRef.current?.scrollTo(0, scrollTop);
+
     htmlRender(previewRef.current);
   }, [html]);
   useImperativeHandle(ref, () => {
@@ -49,9 +51,9 @@ const Index = ({ value }, ref) => {
   return (
     <div
       ref={previewRef}
-      className="preview-wrap position-relative p-3 bg-light rounded text-break text-wrap mt-2 fmt"
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
+      className="preview-wrap position-relative p-3 bg-light rounded text-break text-wrap mt-2 fmt">
+      {htmlToReact(html)}
+    </div>
   );
 };
 
diff --git a/ui/src/utils/common.ts b/ui/src/utils/common.ts
index e3e53652..a7c6b12d 100644
--- a/ui/src/utils/common.ts
+++ b/ui/src/utils/common.ts
@@ -1,4 +1,6 @@
 import i18next from 'i18next';
+import parse from 'html-react-parser';
+import * as DOMPurify from 'dompurify';
 
 const Diff = require('diff');
 
@@ -214,6 +216,13 @@ function diffText(newText: string, oldText: string): string {
     ?.replace(/<input/gi, '&lt;input');
 }
 
+function htmlToReact(html: string) {
+  const cleanedHtml = DOMPurify.sanitize(html, {
+    USE_PROFILES: { html: true },
+  });
+  return parse(cleanedHtml);
+}
+
 export {
   thousandthDivision,
   formatCount,
@@ -228,4 +237,5 @@ export {
   labelStyle,
   handleFormError,
   diffText,
+  htmlToReact,
 };