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.
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user