8000 DOMPurify.addHook function not available in Mermaid when parsing text · Issue #6531 · mermaid-js/mermaid · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

DOMPurify.addHook function not available in Mermaid when parsing text #6531

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
thaheemDev opened this issue Apr 25, 2025 · 3 comments
Open

DOMPurify.addHook function not available in Mermaid when parsing text #6531

thaheemDev opened this issue Apr 25, 2025 · 3 comments
Labels
Area: Development Contributor needed Status: Awaiting PR Type: Bug / Error Something isn't working or is incorrect Type: Other Not an enhancement or a bug

Comments

@thaheemDev
Copy link
thaheemDev commented Apr 25, 2025 •
edited
Loading

Description

I encountered an issue while using the Mermaid library (both version 10.x.x and the latest version) in a Node.js environment. When I attempt to parse Mermaid diagrams using mermaid.parse(), I encounter the following error:

vbnet
Copy
Edit
Error: DOMPurify.addHook is not a function
This error seems to be related to the way DOMPurify is being used or initialized within Mermaid.

Steps to reproduce

Install mermaid (v10.x.x or the latest version) in your project.

bash
Copy
Edit
npm install mermaid
Set up a basic Node.js application and try using the mermaid.parse() function to parse a Mermaid diagram.

Ensure that securityLevel is set to 'strict' or that sanitization is enabled, which internally uses DOMPurify.

Run the application with a diagram text passed to the API endpoint.

The error DOMPurify.addHook is not a function occurs during the parsing of the diagram.

Screenshots

Image

Code Sample

// server.js

const express = require('express');
const app = express();

// Middleware to parse JSON bodies
app.use(express.json());

// Dynamically import mermaid
const validateMermaid = async (text) => {
  try {
    const mermaid = await import('mermaid');
    
    // Parse the Mermaid diagram text using mermaid.parse
    const result = await mermaid.default.parse(text, { suppressErrors: false });

    // If parsing succeeds, return the result
    return { valid: true, result };
  } catch (error) {
    // If an error occurs during parsing, return the error message
    return { valid: false, error: error.message };
  }
};

// API endpoint to validate Mermaid syntax
app.post("/api/validate-mermaid", async (req, res) => {
  const { text } = req.body;  // Expecting Mermaid text to be sent in the request body

  if (!text) {
    return res.status(400).json({ error: "Mermaid diagram text is required" });
  }

  const result = await validateMermaid(text);

  if (result.valid) {
    res.status(200).json(result);
  } else {
    res.status(400).json(result);
  }
});

// Start the server on port 4000
app.listen(4000, () => {
  console.log('Server is running on http://localhost:4000');
});

Setup

Setup:
Ensure Node.js is installed (version 18.x.x or higher).

Create a new Node.js project or use an existing one.

Install express and mermaid as dependencies:

bash
Copy
Edit
npm install express mermaid
Create the server file (server.js) and paste the above code.

Start the server by running:

bash
Copy
Edit
node server.js
Make a POST request to http://localhost:4000/api/validate-mermaid with a Mermaid diagram text in the body.

Suggested Solutions

Suggested Solutions:
Update Mermaid: Ensure that you are using the latest version of mermaid that supports the most recent changes to DOMPurify. If the issue is related to the integration of DOMPurify in Mermaid, updating to the latest version may resolve the issue.

Use securityLevel: 'none': As a temporary workaround, you can set securityLevel to 'none' to bypass sanitization, but this is not recommended for production environments as it may expose the application to security risks:

javascript
Copy
Edit
mermaid.initialize({
securityLevel: 'none', // No sanitization
theme: 'default',
startOnLoad: false,
});
Manual DOMPurify Configuration: If you need sanitization enabled, try manually configuring DOMPurify and passing it to mermaid instead of relying on the built-in sanitization:

javascript
Copy
Edit
const DOMPurify = require('dompurify');
const mermaid = require('mermaid');

mermaid.initialize({
sanitize: true,
purify: DOMPurify, // Explicitly pass DOMPurify
});

Additional Context

Additional Context:
Versions: This issue occurs in both version 10.x.x and the latest version of mermaid.

Error Message: The error DOMPurify.addHook is not a function is thrown during the parsing of Mermaid diagrams.

Environment:

Mermaid Version: v10.x.x and latest

Node.js Version: 18.x.x

DOMPurify Version: Latest (if installed manually)

Operating System: macOS (or specify your OS)

Error Handling: The error prevents Mermaid from successfully parsing the diagram unless sanitization is disabled, which is not a suitable long-term solution due to security concerns.

Request:
Could you provide guidance or a fix to prevent this error while maintaining sanitization enabled?

Is this a known issue with the integration of DOMPurify in Mermaid?

Are there any specific steps for correctly configuring DOMPurify within Mermaid to avoid this error?
@thaheemDev thaheemDev added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Apr 25, 2025
@sidharthv96
Copy link
Member

We currently don't support Node as a runtime, so our team won't be able to prioritize a fix.
But happy to review PRs from the community with fixes.

@sidharthv96 sidharthv96 added Contributor needed Type: Other Not an enhancement or a bug Area: Development Status: Awaiting PR and removed Status: Triage Needs to be verified, categorized, etc labels May 8, 2025
@thaheemDev
Copy link
Author

✅ Fix provided: DOMPurify addHook error in Node.js runtime

I’ve resolved the issue with DOMPurify.addHook is not a function when using Mermaid in a Node.js environment. The fix involves explicitly creating a DOM window using jsdom and configuring DOMPurify with that window. This allows Mermaid to work correctly with sanitization enabled.

Key changes:

  • Created a virtual DOM using jsdom
  • Initialized DOMPurify with the virtual window
  • Assigned window and DOMPurify to the global scope (required by Mermaid internally)
  • Set securityLevel: "loose" for balance between security and functionality
const { window } = new JSDOM("");
const DOMPurify = createDOMPurify(window);
(global as any).window = window;
(global as any).DOMPurify = DOMPurify;

This allows mermaid.parse() to work without triggering the addHook error.

Let me know if you'd like me to open a PR with this fix! 🙌

@thaheemDev
Copy link
Author

We currently don't support Node as a runtime, so our team won't be able to prioritize a fix. But happy to review PRs from the community with fixes.

Fixed for Now..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Area: Development Contributor needed Status: Awaiting PR Type: Bug / Error Something isn't working or is incorrect Type: Other Not an enhancement or a bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@sidharthv96 @thaheemDev
0