chore: update dependencies and improve MermaidBlock security

- Updated mermaid from version 11.13.0 to 9.1.7 for compatibility.
- Upgraded next from version 14.2.21 to ^14.2.35 for the latest features and fixes.
- Added @types/dompurify and isomorphic-dompurify for improved sanitization.
- Replaced innerHTML assignment in MermaidBlock with sanitized SVG using DOMPurify.
- Updated eslint-config-next to ^16.2.4 for better linting support.

web/experience/package.json

@@ -13,13 +13,15 @@
     "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,md}\""
   },
   "dependencies": {
+    "@types/dompurify": "^3.0.5",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "framer-motion": "^11.2.10",
+    "isomorphic-dompurify": "^3.10.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.395.0",
-    "mermaid": "^11.13.0",
-    "next": "14.2.21",
+    "mermaid": "^9.1.7",
+    "next": "^14.2.35",
     "react": "^18",
     "react-dom": "^18",
     "react-markdown": "^10.1.0",
@@ -33,7 +35,7 @@
     "@types/react-dom": "^18",
     "autoprefixer": "^10.4.19",
     "eslint": "^8",
-    "eslint-config-next": "14.2.21",
+    "eslint-config-next": "^16.2.4",
     "postcss": "^8",
     "prettier": "^3.2.0",
     "prettier-plugin-tailwindcss": "^0.5.0",

web/experience/src/components/CertificateModal.tsx

@@ -2,6 +2,7 @@
 
 import { X, Printer, Download, Award, ShieldCheck } from "lucide-react";
 import { CertificateResponse } from "@/lib/api";
+import DOMPurify from "isomorphic-dompurify";
 
 interface CertificateModalProps {
     certificate: CertificateResponse;
@@ -49,13 +50,10 @@ export default function CertificateModal({ certificate, onClose }: CertificateMo
                 {/* Certificate Content Wrapper */}
                 <div className="flex-1 overflow-y-auto p-4 md:p-12 flex items-center justify-center bg-slate-100 dark:bg-black/40">
                     <div className="certificate-container shadow-2xl ring-1 ring-black/5">
-                        {/* 
-                            We inject the HTML directly. 
-                            Note: The backend must sanitize this OR we trust our own generated template.
-                        */}
+                        {/* Sanitizar HTML con DOMPurify antes de inyectar */}
                         <div 
                             className="bg-white"
-                            dangerouslySetInnerHTML={{ __html: certificate.certificate_html }} 
+                            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(certificate.certificate_html) }} 
                         />
                     </div>
                 </div>

web/experience/src/components/blocks/MermaidViewer.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import mermaid from "mermaid";
+import DOMPurify from "isomorphic-dompurify";
 import { Block } from "@/lib/api";
 
 interface MermaidViewerProps {
@@ -29,7 +30,8 @@ export default function MermaidViewer({ block }: MermaidViewerProps) {
                 mermaidRef.current.innerHTML = "";
                 const { svg } = await mermaid.render(`mermaid-exp-${block.id}`, block.mermaid_code);
                 if (mermaidRef.current) {
-                    mermaidRef.current.innerHTML = svg;
+                    // Sanitizar SVG antes de inyectar
+                    mermaidRef.current.innerHTML = DOMPurify.sanitize(svg);
                 }
             } catch (error: any) {
                 console.error("Mermaid parsing error:", error);

web/studio/package.json

@@ -14,12 +14,14 @@
   },
   "dependencies": {
     "@hello-pangea/dnd": "^18.0.1",
+    "@types/dompurify": "^3.0.5",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "framer-motion": "^11.2.10",
+    "isomorphic-dompurify": "^3.10.0",
     "lucide-react": "^0.395.0",
-    "mermaid": "^11.13.0",
-    "next": "14.2.21",
+    "mermaid": "^9.1.7",
+    "next": "^14.2.35",
     "react": "^18",
     "react-dom": "^18",
     "react-markdown": "^10.1.0",
@@ -31,7 +33,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "14.2.21",
+    "eslint-config-next": "^16.2.4",
     "postcss": "^8",
     "prettier": "^3.2.0",
     "prettier-plugin-tailwindcss": "^0.5.0",

web/studio/src/components/blocks/MermaidBlock.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useRef } from "react";
 import { Wand2, Loader2, Code2, Play } from "lucide-react";
 import { cmsApi } from "@/lib/api";
 import mermaid from "mermaid";
+import DOMPurify from "isomorphic-dompurify";
 
 interface MermaidBlockProps {
     id: string;
@@ -48,7 +49,8 @@ export default function MermaidBlock({
             mermaidRef.current.innerHTML = "";
             const { svg } = await mermaid.render(`mermaid-${id}`, mermaid_code);
             if (mermaidRef.current) {
-                mermaidRef.current.innerHTML = svg;
+                // Sanitizar SVG antes de inyectar
+                mermaidRef.current.innerHTML = DOMPurify.sanitize(svg);
             }
         } catch (error: any) {
             console.error("Mermaid parsing error:", error);