From f43da4c8ba76b808a5d5d2524437bcafef6b818c Mon Sep 17 00:00:00 2001
From: JubaAzul <118773284+JubaAzul@users.noreply.github.com>
Date: Wed, 15 Jan 2025 09:07:56 -0500
Subject: [PATCH] =?UTF-8?q?Risques=20s=C3=A9curit=C3=A9=20dangerouslySetIn?=
 =?UTF-8?q?nerHTML()=20Fixes=20#192?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/AnswerIcon.test.tsx             |  5 ++--
 .../GiftTemplate/GIFTTemplatePreview.tsx      |  3 +-
 .../MultipleChoiceQuestion.tsx                |  5 ++--
 .../NumericalQuestion/NumericalQuestion.tsx   |  3 +-
 .../ShortAnswerQuestion.tsx                   |  3 +-
 .../TrueFalseQuestion/TrueFalseQuestion.tsx   |  3 +-
 package-lock.json                             | 28 +++++++++++++++++++
 package.json                                  |  5 ++++
 8 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 package-lock.json
 create mode 100644 package.json

diff --git a/client/src/__tests__/components/GiftTemplate/templates/AnswerIcon.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/AnswerIcon.test.tsx
index b053976..36fcfa8 100644
--- a/client/src/__tests__/components/GiftTemplate/templates/AnswerIcon.test.tsx
+++ b/client/src/__tests__/components/GiftTemplate/templates/AnswerIcon.test.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import AnswerIcon from '../../../../components/GiftTemplate/templates/AnswerIcon';
+import DOMPurify from 'dompurify';
 
 describe('AnswerIcon', () => {
   test('renders correct icon when correct is true', () => {
-    const { container } = render(<div dangerouslySetInnerHTML={{ __html: AnswerIcon({ correct: true }) }} />);
+    const { container } = render(<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(AnswerIcon({ correct: true })) }} />);
     const svgElement = container.querySelector('svg');
 
     expect(svgElement).toBeInTheDocument();
@@ -20,7 +21,7 @@ describe('AnswerIcon', () => {
   });
 
   test('renders incorrect icon when correct is false', () => {
-    const { container } = render(<div dangerouslySetInnerHTML={{ __html: AnswerIcon({ correct: false }) }} />);
+    const { container } = render(<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(AnswerIcon({ correct: false })) }} />);
     const svgElement = container.querySelector('svg');
 
     expect(svgElement).toBeInTheDocument();
diff --git a/client/src/components/GiftTemplate/GIFTTemplatePreview.tsx b/client/src/components/GiftTemplate/GIFTTemplatePreview.tsx
index 4202b80..51dbd3f 100644
--- a/client/src/components/GiftTemplate/GIFTTemplatePreview.tsx
+++ b/client/src/components/GiftTemplate/GIFTTemplatePreview.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import Template, { ErrorTemplate } from './templates';
 import { parse } from 'gift-pegjs';
 import './styles.css';
+import DOMPurify from 'dompurify';
 
 interface GIFTTemplatePreviewProps {
     questions: string[];
@@ -73,7 +74,7 @@ const GIFTTemplatePreview: React.FC<GIFTTemplatePreviewProps> = ({
                 <div className="error">{error}</div>
             ) : isPreviewReady ? (
                 <div data-testid="preview-container">
-                    <div dangerouslySetInnerHTML={{ __html: items }}></div>
+                    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(items) }}></div>
                 </div>
             ) : (
                 <div className="loading">Chargement de la prévisualisation...</div>
diff --git a/client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx b/client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx
index 5f0e57d..4957d11 100644
--- a/client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx
+++ b/client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx
@@ -4,6 +4,7 @@ import '../questionStyle.css';
 import { Button } from '@mui/material';
 import textType, { formatLatex } from '../../GiftTemplate/templates/TextType';
 import { TextFormat } from '../../GiftTemplate/templates/types';
+import DOMPurify from 'dompurify';
 // import Latex from 'react-latex';
 
 type Choices = {
@@ -39,7 +40,7 @@ const MultipleChoiceQuestion: React.FC<Props> = (props) => {
     return (
         <div className="question-container">
             <div className="question content">
-                <div dangerouslySetInnerHTML={{ __html: textType({text: questionContent}) }} />
+                <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({text: questionContent})) }} />
             </div>
             <div className="choices-wrapper mb-1">
                 {choices.map((choice, i) => {
@@ -56,7 +57,7 @@ const MultipleChoiceQuestion: React.FC<Props> = (props) => {
                                     (choice.isCorrect ? '✅' : '❌')}
                                 <div className={`circle ${selected}`}>{alphabet[i]}</div>
                                 <div className={`answer-text ${selected}`}>
-                                    <div dangerouslySetInnerHTML={{ __html: formatLatex(choice.text.text) }} />
+                                    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(formatLatex(choice.text.text)) }} />
                                 </div>
                             </Button>
                             {choice.feedback && showAnswer && (
diff --git a/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx b/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx
index 449e4c7..7a9cec7 100644
--- a/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx
+++ b/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx
@@ -4,6 +4,7 @@ import '../questionStyle.css';
 import { Button, TextField } from '@mui/material';
 import textType from '../../GiftTemplate/templates/TextType';
 import { TextFormat } from '../../GiftTemplate/templates/types';
+import DOMPurify from 'dompurify';
 
 type CorrectAnswer = {
     numberHigh?: number;
@@ -34,7 +35,7 @@ const NumericalQuestion: React.FC<Props> = (props) => {
     return (
         <div className="question-wrapper">
             <div>
-                <div dangerouslySetInnerHTML={{ __html: textType({text: questionContent}) }} />
+                <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({text: questionContent})) }} />
             </div>
             {showAnswer ? (
                 <>
diff --git a/client/src/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion.tsx b/client/src/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion.tsx
index 3f134d6..28639c4 100644
--- a/client/src/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion.tsx
+++ b/client/src/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion.tsx
@@ -4,6 +4,7 @@ import '../questionStyle.css';
 import { Button, TextField } from '@mui/material';
 import textType from '../../GiftTemplate/templates/TextType';
 import { TextFormat } from '../../GiftTemplate/templates/types';
+import DOMPurify from 'dompurify';
 
 type Choices = {
     feedback: { format: string; text: string } | null;
@@ -28,7 +29,7 @@ const ShortAnswerQuestion: React.FC<Props> = (props) => {
     return (
         <div className="question-wrapper">
             <div className="question content">
-                <div dangerouslySetInnerHTML={{ __html: textType({text: questionContent}) }} />
+                <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({text: questionContent})) }} />
             </div>
             {showAnswer ? (
                 <>
diff --git a/client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx b/client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx
index 4597d6f..18b7038 100644
--- a/client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx
+++ b/client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx
@@ -4,6 +4,7 @@ import '../questionStyle.css';
 import { Button } from '@mui/material';
 import textType from '../../GiftTemplate/templates/TextType';
 import { TextFormat } from '../../GiftTemplate/templates/types';
+import DOMPurify from 'dompurify';
 
 interface Props {
     questionContent: TextFormat;
@@ -27,7 +28,7 @@ const TrueFalseQuestion: React.FC<Props> = (props) => {
     return (
         <div className="question-container">
             <div className="question content">
-            <div dangerouslySetInnerHTML={{ __html: textType({ text: questionContent }) }} />
+            <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({ text: questionContent })) }} />
             </div>
             <div className="choices-wrapper mb-1">
                 <Button
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..3c251e0
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,28 @@
+{
+  "name": "EvalueTonSavoir",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "dompurify": "^3.2.3"
+      }
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/dompurify": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.3.tgz",
+      "integrity": "sha512-U1U5Hzc2MO0oW3DF+G9qYN0aT7atAou4AgI0XjWz061nyBPbdxkfdhfy5uMgGn6+oLFCfn44ZGbdDqCzVmlOWA==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..a969a9f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "dompurify": "^3.2.3"
+  }
+}