Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Fix sandbox mode with UTF-16 characters #5520

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from

Conversation

iansan5653
Copy link

@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 e26dea6
🔍 Latest deploy log https://app.netlify.com/sites/mermaid-js/deploys/6643b67980fd8200085cc14f
😎 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 11 lines in your changes are missing coverage. Please review.

Project coverage is 5.73%. Comparing base (0326d89) to head (e26dea6).

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##           develop   #5520      +/-   ##
==========================================
- Coverage     5.74%   5.73%   -0.01%     
==========================================
  Files          277     279       +2     
  Lines        41967   41986      +19     
  Branches       515     491      -24     
==========================================
  Hits          2409    2409              
- Misses       39558   39577      +19     
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%> (ø)

... and 1 file with indirect coverage changes

@iansan5653
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in 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
1 participant