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

src/tools/base64-string-converter/base64-string-converter.vue

@@ -1,5 +1,8 @@
 <template>
   <c-card title="String to base64">
+    <n-form-item label="Encode URL safe" label-placement="left">
+      <n-switch v-model:value="encodeUrlSafe" />
+    </n-form-item>
     <n-form-item label="String to encode">
       <n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." rows="5" />
     </n-form-item>
@@ -20,6 +23,9 @@
   </c-card>
 
   <c-card title="Base64 to string">
+    <n-form-item label="Decode URL safe" label-placement="left">
+      <n-switch v-model:value="decodeUrlSafe" />
+    </n-form-item>
     <n-form-item label="Base64 string to decode" v-bind="b64Validation.attrs">
       <n-input v-model:value="base64Input" type="textarea" placeholder="Your base64 string..." rows="5" />
     </n-form-item>
@@ -41,15 +47,20 @@ import { base64ToText, isValidBase64, textToBase64 } from '@/utils/base64';
 import { withDefaultOnError } from '@/utils/defaults';
 import { computed, ref } from 'vue';
 
+const encodeUrlSafe = useStorage('base64-string-converter--encode-url-safe', false);
+const decodeUrlSafe = useStorage('base64-string-converter--decode-url-safe', false);
+
 const textInput = ref('');
-const base64Output = computed(() => textToBase64(textInput.value));
+const base64Output = computed(() => textToBase64(textInput.value, encodeUrlSafe.value));
 const { copy: copyTextBase64 } = useCopy({ source: base64Output, text: 'Base64 string copied to the clipboard' });
 
 const base64Input = ref('');
-const textOutput = computed(() => withDefaultOnError(() => base64ToText(base64Input.value.trim()), ''));
+const textOutput = computed(() =>
+  withDefaultOnError(() => base64ToText(base64Input.value.trim(), decodeUrlSafe.value), ''),
+);
 const { copy: copyText } = useCopy({ source: textOutput, text: 'String copied to the clipboard' });
 const b64Validation = useValidation({
   source: base64Input,
-  rules: [{ message: 'Invalid base64 string', validator: (value) => isValidBase64(value.trim()) }],
+  rules: [{ message: 'Invalid base64 string', validator: (value) => isValidBase64(value.trim(), decodeUrlSafe.value) }],
 });
 </script>

src/utils/base64.test.ts

@@ -8,6 +8,13 @@ describe('base64 utils', () => {
       expect(textToBase64('a')).to.eql('YQ==');
       expect(textToBase64('lorem ipsum')).to.eql('bG9yZW0gaXBzdW0=');
       expect(textToBase64('-1')).to.eql('LTE=');
+      expect(textToBase64('<<<????????>>>')).to.eql('PDw8Pz8/Pz8/Pz8+Pj4=');
+    });
+    it('should convert string into url safe base64', () => {
+      expect(textToBase64('', true)).to.eql('');
+      expect(textToBase64('a', true)).to.eql('YQ');
+      expect(textToBase64('lorem ipsum', true)).to.eql('bG9yZW0gaXBzdW0');
+      expect(textToBase64('<<<????????>>>', true)).to.eql('PDw8Pz8_Pz8_Pz8-Pj4');
     });
   });
 
@@ -20,6 +27,15 @@ describe('base64 utils', () => {
       expect(base64ToText('LTE=')).to.eql('-1');
     });
 
+    it('should convert url safe base64 into text', () => {
+      expect(base64ToText('', true)).to.eql('');
+      expect(base64ToText('YQ', true)).to.eql('a');
+      expect(base64ToText('bG9yZW0gaXBzdW0', true)).to.eql('lorem ipsum');
+      expect(base64ToText('data:text/plain;base64,bG9yZW0gaXBzdW0', true)).to.eql('lorem ipsum');
+      expect(base64ToText('LTE', true)).to.eql('-1');
+      expect(base64ToText('PDw8Pz8_Pz8_Pz8-Pj4', 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');

src/utils/base64.ts

@@ -1,15 +1,19 @@
 export { textToBase64, base64ToText, isValidBase64, removePotentialDataAndMimePrefix };
 
-function textToBase64(str: string) {
+function textToBase64(str: string, urlSafe = false) {
-  return window.btoa(str);
+  const encoded = window.btoa(str);
+  return urlSafe ? makeUriSafe(encoded) : encoded;
 }
 
-function base64ToText(str: string) {
+function base64ToText(str: string, urlSafe = false) {
-  if (!isValidBase64(str)) {
+  if (!isValidBase64(str, urlSafe)) {
     throw new Error('Incorrect base64 string');
   }
 
-  const cleanStr = removePotentialDataAndMimePrefix(str);
+  let cleanStr = removePotentialDataAndMimePrefix(str);
+  if (urlSafe) {
+    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) {
+function isValidBase64(str: string, urlSafe = false) {
-  const cleanStr = removePotentialDataAndMimePrefix(str);
+  let cleanStr = removePotentialDataAndMimePrefix(str);
+  if (urlSafe) {
+    cleanStr = unURI(cleanStr);
+  }
 
   try {
+    if (urlSafe) {
+      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, '');
+}