Skip to content

Refactor & Integrate: PoC for Sandboxing Mermaid Diagrams

Dheeraj Joshi requested to merge djadmin-sandbox-mermaid-refactor into djadmin-sandbox-mermaid

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:

  1. Each mermaid diagram should create a new iframe- https://<gitlab-instance>/-/sandbox/mermaid
  2. The iframe gets loaded in a sandboxed environment
  3. The iframe receives the diagram source upon load via postMessage
  4. The iframe renders the diagram and sends a message to parent with rendered diagram size
  5. Parent window receives the postMessage and re-sizes the iframe.
  6. Say goodbye to Found a new mermaid XSS vulnerability emails

MR Changes

  • Moved the sandbox html file from public directory to app/views with .erb file extension
  • Moved all the code to app/assets/javascripts to a new bundle where we import mermaid and have it versioned using package.json + bundled using webpack.
  • 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:

example image
  1. Performance lag compared to !74414 (merged) - Accepted Risk for MVC. More testing to be on pre-prod env
Before (PoC MR) After
image image

  1. Console errors: Continuous error stream related to webpack dev server connection. Any tips to resolve that? image

  2. Dark Mode is supported

before after
image image
  1. "Copy to clipboard" / copy as GFM is broken, see #349497 (closed)

How to set up and validate locally

  1. Checkout this branch djadmin-sandbox-mermaid-refactor
  2. Enable sandboxed_mermaid feature flag
  3. Update a README.md for any project
  4. 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.

Edited by Dheeraj Joshi

Merge request reports