Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Fix sandbox mode with UTF-16 characters #5520

Merged
merged 11 commits into from
Jun 20, 2024

Conversation

iansan5653
Copy link
Contributor

@iansan5653 iansan5653 commented May 14, 2024

📑 Summary

btoa is the native browser API for encoding strings to Base64, but it does not support UTF-16 code points:

calling btoa on a string will cause a "Character Out Of Range" exception if a character's code point exceeds 0xff - MDN

This in turn results in Mermaid crashing when attempting to render diagrams with, for example, emojis. Which causes Mermaid to render the diagram directly to the page, circumventing the sandbox mode and breaking the page.

This PR fixes the problem by down-encoding the string to UTF-8 before encoding it to Base64, as described on MDN. In addition, now that the encoded string is UTF-8 we need to specify an encoding in the data URL so that the browser knows how to render that text.

📋 Tasks

Make sure you

Copy link

netlify bot commented May 14, 2024

Deploy Preview for mermaid-js ready!

Name Link
🔨 Latest commit 51c0716
🔍 Latest deploy log https://app.netlify.com/sites/mermaid-js/deploys/667464815e61a00008912ac5
😎 Deploy Preview https://deploy-preview-5520--mermaid-js.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

codecov bot commented May 14, 2024

Codecov Report

Attention: Patch coverage is 0% with 9 lines in your changes missing coverage. Please review.

Project coverage is 5.73%. Comparing base (3af4020) to head (51c0716).

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##           develop   #5520      +/-   ##
==========================================
- Coverage     5.73%   5.73%   -0.01%     
==========================================
  Files          278     279       +1     
  Lines        41999   42005       +6     
  Branches       490     491       +1     
==========================================
  Hits          2409    2409              
- Misses       39590   39596       +6     
Flag Coverage Δ
unit 5.73% <0.00%> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files Coverage Δ
packages/mermaid/src/mermaidAPI.ts 0.00% <0.00%> (ø)
packages/mermaid/src/utils/base64.ts 0.00% <0.00%> (ø)

@iansan5653
Copy link
Contributor Author

😕 Not sure why the lint CI is failing now. Something to do with docs?

@sidharthv96
Copy link
Member

There were some issues in develop, let's see if it passes now.

Copy link

argos-ci bot commented Jun 20, 2024

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) ✅ No changes detected - Jun 20, 2024, 5:30 PM

sidharthv96 and others added 4 commits June 20, 2024 18:35
* develop:
  chore: Update docs
  chore: Add argos token to cypress config.
  chore: Remove cy.get('svg') calls
  Explain line breaks in `sequenceDiagram.md`
  add integration test
  fix note z position
  Correct the System_Boundary stereotype
@sidharthv96 sidharthv96 added this pull request to the merge queue Jun 20, 2024
Merged via the queue into mermaid-js:develop with commit 1e43ad1 Jun 20, 2024
19 checks passed
Copy link

mermaid-bot bot commented Jun 20, 2024

@iansan5653, Thank you for the contribution!
You are now eligible for a year of Premium account on MermaidChart.
# with your GitHub account to activate.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

non-latin1 characters used with "sandbox" throws and renders iframe in weird spot
2 participants