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

