Trying to use programmatically, getting errors about DOMPurify

[Madd0g]

Description

within a new typescript project, when trying to parse a diagram from text, I'm getting errors regarding DOMPurify - DOMPurify.addHook is not a function and DOMPurify.sanitize is not a function.

I'm suspecting it has something to do with the "module" configuration of typescript, but I'm not sure.

Steps to reproduce

package.json

  "type": "module",
  "scripts": {
    "dev": "tsc --watch",
    "start": "node dist/index.js"
  },

tsconfig.json

        "module": "NodeNext" /* Specify what module code is generated. */,
        "moduleResolution": "NodeNext" /* Specify how TypeScript looks up a file from a given module specifier. */,
        "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,

index.ts

import { readFile } from 'fs/promises';
import mermaid from 'mermaid';

// nodejs module import meta local folder url
import path from 'path';
import url from 'url';

const __dirname = path.join(
    path.dirname(url.fileURLToPath(import.meta.url)),
    '..',
);
    const graphData = await readFile(
        path.join(__dirname, 'src', 'my-graph.mermaid'),
        'utf8',
    );
    // Configure Mermaid
    mermaid.initialize(
        mermaid.mermaidAPI.setConfig({
            securityLevel: 'loose',
            startOnLoad: false,
        }),
    );

    // Parse the graph
    const parser = (
        await mermaid.mermaidAPI.getDiagramFromText(graphData)
    ).getParser().parser.yy as any;

Screenshots

No response

Code Sample

No response

Setup

• Mermaid version:10.7.0
• Browser and Version: NodeJS

Suggested Solutions

No response

Additional Context

No response

[chris-brace]

i have a weird feeling the solution is this: https://github.com/kkomelin/isomorphic-dompurify

[chris-brace]

in the mean time it might be viable look at how mermaid-cli does it https://github.com/mermaid-js/mermaid-cli/blob/master/src/index.js#L234

spoilers, they're running puppeteer first then executing mermaid inside the page they create.

[Moult-ux]

Hello,

I have the same issue: the function mermaid.mermaidAPI.getDiagramFromText(graphData) returns the error "DOMPurify.addHook is not a function" when sending certain types of mermaid graphs.

With basic graphs like this one: "graph TD; A-->B", it works. However, as soon as I add text on the links or try to add a description on the nodes, I get the aforementioned error.

The code is executed on the server side with node.js. From what I understand, the getDiagramFromText function must use DOMPurify, which only works on the client side.

I call the getDiagramFromText function to be able to retrieve a JavaScript object with the details of the nodes and transitions.

Has anyone managed to work around this issue? Is this a new problem?

Thank you in advance for your help, and congratulations to the contributors of this great project!

[Madd0g]

Has anyone managed to work around this issue?

I remember when I created the issue I changed some code to overcome the problem (I didn't need purification so I removed the calls to it), it was only a couple of places.

IIRC, it was fairly simple to remove, so it should be possible to create a configuration option to disable the purification feature?

I never read the actual source, just the library code that ships from npm, so take it with a grain of salt.

[Moult-ux]

Thank you for your feedback, MaddOg.

I didn't understand how you managed to remove the call to DOMPurify. Do you mean that you modified the mermaid NPM package?

[groby]

Having the same issue - indirectly via mermaid-to-excalidraw, but still. Essentially, mermaid is not usable in nodejs server apps right now. A possible fix is hotpatching DOMPurify:

const DOMPurify = createDOMPurify(dom.window);
console.log('DOMPurify:', DOMPurify);
global.DOMPurify = DOMPurify;

// And force my hooks
const originalSetupDompurifyHooks = mermaid.setupDompurifyHooks;
mermaid.setupDompurifyHooks = function (dompurifyInstance) {
  return originalSetupDompurifyHooks(global.DOMPurify || dompurifyInstance);
};

That possibly (haven't tried too hard) works for direct mermaid dependencies. It still doesn't fix the issue for packages the have a bundled mermaid.

I strongly suspect that #5204 (comment) (isomorphic DOMPurify) is indeed the answer.