perf: Encode messages in mobile as byte arrays (#3077)

Base64 encoding/decoding seems to be a significant overhead for the boot
message on mobile. Encoding the messages as bytes instead have proven to
be more performant, but still has overhead.

Author: FrederikBolding

packages/snaps-controllers/src/services/webview/WebViewMessageStream.test.ts

@@ -22,12 +22,12 @@ describe('WebViewMessageStream', () => {
     expect(await responsePromise).toBe(555);
 
     expect(mockWebViewA.injectJavaScript).toHaveBeenCalledWith(
-      `window.postMessage('eyJ0YXJnZXQiOiJiIiwiZGF0YSI6MTExfQ==')`,
+      `window.postMessage([123,34,116,97,114,103,101,116,34,58,34,98,34,44,34,100,97,116,97,34,58,34,83,89,78,34,125])`,
     );
 
     // Inject { target: "foo", data: 111 }
     mockWebViewA.injectJavaScript(
-      `window.postMessage('eyJ0YXJnZXQiOiJmb28iLCJkYXRhIjoxMTF9')`,
+      `window.postMessage([123,34,116,97,114,103,101,116,34,58,34,102,111,111,34,44,34,100,97,116,97,34,58,49,49,49,125])`,
     );
 
     const listener = jest.fn();

packages/snaps-controllers/src/services/webview/WebViewMessageStream.ts

@@ -2,7 +2,7 @@ import type { PostMessageEvent } from '@metamask/post-message-stream';
 import { BasePostMessageStream } from '@metamask/post-message-stream';
 import { isValidStreamMessage } from '@metamask/post-message-stream/dist/utils';
 import { logError } from '@metamask/snaps-utils';
-import { assert, bytesToBase64, stringToBytes } from '@metamask/utils';
+import { assert, stringToBytes } from '@metamask/utils';
 
 export type WebViewInterface = {
   injectJavaScript(js: string): void;
@@ -65,12 +65,11 @@ export class WebViewMessageStream extends BasePostMessageStream {
       data,
     });
 
-    // To prevent XSS, we base64 encode the message before injecting it.
-    // This adds significant performance overhead.
-    // TODO: Should we use mobile native base64 here?
-    const bytes = stringToBytes(json);
-    const base64 = bytesToBase64(bytes);
-    this.#webView.injectJavaScript(`window.postMessage('${base64}')`);
+    // To prevent XSS, we encode the message before injecting it.
+    // This adds significant performance overhead for larger messages.
+    const bytes = new Uint8Array(stringToBytes(json));
+
+    this.#webView.injectJavaScript(`window.postMessage([${bytes.toString()}])`);
   }
 
   private _onMessage(event: PostMessageEvent): void {

packages/snaps-controllers/src/test-utils/webview.ts

@@ -1,16 +1,16 @@
-import { base64ToBytes, bytesToString } from '@metamask/utils';
+import { bytesToString } from '@metamask/utils';
 
 import { WebViewMessageStream } from '../services/webview/WebViewMessageStream';
 
 /**
- * Parses the injected JS and returns the decoded base64 payload.
+ * Parses the injected JS and returns the JSON payload.
  *
  * @param js - The injected JS.
- * @returns The parsed base64 payload as a string.
+ * @returns The decoded JSON as a string.
  */
 export function parseInjectedJS(js: string) {
-  const base64 = js.slice(20, -2);
-  const bytes = base64ToBytes(base64);
+  const byteString = js.slice(19, -1);
+  const bytes = new Uint8Array(JSON.parse(byteString));
   return bytesToString(bytes);
 }
 

packages/snaps-execution-environments/src/webview/WebViewExecutorStream.test.ts

@@ -1,5 +1,5 @@
 import { sleep } from '@metamask/snaps-utils/test-utils';
-import { bytesToBase64, stringToBytes } from '@metamask/utils';
+import { stringToBytes } from '@metamask/utils';
 
 import { WebViewExecutorStream } from './WebViewExecutorStream';
 
@@ -8,9 +8,8 @@ describe('WebViewExecutorStream', () => {
     const addEventListener = jest.fn();
     const postMessage = jest.fn().mockImplementation((message) => {
       const bytes = stringToBytes(message);
-      const base64 = bytesToBase64(bytes);
       addEventListener.mock.calls.forEach(([_type, listener]) => {
-        setTimeout(() => listener({ data: base64 }));
+        setTimeout(() => listener({ data: Array.from(bytes) }));
       });
     });
     const mockWindow = {

packages/snaps-execution-environments/src/webview/WebViewExecutorStream.ts

@@ -1,7 +1,7 @@
 import type { PostMessageEvent } from '@metamask/post-message-stream';
 import { BasePostMessageStream } from '@metamask/post-message-stream';
 import { isValidStreamMessage } from '@metamask/post-message-stream/dist/utils';
-import { base64ToBytes, bytesToString } from '@metamask/utils';
+import { bytesToString } from '@metamask/utils';
 
 type WebViewExecutorStreamArgs = {
   name: string;
@@ -62,12 +62,12 @@ export class WebViewExecutorStream extends BasePostMessageStream {
   }
 
   private _onMessage(event: PostMessageEvent): void {
-    if (typeof event.data !== 'string') {
+    if (!Array.isArray(event.data)) {
       return;
     }
 
-    const bytes = base64ToBytes(event.data);
-    const message = JSON.parse(bytesToString(bytes));
+    const json = bytesToString(new Uint8Array(event.data as number[]));
+    const message = JSON.parse(json);
 
     // Notice that we don't check targetWindow or targetOrigin here.
     // This doesn't seem possible to do in RN.