Allow "target=_blank" in the note of classDiagram

[lazyky]

Description

There is no attr 'target' in the rendered page. When using classDiagram, links are required to open in new tabs.

classDiagram
    class test {
    }
    note for test "<a href='https://mermaid.js.org/' target='_blank'><code>mermaid</code></a>"

classDiagram
    class test {
    }
    note for test "<a href='https://mermaid.js.org/' target='_blank'><code>mermaid</code></a>"

Loading

Steps to reproduce

Using the live editor: https://mermaid.live/edit#pako:eNpNkMtuhDAMRX8FecMGAYHySMSwapdddVdFqtwhPKZAUDBSp4h_bwZQVW9sH1v3Wl7hqisFAq49zvNzh43BQY6OjZ04pGZy1oNsRxo1KafW5phJKNBpjaovbks0zSIIBmUG7Cr_NvvaNIHrEJpG0cX9-Oxx_HLLc6EIHuZlEWApATw4sb1mN5RArRqUBGHLStW49CRBjptdxYX02328giCzKA-WqUJS5_0gauxnSyccQazwDSJmuR_mYRixjGcszVIP7iAsjHjIo4QlcR4lYRxtHvxobRVCP-VPCY_yOE5YznPGd7n3ffjf86XqSJs_S7W3r-dTH2n7BaVdb7M

Screenshots

No response

Code Sample

No response

Setup

• Mermaid version: 10.3.0
• Browser and Version: [Chrome 115.0.5790.171]

Suggested Solutions

No response

Additional Context

No response

[tomperr]

Related to #3077
Also, we might update our DOMPurify configuration to allow the target attribute as the security issue can be resolved (as explained and discussed here)

[VividhPandey003]

Hey, this seems to be a very easy issue as to what I have perceived until now. Could you please explain me the issue better if possible. I am new to contribution to such large codebases.

Regards,
Vividh

[nirname]

@VividhPandey003
We have a class diagram and we can add a note to a class

classDiagram
class test { }
note for test "note about mermaid"

A note can have an HTML label in it, which will result as embedded foreignObject inside svg.

classDiagram
class test { }
note for test "<a href='https://mermaid.js.org/'><code>note about mermaid</code></a>"

And if we add _target attribute

classDiagram
class test { }
note for test "<a href='https://mermaid.js.org/' target='_blank'><code>note about mermaid</code></a>"

...rendered element will have an a tag inside, but _target attribute is missing

<a href="https://mermaid.js.org/"><code>note about mermaid</code></a>

[parthesh-tiwari]

Hello , I want to try some workarounds to solve this issue , I want to deploy it locally and deployment part is not mentioned in the documentation. Where can i find the documentation to deploy it on localhost so i can work on issue.
Thanks!

Best regards,
Parthesh

[nirname]

Hello, @parthesh-tiwari

There is a guide for setting up this locally for development, let us know if you are looking for something else.

[parthesh-tiwari]

Thanks @nirname , will surely let know if i need anything

[preetsahil]

The issue is mermaid repo right?
or the mermaid live editor
can you tell

[dharmik3504]

hello @nirname
Can you please advise is this the same repo where there is an error as it seems i wanted to debug mermaid.esm.mjs file and I'm not able to find it .

Thanks
Dharmik

[nirname]

Hi @dharmik3504, @preetsahil!

I have not reproduced this issue personally. You still have to find the exact place in the code. Highly likely it is related to this very repository, because live editor is not responsible for the rendering by itself. May be live editor it is not updated to the latest version of Mermaid or something else.

mermaid.esm.mjs is minimized version. Debugging minimized version is not the way to go either.

So check it. Set up the project for local development, add or update the example you want to debug at a demo page, open your browser and you will see if it works or not. In case it is not, not let us know, and we will close this issue. Otherwise, feel free to open PR with the changes.

Feel free to ask if you face any problems during deployment process. This is probably the most intimidating part of the contribution

[amnahid]

how to get it setup in http://localhost:9000/dev/example.html code? I mean where to paste or how to configure the code

classDiagram
class test { }
note for test "<a href='https://mermaid.js.org/' target='_blank'><code>note about mermaid</code></a>"

[nirname]

@amnahid you should edit the code inside pre tag with mermaid class, and your diagram will be updated. demo/dev pages are in .gitignore, so it is solely for local experiments

[amnahid]

@nirname Yeah this bug is valid, can you assign me to start working on it?

[nirname]

@amnahid No need to assign, you can dive in. Sometimes people get stuck while solving task or having some troubles continuing. Lets leave it unassigned so that the others could take their chances on the task. You can open PR, even in the middle of the process and mark it as a draft. If case you write resolves #issue_number in the PR description these two will be automatically bonded together.

[amnahid]

@nirname at first I thought the bug was occuring for dompurify package since it was removing the target="_blank". But when I commented like the code below of sanitizing function on mermaid\packages\mermaid\src\diagrams\common\common.ts file that issue was still there.

export const sanitizeText = (text: string, config: MermaidConfig): string => {
      // if (!text) {
          //   return text;
      // }
      // if (config.dompurifyConfig) {
          //   text = DOMPurify.sanitize(sanitizeMore(text, config), config.dompurifyConfig).toString();
      // } else {
          //   text = DOMPurify.sanitize(sanitizeMore(text, config), {
          //     FORBID_TAGS: ['style'],
          //   }).toString();
      // }
  return text;
};

Although on the console log target="_blank" was there but it was not rendering.

Can you explain how render is happened there?

[nirname]

@amnahid I have not tracked the problem down further than you had. It is possible that dagre-d3-es or dagre-wrapper somehow change the nodes

[nirname]

@amnahid I have performed debugging and have found out that removing sanitizeText at v2 class renderer was not enough, because it was also called in two other places for markdown and html labels. That means, we have to either alter sanitization function to our needs or rework that label helper as well as rendering function. Actually, some hacks are already out there tackling the similar problems for flowchart.

[amnahid]

@nirname when I was logging on markdown I was getting nothing (I mean no output) and same as html. When I was logging in decodeEntities() there was no target="_blank". When I tried to trace where the function is getting called I got a syntext error like this

Can it getting removed somewhere else?

[nirname]

@amnahid I think you have to debug sanitizeText. Put debugger inside and see what happens to a tag

[devbyharshit]

Hi @nirname

I've did the necessary changes but for some reason I'm not able to commit those. It's getting stuck on linting stage, is there anything specific I need to do.

PFA the video shows the issue is fixed.

Screen.Recording.2023-10-08.at.6.16.48.PM.mov

[nirname]

@REVERB283 Nicely done. I am afraid I cannot help with linting. You can always call linting step separately from git pre-commit hooks, using pnpm lint --fix. Open PR, as soon as you are ready, looking forward for it.

[devbyharshit]

@nirname any update on the MR review, also can you please assign it to me?

[nirname]

@REVERB283 no worries, attached PR is enough, and you can save this issue as a bookmark in GH