harden: escape every interpolation into popup innerHTML, and add default-src to both manifests (closes #307)

A hostile ERC-20's symbol() reached an innerHTML string unescaped, and neither
manifest declared default-src, so an attacker deploying a token with 1,000+
holders and airdropping one unit could render a full-viewport cross-origin
iframe over the wallet's own UI, on screens where the user types their
password.

escapeHtml is now a pure string replace over & < > " ' — the old version
round-tripped through textContent, which escapes neither quote, while already
being used inside data-copy="...". All 19 files in src/popup/views/ were
audited: beyond the reported symbol site, the explorer-supplied directionLabel
in all three transaction lists, wallet.name, addr.ensName, the blockie data:
URIs and two ad-hoc quote-only escapes were also unescaped. Explorer URLs now
go through one helper that percent-encodes the path segment.

Both manifests add default-src 'self', frame-src 'none', form-action 'none' and
base-uri 'none'. Three loosenings are pinned in tests/manifest.test.js and
justified in README.md: style-src 'unsafe-inline' (39 static style attributes;
Firefox implements neither style-src-attr nor 'unsafe-hashes'), img-src data:
(blockies), connect-src https: http: (user-configurable RPC).

Note frame-src 'none' blocks a frame loading, not the element existing, so the
zero-iframe assertion is a claim about the escaping alone; the test asserts the
element count and the literal rendered text separately, taking the count before
any click an overlay could intercept.

Verified: make check 39 suites / 811 tests, test-e2e 55/55 including the
WebAssembly-under-CSP assertion, test-e2e-firefox 8/8, zero CSP violations
asserted rather than merely unobserved. Reverting only balanceLine's
interpolation reproduces the attack as 2 iframes on the address screen.

src/popup/views/addToken.js

@@ -1,4 +1,4 @@
-const { $, showView, showFlash, goBack } = require("./helpers");
+const { $, showView, showFlash, escapeHtml, goBack } = require("./helpers");
 const { getTopTokens } = require("../../shared/tokenList");
 const { state, saveState } = require("../../shared/state");
 const { lookupTokenInfo } = require("../../shared/balances");
@@ -13,7 +13,7 @@ function show() {
     list.innerHTML = getTopTokens(25)
         .map(
             (t) =>
-                `<button class="common-token border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer text-xs" data-address="${t.address}" data-symbol="${t.symbol}" data-decimals="${t.decimals}">${t.symbol}</button>`,
+                `<button class="common-token border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer text-xs" data-address="${escapeHtml(t.address)}" data-symbol="${escapeHtml(t.symbol)}" data-decimals="${escapeHtml(t.decimals)}">${escapeHtml(t.symbol)}</button>`,
         )
         .join("");
     list.querySelectorAll(".common-token").forEach((btn) => {

src/popup/views/addressDetail.js

@@ -6,6 +6,7 @@ const {
     addressDotHtml,
     addressTitle,
     escapeHtml,
+    displaySymbol,
     truncateMiddle,
     renderAddressHtml,
     attachCopyHandlers,
@@ -221,10 +222,12 @@ function renderTransactions(txs) {
                   : tx.from;
         const ensName = ensNameMap.get(counterparty) || null;
         const title = addressTitle(counterparty, state.wallets);
-        const dirLabel = tx.directionLabel;
+        // The explorer's method name for a contract call, title-cased.
+        const dirLabel = escapeHtml(tx.directionLabel);
+        const sym = displaySymbol(tx.symbol);
         const amountStr = tx.value
-            ? escapeHtml(tx.value + " " + tx.symbol)
-            : escapeHtml(tx.symbol);
+            ? escapeHtml(tx.value + " " + sym)
+            : escapeHtml(sym);
         const maxAddr = Math.max(32, 36 - Math.max(0, amountStr.length - 10));
         const displayAddr =
             title || ensName || truncateMiddle(counterparty, maxAddr);

src/popup/views/addressToken.js

@@ -9,6 +9,7 @@ const {
     addressDotHtml,
     addressTitle,
     escapeHtml,
+    displaySymbol,
     truncateMiddle,
     balanceLine,
     renderAddressHtml,
@@ -124,7 +125,11 @@ function show() {
     currentSymbol = symbol;
 
     $("address-token-title").textContent =
-        wallet.name + " \u2014 Address " + (ai + 1) + " \u2014 " + symbol;
+        wallet.name +
+        " \u2014 Address " +
+        (ai + 1) +
+        " \u2014 " +
+        displaySymbol(symbol);
 
     // Blockie
     const blockieEl = $("address-token-jazzicon");
@@ -174,7 +179,9 @@ function show() {
             (knownToken && knownToken.symbol) ||
             null;
         const tokenName = rawName ? escapeHtml(rawName) : null;
-        const tokenSymbol = rawSymbol ? escapeHtml(rawSymbol) : null;
+        const tokenSymbol = rawSymbol
+            ? escapeHtml(displaySymbol(rawSymbol))
+            : null;
         const tokenDecimals =
             tb && tb.decimals != null
                 ? tb.decimals
@@ -288,10 +295,12 @@ function renderTransactions(txs) {
         const counterparty = tx.direction === "sent" ? tx.to : tx.from;
         const ensName = ensNameMap.get(counterparty) || null;
         const title = addressTitle(counterparty, state.wallets);
-        const dirLabel = tx.directionLabel;
+        // The explorer's method name for a contract call, title-cased.
+        const dirLabel = escapeHtml(tx.directionLabel);
+        const sym = displaySymbol(tx.symbol);
         const amountStr = tx.value
-            ? escapeHtml(tx.value + " " + tx.symbol)
-            : escapeHtml(tx.symbol);
+            ? escapeHtml(tx.value + " " + sym)
+            : escapeHtml(sym);
         const maxAddr = Math.max(32, 36 - Math.max(0, amountStr.length - 10));
         const displayAddr =
             title || ensName || truncateMiddle(counterparty, maxAddr);
@@ -361,7 +370,7 @@ function init(_ctx) {
         }
         // Hide dropdown, show static token display
         $("send-token").classList.add("hidden");
-        let staticHtml = `<div class="font-bold">${escapeHtml(currentSymbol)}</div>`;
+        let staticHtml = `<div class="font-bold">${escapeHtml(displaySymbol(currentSymbol))}</div>`;
         if (tokenId !== "ETH") {
             staticHtml += `<div class="text-xs">${renderAddressHtml(tokenId)}</div>`;
         }

src/popup/views/confirmTx.js

@@ -10,6 +10,7 @@ const {
     showView,
     addressTitle,
     escapeHtml,
+    displaySymbol,
     renderAddressHtml,
     attachCopyHandlers,
     goBack,
@@ -57,7 +58,7 @@ function restore() {
 
 function blockieHtml(address) {
     const src = makeBlockie(address);
-    return `<img src="${src}" width="48" height="48" style="image-rendering:pixelated;border-radius:50%;display:inline-block">`;
+    return `<img src="${escapeHtml(src)}" width="48" height="48" style="image-rendering:pixelated;border-radius:50%;display:inline-block">`;
 }
 
 function confirmAddressHtml(address, ensName, title) {
@@ -81,7 +82,11 @@ function show(txInfo) {
     feeWei = null;
 
     const isErc20 = txInfo.token !== "ETH";
-    const symbol = isErc20 ? txInfo.tokenSymbol || "?" : "ETH";
+    // The raw symbol is the price-table key; the capped one is what the
+    // screen says. Truncating before the lookup would silently drop the
+    // price of any token whose symbol is long enough to be capped.
+    const rawSymbol = isErc20 ? txInfo.tokenSymbol || "?" : "ETH";
+    const symbol = displaySymbol(rawSymbol);
 
     // Transaction type
     if (isErc20) {
@@ -123,7 +128,7 @@ function show(txInfo) {
 
     // Amount (with inline USD)
     const ethPrice = getPrice("ETH");
-    const tokenPrice = getPrice(symbol);
+    const tokenPrice = getPrice(rawSymbol);
     const amountNum = parseFloat(txInfo.amount);
     const price = isErc20 ? tokenPrice : ethPrice;
     const amountUsd = price ? amountNum * price : null;
@@ -156,7 +161,12 @@ function show(txInfo) {
         warningsEl.innerHTML = localWarnings
             .map(
                 (w) =>
-                    `<div class="border border-border border-dashed p-2 mb-1 text-xs font-bold">WARNING: ${w.message}</div>`,
+                    // Only the three hardcoded strings in
+                    // src/shared/addressWarnings.js reach this today, but
+                    // src/shared/etherscanLabels.js already builds a
+                    // `warning` out of scraped explorer markup, so this is
+                    // one wiring change away from carrying remote text.
+                    `<div class="border border-border border-dashed p-2 mb-1 text-xs font-bold">WARNING: ${escapeHtml(w.message)}</div>`,
             )
             .join("");
         warningsEl.style.visibility = "visible";
@@ -206,7 +216,7 @@ function show(txInfo) {
 // touches already occupies its space, so re-running it never moves anything.
 function renderValidation(txInfo) {
     const isErc20 = txInfo.token !== "ETH";
-    const symbol = isErc20 ? txInfo.tokenSymbol || "?" : "ETH";
+    const symbol = isErc20 ? displaySymbol(txInfo.tokenSymbol || "?") : "ETH";
 
     const { canSend, codes } = validateTransfer({
         isErc20,

src/popup/views/deleteAddress.js

@@ -11,6 +11,7 @@ const {
     $,
     showView,
     showFlash,
+    escapeHtml,
     goBack,
     renderAddressHtml,
     attachCopyHandlers,
@@ -92,7 +93,7 @@ function balanceWarningHtml(addr) {
     if (!addressHoldsFunds(addr)) return " ";
     const line = formatAddressTotal(getAddressValue(addr));
     const total = line
-        ? `<div class="text-xs text-muted mt-1">${line}</div>`
+        ? `<div class="text-xs text-muted mt-1">${escapeHtml(line)}</div>`
         : "";
     return (
         `<p class="mb-1">This address holds a balance. Removing it does not ` +

src/popup/views/helpers.js

@@ -1,8 +1,22 @@
 // Shared DOM helpers used by all views.
+//
+// Escaping rule for every view in this directory, since they all build
+// markup by concatenation: any VALUE interpolated into an innerHTML string
+// goes through escapeHtml(), whatever its provenance looks like today. The
+// only interpolations left bare are markup FRAGMENTS this code just built
+// (a rendered dot, an icon, a composed row), which escaping would turn into
+// visible angle brackets, and locally computed numbers and loop indices.
+// The distinction is meant to be greppable: an unescaped `${` next to a
+// name that reads like data is a defect.
 
+// escapeHtml lives in src/shared/html.js, where the escape and the
+// reasoning behind it are; it is re-exported below so views keep importing
+// it from here.
+const { escapeHtml } = require("../../shared/html");
 const { isDebug } = require("../../shared/log");
 const { formatUsd, getPrice } = require("../../shared/prices");
 const { state, saveState, currentNetwork } = require("../../shared/state");
+const { displaySymbol } = require("../../shared/symbolDisplay");
 const { markViewRendered } = require("../viewRouter");
 
 // When views are added, removed, or transitions between them change,
@@ -177,17 +191,26 @@ function showFlash(msg, duration = 2000) {
     }, duration);
 }
 
+// One row of the balance list: symbol, quantity, fiat value.
+//
+// `symbol` is the ERC-20's own symbol() as the block explorer reported it,
+// so it is attacker-chosen markup until it has been through escapeHtml, and
+// attacker-chosen length until it has been through displaySymbol. This is
+// the row that issue #307 was reported against: every screen that lists a
+// holding renders through here.
 function balanceLine(symbol, amount, price, tokenId) {
     const qty = amount.toFixed(4);
     const usd = price ? formatUsd(amount * price) || " " : " ";
-    const tokenAttr = tokenId ? ` data-token="${tokenId}"` : "";
+    // tokenId is a contract address out of the same explorer JSON, and it
+    // lands inside a quoted attribute.
+    const tokenAttr = tokenId ? ` data-token="${escapeHtml(tokenId)}"` : "";
     const clickClass = tokenId
         ? " cursor-pointer hover:bg-hover balance-row"
         : "";
     return (
         `<div class="flex text-xs${clickClass}"${tokenAttr}>` +
         `<span class="flex justify-between" style="width:42ch;max-width:100%">` +
-        `<span>${symbol}</span>` +
+        `<span>${escapeHtml(displaySymbol(symbol))}</span>` +
         `<span>${qty}</span>` +
         `</span>` +
         `<span class="text-right text-muted flex-1">${usd}</span>` +
@@ -289,12 +312,6 @@ function addressDotHtml(address) {
     return `<span style="width:8px;height:8px;border-radius:50%;display:inline-block;background:${color};margin-right:4px;vertical-align:middle;flex-shrink:0;"></span>`;
 }
 
-function escapeHtml(s) {
-    const div = document.createElement("div");
-    div.textContent = s;
-    return div.innerHTML;
-}
-
 // Look up an address across all wallets and return its title
 // (e.g. "Address 1.2") or null if it's not one of ours.
 function addressTitle(address, wallets) {
@@ -382,13 +399,26 @@ const EXT_ICON =
     `<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
     `</svg></span>`;
 
-function etherscanAddressUrl(address) {
-    return `${currentNetwork().explorerUrl}/address/${address}`;
+// Block-explorer URLs. The origin is a per-network constant from
+// src/shared/networks.js; only the path segment is data, and it comes out
+// of explorer JSON (a transaction's from/to, a token's address_hash), which
+// nothing upstream validates as hex. percent-encoding it keeps a segment
+// that contains a slash, a query or a fragment from re-pointing the link
+// somewhere else in the explorer.
+function explorerUrl(kind, value) {
+    return `${currentNetwork().explorerUrl}/${kind}/${encodeURIComponent(value)}`;
 }
 
+function etherscanAddressUrl(address) {
+    return explorerUrl("address", address);
+}
+
+// The URL still has to be escaped on the way into href="...": encoding
+// governs what the URL means, escaping governs whether it stays inside the
+// attribute.
 function etherscanLinkHtml(url) {
     return (
-        `<a href="${url}" target="_blank" rel="noopener" ` +
+        `<a href="${escapeHtml(url)}" target="_blank" rel="noopener" ` +
         `class="inline-flex items-center">${EXT_ICON}</a>`
     );
 }
@@ -492,6 +522,7 @@ module.exports = {
     addressColor,
     addressDotHtml,
     escapeHtml,
+    displaySymbol,
     addressTitle,
     formatAddressHtml,
     renderAddressHtml,
@@ -499,6 +530,7 @@ module.exports = {
     attachCopyHandlers,
     etherscanAddressUrl,
     etherscanLinkHtml,
+    explorerUrl,
     EXT_ICON,
     truncateMiddle,
     isoDate,

src/popup/views/home.js

@@ -8,6 +8,7 @@ const {
     addressDotHtml,
     addressTitle,
     escapeHtml,
+    displaySymbol,
     truncateMiddle,
     renderAddressHtml,
     attachCopyHandlers,
@@ -109,10 +110,13 @@ function renderHomeTxList(ctx) {
                 : tx.direction === "sent" || tx.direction === "contract"
                   ? tx.to
                   : tx.from;
-        const dirLabel = tx.directionLabel;
+        // directionLabel is the explorer's own method name for a contract
+        // call, title-cased — attacker-chosen for an attacker's contract.
+        const dirLabel = escapeHtml(tx.directionLabel);
+        const sym = displaySymbol(tx.symbol);
         const amountStr = tx.value
-            ? escapeHtml(tx.value + " " + tx.symbol)
-            : escapeHtml(tx.symbol);
+            ? escapeHtml(tx.value + " " + sym)
+            : escapeHtml(sym);
         const title = addressTitle(counterparty, state.wallets);
         const maxAddr = Math.max(32, 36 - Math.max(0, amountStr.length - 10));
         const displayAddr = title || truncateMiddle(counterparty, maxAddr);
@@ -226,7 +230,7 @@ function walletListHtml() {
         const defect = walletDefect(wallet);
         html += `<div>`;
         html += `<div class="flex justify-between items-center bg-section py-1 px-2" style="margin:0 -0.5rem">`;
-        html += `<span class="font-bold cursor-pointer wallet-name underline decoration-dashed" data-wallet="${wi}">${wallet.name}</span>`;
+        html += `<span class="font-bold cursor-pointer wallet-name underline decoration-dashed" data-wallet="${wi}">${escapeHtml(wallet.name)}</span>`;
         // No "+" on a defective wallet: deriving another address from that
         // xpub would only add one more address the key does not produce
         // under the standard path.
@@ -250,10 +254,13 @@ function walletListHtml() {
             const titleBold = isActive ? "font-bold" : "";
             html += `<div class="text-xs ${titleBold}">Address ${ai + 1}</div>`;
             if (addr.ensName) {
-                html += `<div class="text-xs font-bold flex items-center">${dot}${addr.ensName}</div>`;
+                // An ENS reverse record is whatever the name owner set it
+                // to; renderAddressHtml() escapes its own copy of this and
+                // this list was the one that did not.
+                html += `<div class="text-xs font-bold flex items-center">${dot}${escapeHtml(addr.ensName)}</div>`;
             }
             html += `<div class="flex text-xs items-center justify-between">`;
-            html += `<span class="flex items-center break-all">${addr.ensName ? "" : dot}${addr.address}</span>`;
+            html += `<span class="flex items-center break-all">${addr.ensName ? "" : dot}${escapeHtml(addr.address)}</span>`;
             html += `<span class="flex-shrink-0 ml-1">${infoBtn}${removeBtn}</span>`;
             html += `</div>`;
             const addrTotal = formatAddressTotal(getAddressValue(addr));

src/popup/views/receive.js

@@ -5,6 +5,7 @@ const {
     flashCopyFeedback,
     formatAddressHtml,
     addressTitle,
+    displaySymbol,
     attachCopyHandlers,
     goBack,
 } = require("./helpers");
@@ -44,7 +45,7 @@ function show() {
         }
         warningEl.textContent =
             "This is an ERC-20 token. Only send " +
-            symbol +
+            displaySymbol(symbol) +
             " on " +
             currentNetwork().name +
             " to this address. Sending tokens on other networks will result in permanent loss.";

src/popup/views/send.js

@@ -4,6 +4,7 @@ const {
     $,
     showFlash,
     addressTitle,
+    displaySymbol,
     renderAddressHtml,
     attachCopyHandlers,
     goBack,
@@ -131,7 +132,7 @@ function renderSendTokenSelect(addr) {
         if (state.hideLowHolderTokens && isLowHolderCount(t.holders)) continue;
         const opt = document.createElement("option");
         opt.value = t.address;
-        opt.textContent = t.symbol;
+        opt.textContent = displaySymbol(t.symbol);
         sel.appendChild(opt);
     }
 }

src/popup/views/settings.js

@@ -4,6 +4,7 @@ const {
     updateDebugBanner,
     showFlash,
     escapeHtml,
+    displaySymbol,
     flashCopyFeedback,
     goBack,
     pushCurrentView,
@@ -43,8 +44,11 @@ function renderSiteList(containerId, siteMap, stateKey) {
     let html = "";
     hostnames.forEach((hostname) => {
         html += `<div class="flex justify-between items-center text-xs py-1 border-b border-border-light">`;
-        html += `<span>${hostname}</span>`;
-        html += `<button class="btn-remove-site border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer" data-key="${stateKey}" data-hostname="${hostname}">[x]</button>`;
+        // A hostname the URL parser produced cannot carry a delimiter, so
+        // this is escaped for the rule rather than for a known hole — the
+        // rule being that nothing reaches innerHTML unescaped.
+        html += `<span>${escapeHtml(hostname)}</span>`;
+        html += `<button class="btn-remove-site border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer" data-key="${escapeHtml(stateKey)}" data-hostname="${escapeHtml(hostname)}">[x]</button>`;
         html += `</div>`;
     });
     container.innerHTML = html;
@@ -73,9 +77,10 @@ function renderTrackedTokens() {
     }
     let html = "";
     state.trackedTokens.forEach((token, idx) => {
+        const sym = escapeHtml(displaySymbol(token.symbol));
         const label = token.name
-            ? escapeHtml(token.name) + " (" + escapeHtml(token.symbol) + ")"
-            : escapeHtml(token.symbol);
+            ? escapeHtml(token.name) + " (" + sym + ")"
+            : sym;
         html += `<div class="flex justify-between items-center text-xs py-1 border-b border-border-light">`;
         html += `<span>${label}</span>`;
         html += `<button class="btn-remove-token border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer" data-idx="${idx}">[x]</button>`;

src/popup/views/settingsAddToken.js

@@ -1,4 +1,4 @@
-const { $, showView, showFlash, goBack } = require("./helpers");
+const { $, showView, showFlash, escapeHtml, goBack } = require("./helpers");
 const { getTopTokens } = require("../../shared/tokenList");
 const { state, saveState } = require("../../shared/state");
 const { lookupTokenInfo } = require("../../shared/balances");
@@ -26,11 +26,11 @@ function renderTop10() {
                 : "border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer text-xs";
             return (
                 `<button class="settings-addtoken-quick ${cls}"` +
-                ` data-address="${t.address}"` +
-                ` data-symbol="${t.symbol}"` +
-                ` data-decimals="${t.decimals}"` +
-                ` data-name="${(t.name || "").replace(/"/g, "&quot;")}"` +
-                `${tracked ? " disabled" : ""}>${t.symbol}</button>`
+                ` data-address="${escapeHtml(t.address)}"` +
+                ` data-symbol="${escapeHtml(t.symbol)}"` +
+                ` data-decimals="${escapeHtml(t.decimals)}"` +
+                ` data-name="${escapeHtml(t.name || "")}"` +
+                `${tracked ? " disabled" : ""}>${escapeHtml(t.symbol)}</button>`
             );
         })
         .join("");
@@ -62,11 +62,11 @@ function renderDropdown() {
         const tracked = isTracked(t.address);
         const label = tokenLabel(t) + (tracked ? " (tracked)" : "");
         html +=
-            `<option value="${t.address}"` +
-            ` data-symbol="${t.symbol}"` +
-            ` data-decimals="${t.decimals}"` +
-            ` data-name="${(t.name || "").replace(/"/g, "&quot;")}"` +
-            `${tracked ? " disabled" : ""}>${label}</option>`;
+            `<option value="${escapeHtml(t.address)}"` +
+            ` data-symbol="${escapeHtml(t.symbol)}"` +
+            ` data-decimals="${escapeHtml(t.decimals)}"` +
+            ` data-name="${escapeHtml(t.name || "")}"` +
+            `${tracked ? " disabled" : ""}>${escapeHtml(label)}</option>`;
     }
     sel.innerHTML = html;
 }

src/popup/views/transactionDetail.js

@@ -15,9 +15,11 @@ const {
     attachCopyHandlers,
     copyableHtml,
     etherscanLinkHtml,
+    explorerUrl,
+    displaySymbol,
     goBack,
 } = require("./helpers");
-const { state, currentNetwork } = require("../../shared/state");
+const { state } = require("../../shared/state");
 const { formatEther, formatUnits } = require("ethers");
 const makeBlockie = require("ethereum-blockies-base64");
 const { log, debugFetch } = require("../../shared/log");
@@ -44,7 +46,7 @@ function getTransactionType(tx) {
 
 function blockieHtml(address) {
     const src = makeBlockie(address);
-    return `<img src="${src}" width="48" height="48" style="image-rendering:pixelated;border-radius:50%;display:inline-block">`;
+    return `<img src="${escapeHtml(src)}" width="48" height="48" style="image-rendering:pixelated;border-radius:50%;display:inline-block">`;
 }
 
 function txAddressHtml(address, ensName, title) {
@@ -56,7 +58,7 @@ function txAddressHtml(address, ensName, title) {
 }
 
 function txHashHtml(hash) {
-    const link = `${currentNetwork().explorerUrl}/tx/${hash}`;
+    const link = explorerUrl("tx", hash);
     const extLink = etherscanLinkHtml(link);
     return copyableHtml(hash, "break-all") + extLink;
 }
@@ -101,9 +103,10 @@ function render() {
     $("tx-detail-to").innerHTML = txAddressHtml(tx.to, tx.toEns, toTitle);
 
     // Exact amount (full precision, copyable)
+    const detailSym = displaySymbol(tx.symbol);
     const exactStr = tx.exactValue
-        ? tx.exactValue + " " + tx.symbol
-        : tx.directionLabel + " " + tx.symbol;
+        ? tx.exactValue + " " + detailSym
+        : tx.directionLabel + " " + detailSym;
     $("tx-detail-value").innerHTML = copyableHtml(exactStr, "font-bold");
 
     // Native quantity (raw integer, copyable)
@@ -133,7 +136,7 @@ function render() {
     if (tokenContractSection && tokenContractEl) {
         if (tx.contractAddress) {
             const dot = addressDotHtml(tx.contractAddress);
-            const link = `${currentNetwork().explorerUrl}/token/${tx.contractAddress}`;
+            const link = explorerUrl("token", tx.contractAddress);
             tokenContractEl.innerHTML =
                 `<div class="flex items-center">${dot}` +
                 copyableHtml(tx.contractAddress, "break-all") +
@@ -185,7 +188,7 @@ function showDetailField(sectionId, contentId, value) {
 function populateOnChainDetails(txData) {
     // Block number
     if (txData.block_number != null) {
-        const blockLink = `${currentNetwork().explorerUrl}/block/${txData.block_number}`;
+        const blockLink = explorerUrl("block", String(txData.block_number));
         const blockSection = $("tx-detail-block-section");
         const blockEl = $("tx-detail-block");
         if (blockSection && blockEl) {
@@ -309,7 +312,7 @@ async function loadFullTxDetails(txHash, toAddress) {
                     // Token entry: show symbol on its own line, then address via shared renderer
                     const tokenSymbol = d.value.match(/^(\S+)\s*\(/)?.[1];
                     if (tokenSymbol) {
-                        detailsHtml += `<div class="font-bold">${escapeHtml(tokenSymbol)}</div>`;
+                        detailsHtml += `<div class="font-bold">${escapeHtml(displaySymbol(tokenSymbol))}</div>`;
                     }
                     detailsHtml += renderAddressHtml(d.address);
                 } else if (d.address) {

src/popup/views/txStatus.js

@@ -9,10 +9,12 @@ const {
     attachCopyHandlers,
     copyableHtml,
     etherscanLinkHtml,
+    explorerUrl,
+    displaySymbol,
     clearViewStack,
 } = require("./helpers");
 const { TOKEN_BY_ADDRESS } = require("../../shared/tokenList");
-const { state, currentNetwork } = require("../../shared/state");
+const { state } = require("../../shared/state");
 const { getProvider } = require("../../shared/balances");
 const { log } = require("../../shared/log");
 
@@ -62,13 +64,13 @@ function toAddressHtml(address) {
 }
 
 function txHashHtml(hash) {
-    const link = `${currentNetwork().explorerUrl}/tx/${hash}`;
+    const link = explorerUrl("tx", hash);
     return copyableHtml(hash, "break-all") + etherscanLinkHtml(link);
 }
 
 function blockNumberHtml(blockNumber) {
     const num = String(blockNumber);
-    const link = `${currentNetwork().explorerUrl}/block/${num}`;
+    const link = explorerUrl("block", num);
     return copyableHtml(num) + etherscanLinkHtml(link);
 }
 
@@ -80,7 +82,10 @@ function startWait(txInfo, txHash, broadcastTime, pollNow) {
     endWait();
     const id = waitId;
 
-    const symbol = txInfo.token === "ETH" ? "ETH" : txInfo.tokenSymbol || "?";
+    const symbol =
+        txInfo.token === "ETH"
+            ? "ETH"
+            : displaySymbol(txInfo.tokenSymbol || "?");
     $("wait-tx-summary").textContent = txInfo.amount + " " + symbol;
     $("wait-tx-to").innerHTML = toAddressHtml(txInfo.to);
     $("wait-tx-hash").innerHTML = txHashHtml(txHash);
@@ -211,7 +216,10 @@ function restoreWait() {
 function showSuccess(txInfo, txHash, blockNumber) {
     endWait();
 
-    const symbol = txInfo.token === "ETH" ? "ETH" : txInfo.tokenSymbol || "?";
+    const symbol =
+        txInfo.token === "ETH"
+            ? "ETH"
+            : displaySymbol(txInfo.tokenSymbol || "?");
     state.viewData = {
         amount: txInfo.amount,
         symbol: symbol,
@@ -299,7 +307,10 @@ function renderSuccess() {
 function showError(txInfo, txHash, message) {
     endWait();
 
-    const symbol = txInfo.token === "ETH" ? "ETH" : txInfo.tokenSymbol || "?";
+    const symbol =
+        txInfo.token === "ETH"
+            ? "ETH"
+            : displaySymbol(txInfo.tokenSymbol || "?");
     state.viewData = {
         amount: txInfo.amount,
         symbol: symbol,

src/shared/html.js

@@ -0,0 +1,41 @@
+// HTML escaping for values interpolated into an innerHTML string.
+//
+// Every view in src/popup/views/ builds markup by string concatenation, so
+// this is the only thing standing between a value the wallet did not author
+// and the extension's own DOM. The values that reach it are attacker
+// controlled by design: an ERC-20's symbol() and name() are whatever the
+// contract chooses to return, an ENS name is whatever the resolver returns,
+// and both arrive through the block explorer with no schema.
+//
+// It escapes both quote characters as well as the tag delimiters, because
+// the popup interpolates into attribute values as well as into element
+// text — copyableHtml() writes data-copy="..." and etherscanLinkHtml()
+// writes href="...". A `<`/`>`-only escape leaves an unquoted-attribute
+// break-out intact, and the round trip through a detached element's
+// textContent that used to implement this was exactly that escape: the
+// HTML serializer only escapes `&`, `<`, `>` and U+00A0 in a text node,
+// since a text node has no idea it is about to be pasted inside quotes.
+//
+// Deliberately a pure string function with no DOM dependency: it is called
+// on every rendered row, it is unit-testable without a document, and it
+// cannot be affected by the state of a document that an attacker-supplied
+// string has already been written into.
+
+const HTML_ESCAPES = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+};
+
+// `&` is escaped first by virtue of being in the same pass: a sequential
+// replace would re-escape the ampersands it had just introduced.
+function escapeHtml(s) {
+    if (s === null || s === undefined) return "";
+    return String(s).replace(/[&<>"']/g, (c) => HTML_ESCAPES[c]);
+}
+
+module.exports = {
+    escapeHtml,
+};

src/shared/symbolDisplay.js

@@ -0,0 +1,43 @@
+// The length bound on a token symbol as displayed.
+//
+// A symbol is whatever an ERC-20's symbol() returns and the wallet fetches
+// it from the block explorer, which imposes no length: src/shared/balances.js
+// takes `item.token.symbol` as given. A kilobyte-long symbol is a real
+// return value, and rendering it pushes every amount off the row, scrolls
+// the balance list past the screen, and hides the figures the user is there
+// to read.
+//
+// This is a layout bound, not a security control. Escaping is what makes a
+// hostile symbol inert (see src/shared/html.js), and isSpoofedSymbol() is
+// what catches one impersonating a known ticker; neither job belongs here
+// and neither is done here. Truncating an unescaped symbol would still be
+// an injection, just a shorter one.
+//
+// 12 characters, which is the bound lookupTokenInfo() in
+// src/shared/balances.js already applies when it stores a symbol read
+// straight off a contract; the explorer path was the one with no bound at
+// all. The longest symbol across the 512 entries of the bundled list is 10
+// (MSYRUPUSDP), so nothing the wallet ships as a real token is ever
+// truncated. The ellipsis is what tells the user the name they are looking
+// at is not the whole name — worth knowing before they send to it.
+
+const MAX_SYMBOL_LENGTH = 12;
+
+// The placeholder for a token whose symbol the explorer did not report.
+// balances.js already substitutes this; repeated here so a symbol that
+// arrives empty from anywhere else displays the same way rather than as a
+// blank gap in the row.
+const UNKNOWN_SYMBOL = "???";
+
+function displaySymbol(symbol) {
+    const s = symbol === null || symbol === undefined ? "" : String(symbol);
+    if (s.length === 0) return UNKNOWN_SYMBOL;
+    if (s.length <= MAX_SYMBOL_LENGTH) return s;
+    return s.slice(0, MAX_SYMBOL_LENGTH - 1) + "…";
+}
+
+module.exports = {
+    displaySymbol,
+    MAX_SYMBOL_LENGTH,
+    UNKNOWN_SYMBOL,
+};