fix: use same libary for dom sanitation as covapp

CovOpen · Feb 4, 2022 · a7492cd · a7492cd
1 parent cb88365
commit a7492cd
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 8 deletions.
diff --git a/covquestions-editor-app/package.json b/covquestions-editor-app/package.json
@@ -26,6 +26,7 @@
     "clsx": "^1.1.1",
     "comlink-loader": "^2.0.0",
     "copyfiles": "^2.4.1",
+    "dompurify": "^2.3.5",
     "fast-deep-equal": "^3.1.3",
     "jest-date-mock": "^1.0.8",
     "json-logic-js": "^2.0.0",

diff --git a/covquestions-editor-app/src/components/QuestionnaireExecution.tsx b/covquestions-editor-app/src/components/QuestionnaireExecution.tsx
@@ -5,7 +5,7 @@ import { Primitive, Question, Questionnaire, QuestionnaireEngine } from "@covope
 import { ResultComponent } from "./ResultComponent";
 import "typeface-fira-sans";
 import { QuestionFormComponent } from "./questionComponents/QuestionFormComponent";
-import sanitizeHtml from "sanitize-html";
+import DOMPurify from 'dompurify';
 
 type QuestionnaireExecutionProps = {
   currentQuestionnaire: Questionnaire;
@@ -137,9 +137,7 @@ export const QuestionnaireExecution: React.FC<QuestionnaireExecutionProps> = ({
                     <Typography
                       className={classes.questionDetails}
                       dangerouslySetInnerHTML={{
-                        __html: sanitizeHtml(currentQuestion.details, {
-                          allowedTags: sanitizeHtml.defaults.allowedTags.concat([ 'img' ]) 
-                        }),
+                        __html: DOMPurify.sanitize(currentQuestion.details),
                       }}
                     />
                   </Grid>

diff --git a/covquestions-editor-app/src/components/ResultComponent.tsx b/covquestions-editor-app/src/components/ResultComponent.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Result } from "@covopen/covquestions-js";
 import { createStyles, Grid, makeStyles, Paper, Typography } from "@material-ui/core";
-import sanitizeHtml from "sanitize-html";
+import DOMPurify from 'dompurify';
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -36,9 +36,7 @@ export const ResultComponent: React.FC<{ results: Result[] }> = ({ results }) =>
           <Typography
             className={classes.resultText}
             dangerouslySetInnerHTML={{
-              __html: sanitizeHtml(result.result.text, {
-                allowedTags: sanitizeHtml.defaults.allowedTags.concat([ 'img' ]) 
-              }),
+              __html: DOMPurify.sanitize(result.result.text),
             }}
           />
         </Grid>