harden: show a personal message's hex and its text in byte order, hidden characters marked (closes #403)

The signature screen showed only the text a personal message decodes
to, with bidirectional, right-to-left and zero-width characters acting
on it, so a site could make the message read differently from the
bytes that are signed, and a message that was not hex was decoded into
NUL characters. The screen now shows the hex as "Raw data" alongside
the text, lays the text out left to right in byte order, and shows each
control character, line and paragraph separator, and character that
paints nothing (the set src/shared/symbolSpoof.js already strips) as a
U+XXXX mark. A message is hex when getBytes, which signing uses, reads
it; one that is not cannot be signed, so it is shown as plain text with
"Sign" disabled.

Model: opus-5-5

tests/personalSignDisplay.test.js

@@ -1,9 +1,9 @@
 // The signature prompt shows a personal message as the bytes that are signed
 // (https://git.eeqj.de/sneak/AutistMask/issues/403): the raw data in hex, the
 // text it decodes to with control characters, line and paragraph separators
-// and characters that paint nothing marked rather than obeyed, laid out in
+// and characters that paint nothing marked rather than obeyed, markup shown as
-// byte order, and a message that is not hex as plain text that cannot be
+// text, laid out in byte order, and a message that is not hex as plain text
-// signed.
+// that cannot be signed.
 //
 // Driven against a minimal DOM stub in the shape
 // tests/approvalOrigin.test.js uses. That the layout keeps right-to-left
@@ -178,6 +178,20 @@ test("a line feed is shown as a line break", async () => {
     expect(node("approve-sign-message").innerHTML).toBe("Sign in<br>Nonce: 7");
 });
 
+// The message box is written as HTML, so a site's markup has to arrive there
+// escaped, as the text it is.
+const MARKUP = "<b>x</b><img src=x onerror=alert(1)>";
+
+test.each([
+    ["a hex message", hexlify(toUtf8Bytes(MARKUP))],
+    ["a message that is not hex", MARKUP],
+])("markup in %s is shown as text, not as markup", async (_, message) => {
+    await openPersonalSign(message);
+    expect(node("approve-sign-message").innerHTML).toBe(
+        "&lt;b&gt;x&lt;/b&gt;&lt;img src=x onerror=alert(1)&gt;",
+    );
+});
+
 test("the raw hex is shown alongside the text", async () => {
     await openPersonalSign("0x48656c6c6f");
     expect(shownMessage()).toBe("Hello");