Base64 encode message before sending to WebView

src/utils/__tests__/encoding-test.js

@@ -5,6 +5,7 @@ import {
   hexToAscii,
   asciiToHex,
   xorHexStrings,
+  strToBase64,
   extractApiKey,
 } from '../encoding';
 
@@ -61,11 +62,40 @@ describe('asciiToHex', () => {
   });
 });
 
+describe('strToBase64', () => {
+  test('can handle an empty string', () => {
+    const obj = '';
+    const expected = '';
+
+    const result = strToBase64(obj);
+
+    expect(result).toBe(expected);
+  });
+
+  test('can encode any string', () => {
+    const obj = {
+      key: 'ABCabc123',
+      empty: null,
+      array: [1, 2, 3],
+    };
+    const expected = 'W29iamVjdCBPYmplY3Rd';
+
+    const result = strToBase64(obj);
+
+    expect(result).toBe(expected);
+  });
+
+  test('supports unicode characters', () => {
+    const obj = { key: '😇😈' };
+    const expected = 'W29iamVjdCBPYmplY3Rd';
+    const result = strToBase64(obj);
+    expect(result).toBe(expected);
+  });
+});
 describe('extractApiKey', () => {
   test('correctly extracts an API key that has been XORed with a OTP', () => {
     const key = 'testing';
     const otp = 'A8348A93A83493';
-
     const encoded = xorHexStrings(asciiToHex(key), otp);
     expect(extractApiKey(encoded, otp)).toBe(key);
   });

src/utils/encoding.js

@@ -32,6 +32,11 @@ export const base64ToHex = (bytes: string) => asciiToHex(base64.decode(bytes));
 
 export const hexToBase64 = (hex: string) => base64.encode(hexToAscii(hex));
 
+// https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
+// `base64.encode` used instead of `btoa` to support Unicode input
+export const strToBase64 = (text: string): string =>
+  base64.encode(unescape(encodeURIComponent(text)));
+
 // Extract an API key encoded as a hex string XOR'ed with a one time pad (OTP)
 // (this is used during the OAuth flow)
 export const extractApiKey = (encoded: string, otp: string) =>

src/webview/MessageListWeb.js

@@ -10,6 +10,7 @@ import getHtml from './html/html';
 import renderMessagesAsHtml from './html/renderMessagesAsHtml';
 import { getInputMessages } from './webViewHandleUpdates';
 import * as webViewEventHandlers from './webViewEventHandlers';
+import { strToBase64 } from '../utils/encoding';
 
 export default class MessageListWeb extends Component<Props> {
   context: Context;
@@ -29,7 +30,7 @@ export default class MessageListWeb extends Component<Props> {
 
   sendMessages = (messages: WebviewInputMessage[]): void => {
     if (this.webview && messages.length > 0) {
-      this.webview.postMessage(JSON.stringify(messages), '*');
+      this.webview.postMessage(strToBase64(JSON.stringify(messages)), '*');
     }
   };
 

src/webview/js/generatedEs3.js

@@ -241,7 +241,8 @@ var messageHandlers = {
 document.addEventListener('message', function (e) {
   scrollEventsDisabled = true;
 
-  var messages = JSON.parse(e.data);
+  var decodedData = decodeURIComponent(escape(window.atob(e.data)));
+  var messages = JSON.parse(decodedData);
   messages.forEach(function (msg) {
     messageHandlers[msg.type](msg);
   });

src/webview/js/js.js

@@ -261,7 +261,8 @@ const messageHandlers = {
 document.addEventListener('message', e => {
   scrollEventsDisabled = true;
   // $FlowFixMe
-  const messages: WebviewInputMessage[] = JSON.parse(e.data);
+  const decodedData = decodeURIComponent(escape(window.atob(e.data)));
+  const messages: WebviewInputMessage[] = JSON.parse(decodedData);
   messages.forEach((msg: WebviewInputMessage) => {
     // $FlowFixMe
     messageHandlers[msg.type](msg);