From 447bdf2148098d70ba309e13d9b1e846b5064da1 Mon Sep 17 00:00:00 2001 From: Corentin Thomasset Date: Thu, 4 Aug 2022 12:09:32 +0200 Subject: [PATCH] refactor(base64): mutualized base64 functions into global utilities --- .../base64-file-converter.vue | 3 +- .../base64-string-converter.vue | 14 ++-- .../basic-auth-generator.vue | 3 +- .../svg-placeholder-generator.vue | 3 +- src/utils/base64.test.ts | 69 +++++++++++++++++++ src/utils/base64.ts | 33 +++++++++ src/utils/defaults.test.ts | 16 +++++ src/utils/defaults.ts | 9 +++ 8 files changed, 138 insertions(+), 12 deletions(-) create mode 100644 src/utils/base64.test.ts create mode 100644 src/utils/base64.ts create mode 100644 src/utils/defaults.test.ts create mode 100644 src/utils/defaults.ts diff --git a/src/tools/base64-file-converter/base64-file-converter.vue b/src/tools/base64-file-converter/base64-file-converter.vue index 4cdff0f9..7f7ee1a9 100644 --- a/src/tools/base64-file-converter/base64-file-converter.vue +++ b/src/tools/base64-file-converter/base64-file-converter.vue @@ -35,6 +35,7 @@ import { useCopy } from '@/composable/copy'; import { useDownloadFileFromBase64 } from '@/composable/downloadBase64'; import { useValidation } from '@/composable/validation'; +import { isValidBase64 } from '@/utils/base64'; import { Upload } from '@vicons/tabler'; import { useBase64 } from '@vueuse/core'; import type { UploadFileInfo } from 'naive-ui'; @@ -47,7 +48,7 @@ const base64InputValidation = useValidation({ rules: [ { message: 'Invalid base 64 string', - validator: (value) => window.atob(value.replace(/^data:.*?;base64,/, '')), + validator: (value) => isValidBase64(value.trim()), }, ], }); diff --git a/src/tools/base64-string-converter/base64-string-converter.vue b/src/tools/base64-string-converter/base64-string-converter.vue index 46ff5e2a..d725117c 100644 --- a/src/tools/base64-string-converter/base64-string-converter.vue +++ b/src/tools/base64-string-converter/base64-string-converter.vue @@ -37,24 +37,20 @@ diff --git a/src/tools/basic-auth-generator/basic-auth-generator.vue b/src/tools/basic-auth-generator/basic-auth-generator.vue index 8769fb0a..975071c3 100644 --- a/src/tools/basic-auth-generator/basic-auth-generator.vue +++ b/src/tools/basic-auth-generator/basic-auth-generator.vue @@ -30,11 +30,12 @@ diff --git a/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue b/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue index 50b3f1c2..299a3fd0 100644 --- a/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue +++ b/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue @@ -53,6 +53,7 @@ import TextareaCopyable from '@/components/TextareaCopyable.vue'; import { useCopy } from '@/composable/copy'; import { useDownloadFileFromBase64 } from '@/composable/downloadBase64'; +import { textToBase64 } from '@/utils/base64'; import { computed, ref } from 'vue'; const width = ref(600); @@ -75,7 +76,7 @@ const svgString = computed(() => { `.trim(); }); -const base64 = computed(() => 'data:image/svg+xml;base64,' + window.btoa(svgString.value)); +const base64 = computed(() => 'data:image/svg+xml;base64,' + textToBase64(svgString.value)); const { copy: copySVG } = useCopy({ source: svgString }); const { copy: copyBase64 } = useCopy({ source: base64 }); diff --git a/src/utils/base64.test.ts b/src/utils/base64.test.ts new file mode 100644 index 00000000..0496b797 --- /dev/null +++ b/src/utils/base64.test.ts @@ -0,0 +1,69 @@ +import { describe, expect, it } from 'vitest'; +import { base64ToText, isValidBase64, removePotentialDataAndMimePrefix, textToBase64 } from './base64'; + +describe('base64 utils', () => { + describe('textToBase64', () => { + it('should convert string into base64', () => { + expect(textToBase64('')).to.eql(''); + expect(textToBase64('a')).to.eql('YQ=='); + expect(textToBase64('lorem ipsum')).to.eql('bG9yZW0gaXBzdW0='); + expect(textToBase64('-1')).to.eql('LTE='); + }); + }); + + describe('base64ToText', () => { + it('should convert base64 into text', () => { + expect(base64ToText('')).to.eql(''); + expect(base64ToText('YQ==')).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 throw for incorrect base64 string', () => { + expect(() => base64ToText('a')).to.throw('Incorrect base64 string'); + expect(() => base64ToText(' ')).to.throw('Incorrect base64 string'); + expect(() => base64ToText('é')).to.throw('Incorrect base64 string'); + // missing final '=' + expect(() => base64ToText('bG9yZW0gaXBzdW0')).to.throw('Incorrect base64 string'); + }); + }); + + describe('isValidBase64', () => { + it('should return true for correct base64 string', () => { + expect(isValidBase64('')).to.eql(true); + expect(isValidBase64('bG9yZW0gaXBzdW0=')).to.eql(true); + expect(isValidBase64('LTE=')).to.eql(true); + expect(isValidBase64('YQ==')).to.eql(true); + expect(isValidBase64('data:text/plain;base64,YQ==')).to.eql(true); + }); + + it('should return false for incorrect base64 string', () => { + expect(isValidBase64('a')).to.eql(false); + expect(isValidBase64(' ')).to.eql(false); + expect(isValidBase64('é')).to.eql(false); + expect(isValidBase64('data:text/plain;notbase64,YQ==')).to.eql(false); + // missing final '=' + expect(isValidBase64('bG9yZW0gaXBzdW0')).to.eql(false); + }); + + it('should return false for untrimmed correct base64 string', () => { + expect(isValidBase64('bG9yZW0gaXBzdW0= ')).to.eql(false); + expect(isValidBase64(' LTE=')).to.eql(false); + expect(isValidBase64(' YQ== ')).to.eql(false); + }); + }); + + describe('removePotentialDataAndMimePrefix', () => { + it('should remove data prefix of string', () => { + expect(removePotentialDataAndMimePrefix('')).to.eql(''); + expect(removePotentialDataAndMimePrefix('lorem ipsum')).to.eql('lorem ipsum'); + expect(removePotentialDataAndMimePrefix('bG9yZW0gaXBzdW0=')).to.eql('bG9yZW0gaXBzdW0='); + expect(removePotentialDataAndMimePrefix('data:image/jpeg;base64,lorem')).to.eql('lorem'); + expect(removePotentialDataAndMimePrefix('data:image/jpeg;notbase64,lorem')).to.eql( + 'data:image/jpeg;notbase64,lorem', + ); + expect(removePotentialDataAndMimePrefix('data:unknownmime;base64,lorem')).to.eql('lorem'); + }); + }); +}); diff --git a/src/utils/base64.ts b/src/utils/base64.ts new file mode 100644 index 00000000..c0ef96aa --- /dev/null +++ b/src/utils/base64.ts @@ -0,0 +1,33 @@ +export { textToBase64, base64ToText, isValidBase64, removePotentialDataAndMimePrefix }; + +function textToBase64(str: string) { + return window.btoa(str); +} + +function base64ToText(str: string) { + if (!isValidBase64(str)) { + throw new Error('Incorrect base64 string'); + } + + const cleanStr = removePotentialDataAndMimePrefix(str); + + try { + return window.atob(cleanStr); + } catch (_) { + throw new Error('Incorrect base64 string'); + } +} + +function removePotentialDataAndMimePrefix(str: string) { + return str.replace(/^data:.*?;base64,/, ''); +} + +function isValidBase64(str: string) { + const cleanStr = removePotentialDataAndMimePrefix(str); + + try { + return window.btoa(window.atob(cleanStr)) === cleanStr; + } catch (err) { + return false; + } +} diff --git a/src/utils/defaults.test.ts b/src/utils/defaults.test.ts new file mode 100644 index 00000000..b322968c --- /dev/null +++ b/src/utils/defaults.test.ts @@ -0,0 +1,16 @@ +import { describe, expect, it } from 'vitest'; +import { withDefaultOnError } from './defaults'; + +describe('defaults util', () => { + describe('withDefaultOnError', () => { + it('should return the callback or the default one if the callback throws', () => { + expect(withDefaultOnError(() => 'original', 'default')).to.eql('original'); + }); + + expect( + withDefaultOnError(() => { + throw ''; + }, 'default'), + ).to.eql('default'); + }); +}); diff --git a/src/utils/defaults.ts b/src/utils/defaults.ts new file mode 100644 index 00000000..3d253d54 --- /dev/null +++ b/src/utils/defaults.ts @@ -0,0 +1,9 @@ +export { withDefaultOnError }; + +function withDefaultOnError(cb: () => A, defaultValue: B): A | B { + try { + return cb(); + } catch (_) { + return defaultValue; + } +}