fix: bundle Telegram and TON brand icons as data URIs - #579
Open
maxrihter wants to merge 1 commit into
Open
Conversation
|
@maxrihter is attempting to deploy a commit to the TOP Team on Vercel. A member of the Team first needs to authorize it. |
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.
Closes #574
Problem
The Telegram and TON brand icons are hardcoded to
raw.githubusercontent.comURLs inpackages/ui/src/app/env/IMG.ts. Under astrict Content Security Policy that host is typically not allowlisted, so the
TON icon at the QR-code center and the Telegram badge silently fail to load
(they stay as empty placeholders); they also add external requests to every
connect flow.
Change
IMG.TONandIMG.TGare now base64 data URIs generated from the existingsource files in
assets/(ton-icon-48.png,tg.png), so both icons shipinside the bundle. A comment in
IMG.tsdocuments how to regenerate them afterchanging a source asset.
IMG.WALLET_CONNECTis intentionally left as an external URL to keep thebundle cost minimal — the issue scope is the Telegram and TON icons, which are
the ones shown in the default connect flow. Happy to inline it as well if you
prefer the file fully local (~+22 kB).
Reproduction & verification
Reproduced the CSP failure on the built
tonconnect-ui.min.jsartifacts(Playwright, static page with
img-src data: https://config.ton.org— i.e.githubusercontent not allowlisted),
mainbuild vs this branch:mainbuildton-icon-48.png,tg.png)data:URIs (144×144 / 72×72)tg.png)data:URIs inall three, no SDK-related CSP violations.
tests/app/env/img.test.ts): TON/TG aredata:image/pngURIs and decode to valid PNGs (signature check). They fail against
main,guarding against regressing back to an external host.
tsc --noEmit, prettier and the full ui build pass;@tonconnect/ui-reactbuilds cleanly against the change.
tonconnect-ui.min.js445 467 → 456 566 bytes (+11.1 kB,matching the two encoded PNGs).
Consumers no longer need
img-src raw.githubusercontent.comin their CSP —img-src data:covers both icons.A changeset (patch for
@tonconnect/ui) is included.