From 0d1000badadda276596a35a6d6dc2bcd3ec258a9 Mon Sep 17 00:00:00 2001 From: Ben Zhang Date: Sun, 7 Apr 2024 12:40:58 -0700 Subject: [PATCH] Use URL-safe base64 on the website onboarding form (#2620) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It turns out that base64 is [not url-safe](https://base64.guru/standards/base64url). This PR uses the `js-base64` library to encode/decode. This also has the added benefit of being able to encode/decode unicode characters like emojis (the library handles this for us). For the deprecated old onboarding form, there are some dependency issues when using the latest node version. URLs linking to it shouldn't have any emojis in it anyway. We'll just leave that as-is.
``` ben@delta-ubuntu2 ~/Pr/infra-config/dir/u/onboarding-form benz/b64-url-safe *62 ❯ npm ci npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @rjsf/chakra-ui@4.1.1 npm ERR! Found: framer-motion@3.10.6 npm ERR! node_modules/framer-motion npm ERR! framer-motion@"^3.10.6" from the root project npm ERR! peer framer-motion@"3.x || 4.x || 5.x || 6.x" from @chakra-ui/accordion@1.4.10 npm ERR! node_modules/@chakra-ui/accordion npm ERR! @chakra-ui/accordion@"1.4.10" from @chakra-ui/react@1.8.7 npm ERR! node_modules/@chakra-ui/react npm ERR! @chakra-ui/react@"^1.8.7" from the root project npm ERR! 2 more (@rjsf/chakra-ui, chakra-ui-markdown-renderer) npm ERR! 9 more (@chakra-ui/checkbox, @chakra-ui/menu, ...) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer framer-motion@">=5.5.5" from @rjsf/chakra-ui@4.1.1 npm ERR! node_modules/@rjsf/chakra-ui npm ERR! @rjsf/chakra-ui@"^4.1.1" from the root project npm ERR! npm ERR! Conflicting peer dependency: framer-motion@11.0.25 npm ERR! node_modules/framer-motion npm ERR! peer framer-motion@">=5.5.5" from @rjsf/chakra-ui@4.1.1 npm ERR! node_modules/@rjsf/chakra-ui npm ERR! @rjsf/chakra-ui@"^4.1.1" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! npm ERR! For a full report see: npm ERR! /home/ben/.npm/_logs/2024-04-07T18_33_29_053Z-eresolve-report.txt npm ERR! A complete log of this run can be found in: /home/ben/.npm/_logs/2024-04-07T18_33_29_053Z-debug-0.log ```
Example with decoding an emoji: [preview](https://rgw-preview.watonomous.ca/WATonomous/infra-config/pr-2620/9224364f05193cb2018961b7c89cb3961779bae3...605ca0083e328d0ee224cbb82d20626e592dd897/website/docs/utilities/onboarding-form?initialformdatab64=eyJnZW5lcmFsIjp7ImNvbnRhY3RfZW1haWxzIjpbXSwiYWZmaWxpYXRpb25zIjpbXSwic2VuZF9vbmJvYXJkaW5nX2VtYWlsIjp0cnVlLCJuYW1lIjoi8J-ZiCJ9LCJjb21wdXRlX2NsdXN0ZXIiOnsiZW5hYmxlZCI6ZmFsc2V9LCJnaXRodWIiOnsiZW5hYmxlZCI6ZmFsc2V9LCJnb29nbGVfd29ya3NwYWNlIjp7ImVuYWJsZWQiOmZhbHNlfSwiamlyYSI6eyJlbmFibGVkIjpmYWxzZX0sImludGVybmFsX3Rvb2xzIjp7ImVuYWJsZWQiOmZhbHNlfSwidXdfZ2l0bGFiIjp7ImVuYWJsZWQiOmZhbHNlfSwiZGlzY29yZCI6eyJlbmFibGVkIjpmYWxzZX0sImZpbmFuY2Vfc3lzdGVtIjp7ImVuYWJsZWQiOmZhbHNlfSwic2VudHJ5Ijp7ImVuYWJsZWQiOmZhbHNlfX0) (works) [prod](https://cloud.watonomous.ca/docs/utilities/onboarding-form?initialformdatab64=eyJnZW5lcmFsIjp7ImNvbnRhY3RfZW1haWxzIjpbXSwiYWZmaWxpYXRpb25zIjpbXSwic2VuZF9vbmJvYXJkaW5nX2VtYWlsIjp0cnVlLCJuYW1lIjoi8J-ZiCJ9LCJjb21wdXRlX2NsdXN0ZXIiOnsiZW5hYmxlZCI6ZmFsc2V9LCJnaXRodWIiOnsiZW5hYmxlZCI6ZmFsc2V9LCJnb29nbGVfd29ya3NwYWNlIjp7ImVuYWJsZWQiOmZhbHNlfSwiamlyYSI6eyJlbmFibGVkIjpmYWxzZX0sImludGVybmFsX3Rvb2xzIjp7ImVuYWJsZWQiOmZhbHNlfSwidXdfZ2l0bGFiIjp7ImVuYWJsZWQiOmZhbHNlfSwiZGlzY29yZCI6eyJlbmFibGVkIjpmYWxzZX0sImZpbmFuY2Vfc3lzdGVtIjp7ImVuYWJsZWQiOmZhbHNlfSwic2VudHJ5Ijp7ImVuYWJsZWQiOmZhbHNlfX0) (breaks) cc @Jimmyj30 can you also use url-safe encoding in the user-config-lookup project? https://docs.python.org/3/library/base64.html#base64.urlsafe_b64encode --- components/onboarding-form.tsx | 5 +++-- package-lock.json | 8 ++++---- package.json | 1 + 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/components/onboarding-form.tsx b/components/onboarding-form.tsx index 9b2ff92..4c355f2 100644 --- a/components/onboarding-form.tsx +++ b/components/onboarding-form.tsx @@ -40,6 +40,7 @@ import { Toaster } from "@/components/ui/sonner"; import { toast } from "sonner"; import { deepEquals } from "@rjsf/utils" import { useRouter } from "next/router"; +import { encodeURI as b64EncodeURI, decode as b64Decode } from "js-base64"; const INITIAL_FORM_DATA_QUERY_PARAM = "initialformdatab64"; const FORM_STATE_KEY = "onboarding-form-state"; @@ -127,7 +128,7 @@ export default function OnboardingForm() { savedFormState.initialFormDataB64FromParam; const initialFormDataFromParam = initialFormDataB64FromParam - ? JSON.parse(atob(initialFormDataB64FromParam as string)) + ? JSON.parse(b64Decode(initialFormDataB64FromParam as string)) : null; // Choose initial form data: @@ -204,7 +205,7 @@ export default function OnboardingForm() { resetAlert(); setAlertTitle("Edit link"); setAlertDescription("Below is a link to the form with the current data pre-filled. You can send this to others as a template."); - const editLink = `${window.location.origin}${window.location.pathname}?${INITIAL_FORM_DATA_QUERY_PARAM}=${btoa(JSON.stringify(postprocessFormData(formData)))}`; + const editLink = `${window.location.origin}${window.location.pathname}?${INITIAL_FORM_DATA_QUERY_PARAM}=${b64EncodeURI(JSON.stringify(postprocessFormData(formData)))}`; setAlertBody( <> 
diff --git a/package-lock.json b/package-lock.json
index db6f4b9..d478383 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "cmdk": "^0.2.0",
         "core-js": "^3.34.0",
         "dayjs": "^1.11.10",
+        "js-base64": "^3.7.7",
         "lucide-react": "^0.288.0",
         "next": "^13.4.19",
         "nextjs-google-analytics": "^2.3.3",
@@ -13946,10 +13947,9 @@
       }
     },
     "node_modules/js-base64": {
-      "version": "3.7.5",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.5.tgz",
-      "integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA==",
-      "dev": true
+      "version": "3.7.7",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.7.tgz",
+      "integrity": "sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw=="
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
diff --git a/package.json b/package.json
index 2896da0..0edd24a 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "cmdk": "^0.2.0",
     "core-js": "^3.34.0",
     "dayjs": "^1.11.10",
+    "js-base64": "^3.7.7",
     "lucide-react": "^0.288.0",
     "next": "^13.4.19",
     "nextjs-google-analytics": "^2.3.3",