Support links in Mermaid diagrams via parent window delegation

What does this MR do and why?

Fixes:

Solution

Links can't open from within the sandboxed iframe, so delegate their clicks to the parent window:

  1. Sandbox side (mermaid_sandbox.js): intercept anchor clicks (left and middle) with preventDefault and post the href to the parent window
  2. Parent side (render_sandboxed_mermaid.js and the rich text editor's sandboxed_mermaid.vue): handle the message in a message listener, validate the href with isValidURL, then open it in a new tab with a regular browsing context
  3. Drop allow-popups, since the iframe no longer needs to open popups itself

Links now open in a new tab regardless of their target attribute.

---
config:
  fontSize: 14
---
sequenceDiagram
    autonumber
    actor User
    participant Frame as Sandboxed iframe
    participant Parent as Parent window

    User->>Frame: clicks a link
    Frame->>Frame: intercept the click (preventDefault)
    Frame-)Parent: postMessage({ href })
    Parent->>Parent: verify the sender iframe (origin/source, existing)
    Parent->>Parent: validate the URL (isValidURL)
    create participant NewTab as New tab
    Parent->>NewTab: open
    Note over NewTab: regular browsing context

Security considerations

  • The sandbox restrictions are not relaxed (Make Mermaid sandboxing less tight to allow uns... (!214845 - closed), which relaxed them, was rejected by AppSec). This MR goes the other way: it removes allow-popups, leaving the sandbox no way to open windows at all
  • The URL is validated in the parent window with isValidURL, on the receiving side of the message. The sender is verified by the existing origin/source checks. None of the validation is left to the sandboxed sender
  • Even if XSS runs inside the sandbox, all it can do is have a validated http(s) URL opened in a new tab. Ordinary Markdown links can already send users to arbitrary URLs, so this adds no new attack surface
  • Intercepting clicks inside the sandbox and having the parent validate and open them is the same pattern VS Code's webviews use

References

Verification

On Chrome, Firefox, and Safari.

Notes

  • I don't work on the frontend regularly — a careful look at this approach would be very helpful.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by skkzsh

Merge request reports

Loading
Loading