Refactor & Integrate: PoC for Sandboxing Mermaid Diagrams
What does this MR do and why?
Refactored changes from Render GFM Mermaid diagrams in a sandboxed iframe (!74414 - merged) & integrated with the rails application. This was done to make it more maintainable and reusable with the rest of the code. This MR shall eventually be merged into !74414 (merged).
For context:
- Each mermaid diagram should create a new iframe-
https://<gitlab-instance>/-/sandbox/mermaid
- The iframe gets loaded in a sandboxed environment
- The iframe receives the diagram source upon load via
postMessage
- The iframe renders the diagram and sends a message to
parent
with rendered diagram size - Parent window receives the
postMessage
and re-sizes the iframe. - Say goodbye to
Found a new mermaid XSS vulnerability
emails
MR Changes
- Moved the sandbox
html
file frompublic
directory toapp/views
with.erb
file extension - Moved all the code to
app/assets/javascripts
to a new bundle where we importmermaid
and have it versioned usingpackage.json
+ bundled usingwebpack
. - Add a new route to serve the iframe page
- previously it was all in the public directory, and probably faster
Screenshots or screen recordings
Please refer more details in the main MR - !74414 (merged)
Details specific to this MR changes
The test page consisted of total 6 mermaid diagrams:
- Performance lag compared to !74414 (merged) - Accepted Risk for MVC. More testing to be on pre-prod env
Before (PoC MR) | After |
---|---|
-
Console errors: Continuous error stream related to
webpack
dev server connection. Any tips to resolve that? -
Dark Mode is supported
before | after |
---|---|
- "Copy to clipboard" / copy as GFM is broken, see #349497 (closed)
How to set up and validate locally
- Checkout this branch
djadmin-sandbox-mermaid-refactor
- Enable
sandboxed_mermaid
feature flag - Update a README.md for any project
- Preview the markdown
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Dheeraj Joshi