fix(app): parse data URL payloads completely

Author: OskarEichler

packages/app/__tests__/common.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from '@jest/globals';
+
+import { Base64, getDataUrlParts } from '../lib/common';
+
+describe('common utilities', () => {
+  describe('getDataUrlParts', () => {
+    it('preserves commas after the data URL delimiter', () => {
+      expect(getDataUrlParts('data:text/plain,one,two')).toEqual({
+        base64String: Base64.btoa('one,two'),
+        mediaType: 'text/plain',
+      });
+    });
+
+    it('allows an empty data URL payload', () => {
+      expect(getDataUrlParts('data:text/plain,')).toEqual({
+        base64String: '',
+        mediaType: 'text/plain',
+      });
+    });
+
+    it('encodes decoded text as UTF-8 bytes', () => {
+      expect(getDataUrlParts('data:text/plain,%E2%9C%93')).toEqual({
+        base64String: '4pyT',
+        mediaType: 'text/plain',
+      });
+    });
+
+    it('only recognizes a base64 marker in the metadata suffix', () => {
+      expect(getDataUrlParts('data:text/plain,value;base64')).toEqual({
+        base64String: Base64.btoa('value;base64'),
+        mediaType: 'text/plain',
+      });
+    });
+
+    it.each(['text/plain,value', 'data:text/plain', 'data:text/plain,%E0%A4%A'])(
+      'rejects malformed data URL %s',
+      value => {
+        expect(getDataUrlParts(value)).toEqual({
+          base64String: undefined,
+          mediaType: undefined,
+        });
+      },
+    );
+  });
+});

packages/app/lib/common/index.ts

@@ -30,18 +30,29 @@ export { default as ReferenceBase } from './ReferenceBase';
 export type { DataUrlParts, Observer };
 
 export function getDataUrlParts(dataUrlString: string): DataUrlParts {
-  const isBase64 = dataUrlString.includes(';base64');
-  let [mediaType, base64String] = dataUrlString.split(',');
-  if (!mediaType || !base64String) {
+  const match = /^data:([^,]*?)(;base64)?,([\s\S]*)$/.exec(dataUrlString);
+  if (!match) {
     return { base64String: undefined, mediaType: undefined };
   }
-  mediaType = mediaType.replace('data:', '').replace(';base64', '');
-  if (base64String && base64String.includes('%')) {
-    base64String = decodeURIComponent(base64String);
-  }
-  if (!isBase64) {
-    base64String = Base64.btoa(base64String);
+
+  const mediaType = match[1] || undefined;
+  let base64String = match[3] ?? '';
+
+  try {
+    if (base64String.includes('%')) {
+      base64String = decodeURIComponent(base64String);
+    }
+    if (!match[2]) {
+      const binaryString = encodeURIComponent(base64String).replace(
+        /%([0-9A-F]{2})/g,
+        (_, hex: string) => String.fromCharCode(Number.parseInt(hex, 16)),
+      );
+      base64String = Base64.btoa(binaryString);
+    }
+  } catch (_) {
+    return { base64String: undefined, mediaType: undefined };
   }
+
   return { base64String, mediaType };
 }