use base64 for HTTP headers (#1795)

* use base64 for HTTP headers

* fe for base64 headers

Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>

frontend/package-lock.json

@@ -23,6 +23,7 @@
         "@start9labs/emver": "^0.1.5",
         "aes-js": "^3.1.2",
         "ansi-to-html": "^0.7.2",
+        "base64-js": "^1.5.1",
         "cbor": "npm:@jprochazk/cbor@^0.4.9",
         "cbor-web": "^8.1.0",
         "core-js": "^3.21.1",

frontend/package.json

@@ -37,6 +37,7 @@
     "@start9labs/emver": "^0.1.5",
     "aes-js": "^3.1.2",
     "ansi-to-html": "^0.7.2",
+    "base64-js": "^1.5.1",
     "cbor": "npm:@jprochazk/cbor@^0.4.9",
     "cbor-web": "^8.1.0",
     "core-js": "^3.21.1",

frontend/projects/ui/src/app/services/api/embassy-live-api.service.ts

@@ -18,6 +18,7 @@ import { AuthService } from '../auth.service'
 import { DOCUMENT } from '@angular/common'
 import { DataModel } from '../patch-db/data-model'
 import { PatchDB, Update } from 'patch-db-client'
+import * as Base64 from 'base64-js'
 
 @Injectable()
 export class LiveApiService extends ApiService {
@@ -415,15 +416,22 @@ export class LiveApiService extends ApiService {
     }
 
     const res = await this.http.rpcRequest<T>(options)
-    const encoded = res.headers.get('x-patch-updates')
+    const encodedUpdates = res.headers.get('x-patch-updates')
+    const encodedError = res.headers.get('x-patch-error')
 
-    if (encoded) {
-      const updates: Update<DataModel>[] = JSON.parse(
-        decodeURIComponent(encoded),
+    if (encodedUpdates) {
+      const decoded = new TextDecoder().decode(
+        Base64.toByteArray(encodedUpdates),
       )
+      const updates: Update<DataModel>[] = JSON.parse(decoded)
       this.patchStream$.next(updates)
     }
 
+    if (encodedError) {
+      const error = new TextDecoder().decode(Base64.toByteArray(encodedError))
+      console.error(error)
+    }
+
     const rpcRes = res.body
 
     if (isRpcError(rpcRes)) {

frontend/tsconfig.json

@@ -20,9 +20,6 @@
     "module": "es2020",
     "lib": ["es2020", "dom"],
     "paths": {
-      "stream": ["./node_modules/stream-browserify"],
-      "crypto": ["./node_modules/crypto-browserify"],
-      "vm": ["./node_modules/vm-browserify"],
       /* These paths are relative to each app base folder */
       "@start9labs/marketplace": ["../marketplace/src/public-api"],
       "@start9labs/shared": ["../shared/src/public-api"]