feat(base64-string-converter): switch to encode and decode url safe base64 strings (#392)

* feat(base64-string-converter): switch to encode and decode url safe

* feat(base64-string-converter): changes based on review comments, use config object instead of boolean argument.

* feat(base64-string-converter): fix validation, add option to watch additional refs for changes which interfere with validation rules

2 files changed, 49 insertions, 8 deletions

diff --git a/src/utils/base64.test.ts b/src/utils/base64.test.ts
index 0496b79..994f1b1 100644
--- a/src/utils/base64.test.ts
+++ b/src/utils/base64.test.ts
@@ -8,18 +8,34 @@ describe('base64 utils', () => {
       expect(textToBase64('a')).to.eql('YQ==');
       expect(textToBase64('lorem ipsum')).to.eql('bG9yZW0gaXBzdW0=');
       expect(textToBase64('-1')).to.eql('LTE=');
+      expect(textToBase64('<<<????????>>>', { makeUrlSafe: false })).to.eql('PDw8Pz8/Pz8/Pz8+Pj4=');
+    });
+    it('should convert string into url safe base64', () => {
+      expect(textToBase64('', { makeUrlSafe: true })).to.eql('');
+      expect(textToBase64('a', { makeUrlSafe: true })).to.eql('YQ');
+      expect(textToBase64('lorem ipsum', { makeUrlSafe: true })).to.eql('bG9yZW0gaXBzdW0');
+      expect(textToBase64('<<<????????>>>', { makeUrlSafe: true })).to.eql('PDw8Pz8_Pz8_Pz8-Pj4');
     });
   });
 
   describe('base64ToText', () => {
     it('should convert base64 into text', () => {
       expect(base64ToText('')).to.eql('');
-      expect(base64ToText('YQ==')).to.eql('a');
+      expect(base64ToText('YQ==', { makeUrlSafe: false })).to.eql('a');
       expect(base64ToText('bG9yZW0gaXBzdW0=')).to.eql('lorem ipsum');
       expect(base64ToText('data:text/plain;base64,bG9yZW0gaXBzdW0=')).to.eql('lorem ipsum');
       expect(base64ToText('LTE=')).to.eql('-1');
     });
 
+    it('should convert url safe base64 into text', () => {
+      expect(base64ToText('', { makeUrlSafe: true })).to.eql('');
+      expect(base64ToText('YQ', { makeUrlSafe: true })).to.eql('a');
+      expect(base64ToText('bG9yZW0gaXBzdW0', { makeUrlSafe: true })).to.eql('lorem ipsum');
+      expect(base64ToText('data:text/plain;base64,bG9yZW0gaXBzdW0', { makeUrlSafe: true })).to.eql('lorem ipsum');
+      expect(base64ToText('LTE', { makeUrlSafe: true })).to.eql('-1');
+      expect(base64ToText('PDw8Pz8_Pz8_Pz8-Pj4', { makeUrlSafe: true })).to.eql('<<<????????>>>');
+    });
+
     it('should throw for incorrect base64 string', () => {
       expect(() => base64ToText('a')).to.throw('Incorrect base64 string');
       expect(() => base64ToText(' ')).to.throw('Incorrect base64 string');
diff --git a/src/utils/base64.ts b/src/utils/base64.ts
index c0ef96a..44fda1e 100644
--- a/src/utils/base64.ts
+++ b/src/utils/base64.ts
@@ -1,15 +1,19 @@
 export { textToBase64, base64ToText, isValidBase64, removePotentialDataAndMimePrefix };
 
-function textToBase64(str: string) {
-  return window.btoa(str);
+function textToBase64(str: string, { makeUrlSafe = false }: { makeUrlSafe?: boolean } = {}) {
+  const encoded = window.btoa(str);
+  return makeUrlSafe ? makeUriSafe(encoded) : encoded;
 }
 
-function base64ToText(str: string) {
-  if (!isValidBase64(str)) {
+function base64ToText(str: string, { makeUrlSafe = false }: { makeUrlSafe?: boolean } = {}) {
+  if (!isValidBase64(str, { makeUrlSafe: makeUrlSafe })) {
     throw new Error('Incorrect base64 string');
   }
 
-  const cleanStr = removePotentialDataAndMimePrefix(str);
+  let cleanStr = removePotentialDataAndMimePrefix(str);
+  if (makeUrlSafe) {
+    cleanStr = unURI(cleanStr);
+  }
 
   try {
     return window.atob(cleanStr);
@@ -22,12 +26,33 @@ function removePotentialDataAndMimePrefix(str: string) {
   return str.replace(/^data:.*?;base64,/, '');
 }
 
-function isValidBase64(str: string) {
-  const cleanStr = removePotentialDataAndMimePrefix(str);
+function isValidBase64(str: string, { makeUrlSafe = false }: { makeUrlSafe?: boolean } = {}) {
+  let cleanStr = removePotentialDataAndMimePrefix(str);
+  if (makeUrlSafe) {
+    cleanStr = unURI(cleanStr);
+  }
 
   try {
+    if (makeUrlSafe) {
+      return removePotentialPadding(window.btoa(window.atob(cleanStr))) === cleanStr;
+    }
     return window.btoa(window.atob(cleanStr)) === cleanStr;
   } catch (err) {
     return false;
   }
 }
+
+function makeUriSafe(encoded: string) {
+  return encoded.replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_');
+}
+
+function unURI(encoded: string): string {
+  return encoded
+    .replace(/-/g, '+')
+    .replace(/_/g, '/')
+    .replace(/[^A-Za-z0-9+/]/g, '');
+}
+
+function removePotentialPadding(str: string) {
+  return str.replace(/=/g, '');
+}