Skip to content

mermaid: allow data URI images in chat/preview CSP#317235

Merged
mjbvz merged 2 commits into
mainfrom
copilot/fix-mermaid-missing-image
May 19, 2026
Merged

mermaid: allow data URI images in chat/preview CSP#317235
mjbvz merged 2 commits into
mainfrom
copilot/fix-mermaid-missing-image

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented May 19, 2026

Mermaid C4 diagrams in chat could render with missing icons (for example, the person icon in the attached repro) because image data URIs were blocked by the webview CSP fallback to default-src 'none'. Markdown preview worked because it already allows image sources explicitly.

  • What changed

    • Added an explicit img-src data: directive to Mermaid webview CSP in:
      • extensions/mermaid-markdown-features/src/chatOutputRenderer.ts
      • extensions/mermaid-markdown-features/src/editorManager.ts
  • Security posture

    • Kept default-src 'none' and existing script/style/font restrictions unchanged.
    • Relaxed only image loading for trusted in-document data: images emitted by Mermaid rendering.
<!-- before -->
<meta http-equiv="Content-Security-Policy"
      content="default-src 'none'; script-src 'nonce-${nonce}'; style-src ${cspSource} 'unsafe-inline'; font-src data:;" />

<!-- after -->
<meta http-equiv="Content-Security-Policy"
      content="default-src 'none'; img-src data:; script-src 'nonce-${nonce}'; style-src ${cspSource} 'unsafe-inline'; font-src data:;" />

Copilot AI requested review from Copilot and removed request for Copilot May 19, 2026 03:48
Copilot AI linked an issue May 19, 2026 that may be closed by this pull request
Co-authored-by: mjbvz <12821956+mjbvz@users.noreply.github.com>
Copilot AI requested review from Copilot and removed request for Copilot May 19, 2026 03:54
Copilot AI changed the title [WIP] Fix mermaid image rendering issue in context diagram mermaid: allow data URI images in chat/preview CSP May 19, 2026
Copilot AI requested a review from mjbvz May 19, 2026 03:55
Copilot finished work on behalf of mjbvz May 19, 2026 03:55
@mjbvz mjbvz marked this pull request as ready for review May 19, 2026 03:56
Copilot AI review requested due to automatic review settings May 19, 2026 03:56
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes missing icons in Mermaid C4 diagrams rendered in chat (and aligns editor preview behavior) by allowing data: image sources in the webview Content Security Policy, while keeping the overall CSP restrictive (default-src 'none').

Changes:

  • Add img-src data: to the Mermaid chat output renderer webview CSP.
  • Add img-src data: to the Mermaid editor preview webview CSP.
Show a summary per file
File Description
extensions/mermaid-markdown-features/src/editorManager.ts Allows data: images in the editor preview webview CSP so Mermaid-emitted data URI icons can render.
extensions/mermaid-markdown-features/src/chatOutputRenderer.ts Allows data: images in the chat renderer webview CSP to fix missing C4/person icons in chat output.

Copilot's findings

  • Files reviewed: 2/2 changed files
  • Comments generated: 0

@mjbvz mjbvz merged commit 9ce51d7 into main May 19, 2026
29 checks passed
@mjbvz mjbvz deleted the copilot/fix-mermaid-missing-image branch May 19, 2026 04:42
@vs-code-engineering vs-code-engineering Bot added this to the 1.122.0 milestone May 19, 2026
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.

mermaid: missing image

4 participants