[Sanitize] sanitize content in Displayer and in Playground

KissKissBankBank · Apr 14, 2022 · 864ffc3 · 864ffc3
1 parent efb92d9
commit 864ffc3
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 12 deletions.
diff --git a/lib/draft-displayer.jsx b/lib/draft-displayer.jsx
@@ -1,5 +1,6 @@
 import { domElementHelper } from "@kisskissbankbank/kitten";
 import classNames from "classnames";
+import DOMPurify from 'dompurify'
 import {
   CompositeDecorator,
   ContentState,
@@ -75,7 +76,8 @@ const DraftDisplayer = ({
   configResponsiveImageHandler,
 }) => {
   if (!domElementHelper.canUseDom()) return renderRaw(text);
-  return isJSONContent(text) ? (
+  const clean = DOMPurify.sanitize(text)
+  return isJSONContent(clean) ? (
     <EditorProvider configResponsiveImageHandler={configResponsiveImageHandler}>
       <EditorStyle />
       <section
@@ -85,7 +87,7 @@ const DraftDisplayer = ({
       >
         <Editor
           onChange={() => null}
-          editorState={getinitialValue(text)}
+          editorState={getinitialValue(clean)}
           blockStyleFn={styleBlock({ isDisabled, useRichTextStyle, compact })}
           blockRenderMap={customBlockRenderMap}
           readOnly
@@ -95,7 +97,7 @@ const DraftDisplayer = ({
   ) : (
     <EditorProvider configResponsiveImageHandler={configResponsiveImageHandler}>
       <HtmlEditor
-        html={text}
+        html={clean}
         perfEnabled={perfEnabled}
         useRichTextStyle={useRichTextStyle}
       />

diff --git a/lib/utils.js b/lib/utils.js
@@ -10,6 +10,7 @@ import {
   Modifier,
   SelectionState,
 } from "draft-js";
+import DOMPurify from 'dompurify'
 import { OrderedMap } from "immutable";
 import flow from "lodash/fp/flow";
 import get from "lodash/fp/get";
@@ -44,10 +45,11 @@ export const getEditorValue = (value) => {
     return EditorState.createEmpty();
   }
   try {
+    const clean = DOMPurify.sanitize(value)
     return EditorState.createWithContent(
-      isJSONContent(value)
-        ? convertFromRaw(JSON.parse(value))
-        : convertFromRaw(getRawContent(value, true))
+      isJSONContent(clean)
+        ? convertFromRaw(JSON.parse(clean))
+        : convertFromRaw(getRawContent(clean, true))
     );
   } catch (e) {
     return EditorState.createEmpty();

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
   "dependencies": {
     "@kisskissbankbank/kitten": "^10.0.1",
     "classnames": "^2.3.1",
+    "dompurify": "^2.3.6",
     "draft-convert": "^2.1.12",
     "draft-js": "^0.11.7",
     "draft-js-export-html": "^1.4.1",