fix: render a hostile token symbol as text, and put a floor under the CSP (closes #307)

A token's symbol is whatever its symbol() returns, the block explorer passes it
through unfiltered, and balanceLine() interpolated it into an innerHTML string.
A token with the 1,000 holders the spam filter asks for, airdropped to the
victim, could therefore paint a full-viewport cross-origin iframe over the
wallet's own UI, on the screens where the user is used to typing their password.

escapeHtml moves to the new src/shared/html.js as a pure string replace over &,
<, >, " and '. The implementation it replaces round-tripped through a detached
element's textContent, which escapes neither quote character, and it was already
in use inside data-copy="..." and would have been inside href="...". Being pure
also makes it testable without a DOM shim.

Every interpolation into an innerHTML string across src/popup/views/ was audited
rather than only the reported one. Also unescaped: the transaction lists'
direction label (the explorer's method name, attacker-chosen for an attacker's
contract), the wallet name and ENS name in the Home wallet list, the URL in the
explorer link's href, the blockie data: URI, and the confirmation screen's
warning line, which carries only fixed strings today but is one wiring change
from carrying scraped explorer text. Explorer URLs are now built by one helper
that percent-encodes the path segment, so a from/to out of explorer JSON cannot
re-point the link. Where a value is a markup fragment this code just built, or a
loop index, or a locally computed number, it stays bare; the rule and the reason
are stated at the top of helpers.js.

Both manifests now declare default-src 'self' with frame-src 'none'. Four
directives had to stay looser than 'self' and none of them generalises:
style-src needs 'unsafe-inline' because the popup sets presentation through
style="..." attributes and Firefox has never implemented style-src-attr; img-src
needs data: for the blockies; connect-src needs https: and http: because the RPC
endpoint is user-configurable and a local node over http://127.0.0.1 is a
supported configuration. frame-src, form-action and base-uri are named rather
than inherited, because the last two do not fall back to default-src at all.
tests/manifest.test.js now pins the whole directive set exactly, in both
directions, and README.md carries the reasoning.

Displayed symbols are capped at 12 characters, the bound lookupTokenInfo()
already applied to a symbol read straight off a contract; the explorer path had
none. The cap is a layout bound and is documented as not being the security
control. isSpoofedSymbol() is untouched: it answers whether a symbol collides
with a known ticker, which is a different question, and repurposing it here
would have been the wrong control.

Verified failing first, four ways. Restricting escapeHtml to & < > (the escape
the old textContent round trip actually performed) fails 5 unit tests including
the data-copy attribute break-out. Removing the length cap fails 3. Dropping
default-src from manifest/chrome.json fails 2. Removing both the escape and the
cap and running the full Chrome suite fails the new browser test with the
attack reproduced: an <iframe id="pwn"> in the popup DOM, intercepting pointer
events over the Back button.

tests/htmlEscape.test.js

@@ -0,0 +1,110 @@
+// The escape every view depends on, and the length bound on a displayed
+// token symbol. Both were added for #307, where a token whose symbol()
+// returned an <iframe> tag rendered that iframe inside the popup.
+
+const { escapeHtml } = require("../src/shared/html");
+const {
+    displaySymbol,
+    MAX_SYMBOL_LENGTH,
+    UNKNOWN_SYMBOL,
+} = require("../src/shared/symbolDisplay");
+
+// The payload from the issue's reproduction, verbatim.
+const HOSTILE_SYMBOL =
+    '<iframe id="pwn" src="https://dapp.e2e.test/" ' +
+    'style="position:fixed;left:0;top:0;width:360px;height:600px;z-index:99999"></iframe>';
+
+describe("escapeHtml", () => {
+    test("escapes all five characters, quotes included", () => {
+        expect(escapeHtml("&<>\"'")).toBe("&amp;&lt;&gt;&quot;&#39;");
+    });
+
+    // The regression this function was rewritten for. The previous
+    // implementation round-tripped through a detached div's textContent,
+    // and an HTML text node serializes a quote as itself — so a value with
+    // a quote in it broke straight out of data-copy="..." and href="...".
+    test("escapes quotes, which the textContent round trip did not", () => {
+        expect(escapeHtml('a"b')).toBe("a&quot;b");
+        expect(escapeHtml("a'b")).toBe("a&#39;b");
+    });
+
+    test("does not double-escape an ampersand it just introduced", () => {
+        expect(escapeHtml("&lt;")).toBe("&amp;lt;");
+        expect(escapeHtml("&amp;")).toBe("&amp;amp;");
+    });
+
+    test("leaves a string with nothing to escape untouched", () => {
+        expect(escapeHtml("USDC")).toBe("USDC");
+        expect(escapeHtml("")).toBe("");
+    });
+
+    test("renders the hostile symbol inert", () => {
+        const out = escapeHtml(HOSTILE_SYMBOL);
+        expect(out).not.toContain("<");
+        expect(out).not.toContain(">");
+        expect(out).not.toContain('"');
+        expect(out).toContain("&lt;iframe");
+    });
+
+    // A quoted attribute is broken out of by a quote, a bare one by a
+    // space; both are closed here. Asserted as a whole attribute rather
+    // than character by character, because it is the attribute that has to
+    // survive, not the escape table.
+    test("a value carrying a quote stays inside its attribute", () => {
+        const evil = '" onload="alert(1)';
+        const attr = `data-copy="${escapeHtml(evil)}"`;
+        expect(attr).toBe('data-copy="&quot; onload=&quot;alert(1)"');
+        expect(attr.split('"').length - 1).toBe(2);
+    });
+
+    test("null and undefined render as nothing rather than as words", () => {
+        expect(escapeHtml(null)).toBe("");
+        expect(escapeHtml(undefined)).toBe("");
+    });
+
+    test("coerces a non-string without losing the escape", () => {
+        expect(escapeHtml(42)).toBe("42");
+        expect(escapeHtml({ toString: () => "<b>" })).toBe("&lt;b&gt;");
+    });
+});
+
+describe("displaySymbol", () => {
+    test("passes every symbol in the bundled list through unchanged", () => {
+        const { TOKENS } = require("../src/shared/tokenList");
+        for (const t of TOKENS) {
+            expect([t.address, displaySymbol(t.symbol)]).toEqual([
+                t.address,
+                t.symbol,
+            ]);
+        }
+    });
+
+    test("caps an over-long symbol and marks it as truncated", () => {
+        const long = "A".repeat(4096);
+        const out = displaySymbol(long);
+        expect(out.length).toBe(MAX_SYMBOL_LENGTH);
+        expect(out.endsWith("…")).toBe(true);
+    });
+
+    test("keeps a symbol of exactly the cap intact", () => {
+        const exact = "A".repeat(MAX_SYMBOL_LENGTH);
+        expect(displaySymbol(exact)).toBe(exact);
+    });
+
+    test("substitutes a placeholder for an absent symbol", () => {
+        expect(displaySymbol("")).toBe(UNKNOWN_SYMBOL);
+        expect(displaySymbol(null)).toBe(UNKNOWN_SYMBOL);
+        expect(displaySymbol(undefined)).toBe(UNKNOWN_SYMBOL);
+    });
+
+    // The cap is a layout bound and nothing more: it must not be mistaken
+    // for the thing that makes a symbol safe to render. A short hostile
+    // symbol passes through it untouched, and is inert only because the
+    // caller escapes it afterwards.
+    test("does not sanitize — a short markup symbol survives it verbatim", () => {
+        expect(displaySymbol("<img src=x>")).toBe("<img src=x>");
+        expect(escapeHtml(displaySymbol("<img src=x>"))).toBe(
+            "&lt;img src=x&gt;",
+        );
+    });
+});