feat: add sandboxBaseUrl config to resolve relative URLs in sandbox mode #7203
+672
−34
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… sandbox mode
When securityLevel is 'sandbox', diagrams are rendered inside a data: URI iframe.
Since data URIs have no base URL context, relative URLs in diagram links (e.g.,
"./page.html") cannot be resolved by the browser and fail to navigate.
This change adds a `sandboxBaseUrl` configuration option that, when provided,
pre-resolves all relative URLs in the rendered SVG to absolute URLs before
base64-encoding and embedding in the sandbox iframe.
Changes:
- Add `sandboxBaseUrl` to config schema and TypeScript types
- Create `resolveRelativeUrls` utility in `utils/sandboxUrl.ts`
- Integrate URL resolution into `putIntoIFrame` function
- Add comprehensive unit tests for the URL resolution logic
Example usage:
```javascript
mermaid.initialize({
securityLevel: 'sandbox',
sandboxBaseUrl: 'https://example.com/docs/',
flowchart: { htmlLabels: false }
});
```
Improves performance by eliminating parse/serialize round-trip: - Rename resolveRelativeUrls -> resolveRelativeUrlsInElement - Operate directly on live DOM element instead of parsing SVG string - Call URL resolution before innerHTML extraction in mermaidAPI - Remove sandboxBaseUrl parameter from putIntoIFrame - Update tests to work with DOM elements
|
✅ Deploy Preview for mermaid-js ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
@mermaid-js/examples
mermaid
@mermaid-js/layout-elk
@mermaid-js/layout-tidy-tree
@mermaid-js/mermaid-zenuml
@mermaid-js/parser
@mermaid-js/tiny
commit: |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## develop #7203 +/- ##
==========================================
- Coverage 3.56% 3.56% -0.01%
==========================================
Files 473 475 +2
Lines 47566 47616 +50
Branches 734 735 +1
==========================================
+ Hits 1696 1697 +1
- Misses 45870 45919 +49
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
Replace innerHTML with DOM manipulation (createElement + textContent) to prevent potential XSS attacks flagged by CodeQL.
Add tests for catch blocks when URL resolution fails with invalid base URL.
Prevent sandboxBaseUrl from being set via diagram directives, which could allow attackers to redirect relative links to malicious domains.
jmandel-via-jules
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📑 Summary
Add
sandboxBaseUrlconfiguration option to enable relative URL resolution in sandbox mode.When
securityLevel: 'sandbox'is used, diagrams render insidedata:URI iframes for security isolation. However, this breaks relative links (./page.html,#section) because data URIs have no base URL context. This PR adds an opt-insandboxBaseUrloption that pre-resolves relative URLs to absolute URLs before embedding.Example:
📏 Design Decisions
Why this approach?
URLs are resolved directly on the live DOM before
innerHTMLextraction, rather than post-processing the serialized SVG string. This:DOMParser/XMLSerializerround-tripsandboxBaseUrlis not setURL handling behavior
./page.html#sectionhttps://...mailto:,javascript:Security
sandboxBaseUrlset by page author, not diagram contentURLconstructor📋 Tasks
Make sure you
MERMAID_RELEASE_VERSIONis used for all new features.pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.