Loading
Support links in Mermaid diagrams via parent window delegation
What does this MR do and why?
Fixes:
- Links in mermaid diagrams are blocked due to sa... (#353389), a four-year-old issue
- GitLab opens a blank page when clicking Mermaid... (#583619)
Solution
Links can't open from within the sandboxed iframe, so delegate their clicks to the parent window:
- Sandbox side (
mermaid_sandbox.js): intercept anchor clicks (left and middle) withpreventDefaultand post thehrefto the parent window - Parent side (
render_sandboxed_mermaid.jsand the rich text editor'ssandboxed_mermaid.vue): handle the message in a message listener, validate thehrefwithisValidURL, then open it in a new tab with a regular browsing context - 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 contextSecurity 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
- Ignore invalid height messages from Mermaid ifr... (!251495 - merged): introduced payload validation on the same message listener
- Bug: broken links in Mermaid diagrams (#354010)
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