From e75b465144905ec884fb0fefaa609596292d608b Mon Sep 17 00:00:00 2001
From: gtsp233 <gtsp233@gmail.com>
Date: Thu, 30 Nov 2023 16:47:49 -0500
Subject: [PATCH] fix: xss

---
 03-react-rutas/package.json              | 1 +
 03-react-rutas/src/components/Message.js | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/03-react-rutas/package.json b/03-react-rutas/package.json
index 2bc326d..0301f04 100644
--- a/03-react-rutas/package.json
+++ b/03-react-rutas/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "dompurify": "^3.0.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
diff --git a/03-react-rutas/src/components/Message.js b/03-react-rutas/src/components/Message.js
index fc77673..e5daaed 100644
--- a/03-react-rutas/src/components/Message.js
+++ b/03-react-rutas/src/components/Message.js
@@ -1,4 +1,5 @@
 import React from "react";
+import DOMPurify from "dompurify";
 
 const Message = ({ msg, bgColor }) => {
   let styles = {
@@ -10,10 +11,11 @@ const Message = ({ msg, bgColor }) => {
     backgroundColor: bgColor,
   };
 
+  const sanitizedMsg = DOMPurify.sanitize(msg);
   return (
     <div style={styles}>
       {/* <p>{msg}</p> */}
-      <p dangerouslySetInnerHTML={{ __html: msg }} />
+      <p dangerouslySetInnerHTML={{ __html: sanitizedMsg }} />
     </div>
   );
 };