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 
parentwith rendered diagram size - Parent window receives the 
postMessageand re-sizes the iframe. - Say goodbye to 
Found a new mermaid XSS vulnerabilityemails 
MR Changes
- Moved the sandbox 
htmlfile frompublicdirectory toapp/viewswith.erbfile extension - Moved all the code to 
app/assets/javascriptsto a new bundle where we importmermaidand 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
webpackdev 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_mermaidfeature 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





