Repository navigation
fix(threat-composer): Show base64 diagrams in the threat model view - #383
Merged
Merged
Conversation
react-markdown 10 passes every URL through defaultUrlTransform, which empties data: image sources, so the Threat model view dropped every diagram stored as a base64 image. MarkdownViewer now keeps a data:image base64 URL when it is an img src. Other URLs keep the default filter.
jessieweiyi
approved these changes
Nov 11, 2026
|
🎉 This PR is included in version 1.0.93 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Issue # (if applicable)
Closes #382.
Reason for this change
The Threat model view shows a blank space where the architecture and dataflow diagrams should be, whenever the diagram is stored as a base64 image. That covers uploaded images, the bundled example workspaces, and diagrams from threat-composer-ai. Images linked by
httpsURL still show.The view renders the report as markdown with react-markdown. #346 moved react-markdown from 8.0.7 to 10.1.0. Version 10 passes every URL through
defaultUrlTransform, which allows onlyhttp,https,irc,ircs,mailtoandxmpp. It turns adata:image source into an empty string. Version 8 left image sources alone unless atransformImageUriwas passed, and the app passed none.The Architecture and Dataflow pages set
<img src>directly, so they were not affected.Description of changes
MarkdownViewerpasses aurlTransformto react-markdown. It keeps a URL only when it is thesrcof animgand starts withdata:image/<type>;base64,. Every other URL, including links and non-imagedata:URLs, still goes throughdefaultUrlTransform.Alternatives considered and rejected:
urlTransform={null}to turn the filter off. That would also letjavascript:links through.Describe any new or updated permissions being added
None.
Description of how you validated changes
MarkdownViewer/index.test.tsx(new): base64 PNG and SVG images are kept in markdown and in a raw HTML<img>,httpsimages are kept, adata:text/htmlimage is dropped, andjavascript:anddata:links are dropped. The three image tests fail without the fix.e2e/tests/preview-and-content.spec.ts: opens the bundled Threat Composer example and checks that both diagrams in the Threat model view have adata:image/pngsource and decode. It fails without the fix (srcis empty).pnpm lintandpnpm buildexit 0.pnpm nx run @aws/threat-composer-e2e:e2e(127 passed) ande2e:preview(6 passed) exit 0.e2e:variantsande2e:extensionwere not run locally.Checklist
type(scope): Subject. It becomes the commit message onmain.<img>.By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.