web/advanced: check if imported settings are valid

web/i18n/en/settings.json

@@ -101,5 +101,9 @@
     "advanced.debug.description": "gives you access to a page with app & device info useful for debugging.",
 
     "advanced.data": "settings data",
-    "advanced.reset": "reset all settings"
+    "advanced.reset": "reset all settings",
+    "advanced.import": "import",
+    "advanced.import.no_data": "failed loading setting data from file",
+    "advanced.import.invalid": "file does not contain valid cobalt settings",
+    "advanced.export": "export"
 }

web/src/components/settings/TransferSettings.svelte

@@ -6,6 +6,7 @@
         updateSetting,
         loadFromString
     } from "$lib/state/settings";
+    import { validateSettings } from "$lib/settings/validate";
 
     import ActionButton from "$components/buttons/ActionButton.svelte";
 
@@ -15,29 +16,13 @@
     const updateSettings = (reader: FileReader) => {
         try {
             const data = reader.result?.toString();
-            if (!data) {
+            if (!data)
-                throw "data is missing";
+                throw $t('settings.advanced.import.no_data');
-            }
 
-            // TODO: input is not validated at all here, which means
+            const loadedSettings = loadFromString(data);
-            //       someone can potentially import a broken config.
+            if (!validateSettings(loadedSettings))
-            //       i don't know if we should do something about it
+                throw $t('settings.advanced.import.invalid');
-            //       or just thug it out.
-            updateSetting(loadFromString(data));
-        } catch (e) {
-            alert(e);
-        }
-    };
 
-    const importSettings = () => {
-        const pseudoinput = document.createElement("input");
-        pseudoinput.type = "file";
-        pseudoinput.accept = ".json";
-        pseudoinput.onchange = (e: Event) => {
-            const target = e.target as HTMLInputElement;
-            const reader = new FileReader();
-
-            reader.onload = function () {
             createDialog({
                 id: "import-confirm",
                 type: "small",
@@ -55,15 +40,49 @@
                         color: "red",
                         main: true,
                         timeout: 5000,
-                            action: () => updateSettings(reader),
+                        action: () => updateSetting(loadFromString(data))
                     },
                 ],
             });
+        } catch (e) {
+            let message;
+
+            if (e instanceof Error)
+                message = e.message;
+            else if (typeof e === 'string')
+                message = e;
+            else
+                message = $t('settings.advanced.import.no_data');
+
+            createDialog({
+                id: "settings-import-error",
+                type: "small",
+                meowbalt: "error",
+                bodyText: message,
+                buttons: [
+                    {
+                        text: $t("dialog.button.gotit"),
+                        main: true,
+                        action: () => {},
+                    },
+                ],
+            });
+        }
     };
 
+    const importSettings = () => {
+        const pseudoinput = document.createElement("input");
+        pseudoinput.type = "file";
+        pseudoinput.accept = ".json";
+        pseudoinput.onchange = (e: Event) => {
+            const target = e.target as HTMLInputElement;
+            const reader = new FileReader();
+
+            reader.onload = () => updateSettings(reader);
+
             if (target.files?.length === 1) {
                 reader.readAsText(target.files[0]);
-            } else alert("file missing");
+            }
         };
         pseudoinput.click();
     };
@@ -83,11 +102,11 @@
 
 <div class="button-row" id="settings-data-transfer">
     <ActionButton id="import-settings" click={importSettings}>
-        <IconFileImport /> import
+        <IconFileImport /> {$t("settings.advanced.import")}
     </ActionButton>
     {#if $storedSettings.schemaVersion}
     <ActionButton id="export-settings" click={exportSettings}>
-        <IconFileExport /> export
+        <IconFileExport /> {$t("settings.advanced.export")}
     </ActionButton>
     {/if}
 </div>

web/src/lib/settings/validate.ts

@@ -0,0 +1,85 @@
+import type { Optional } from '$lib/types/generic';
+import defaultSettings from './defaults'
+import {
+    downloadModeOptions,
+    filenameStyleOptions,
+    savingMethodOptions,
+    themeOptions,
+    videoQualityOptions,
+    youtubeVideoCodecOptions,
+    type PartialSettings,
+} from '$lib/types/settings';
+
+function validateTypes(input: unknown, reference = defaultSettings as unknown) {
+    if (typeof input === 'undefined')
+        return true;
+
+    if (typeof input !== typeof reference)
+        return false;
+
+    if (typeof reference !== 'object')
+        return true;
+
+    if (reference === null || input === null)
+        return input === reference;
+
+    if (Array.isArray(reference)) {
+        // TODO: we dont expect the reference array to hold any
+        //       elements, but we should at maybe check whether
+        //       the input array types are all matching.
+        return true;
+    }
+
+    // we know that `input` is an `object` based on the first
+    // two `if`s, but for some reason typescript doesn't.  :)
+    if (typeof input !== 'object')
+        return false;
+
+    const keys = new Set([
+        ...Object.keys(input),
+        ...Object.keys(reference)
+    ]);
+
+    for (const key of keys) {
+        const _input = input as Record<string, unknown>;
+        const _reference = reference as Record<string, unknown>;
+
+        if (!validateTypes(_input[key], _reference[key])) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+function validateLiteral(value: Optional<string>, allowed: readonly string[]) {
+    return value === undefined || allowed.includes(value);
+}
+
+function validateLiterals(literals: [Optional<string>, readonly string[]][]) {
+    for (const [ value, allowed ] of literals) {
+        if (!validateLiteral(value, allowed))
+            return false;
+    }
+
+    return true;
+}
+
+// performs a basic check on an "untrusted" settings object.
+export function validateSettings(settings: PartialSettings) {
+    if (!settings?.schemaVersion) {
+        return false;
+    }
+
+    return (
+        validateTypes(settings)
+        && validateLiterals([
+            [ settings?.appearance?.theme      , themeOptions ],
+            [ settings?.save?.downloadMode     , downloadModeOptions ],
+            [ settings?.save?.filenameStyle    , filenameStyleOptions ],
+            [ settings?.save?.videoQuality     , videoQualityOptions ],
+            [ settings?.save?.youtubeVideoCodec, youtubeVideoCodecOptions ],
+            [ settings?.save?.savingMethod     , savingMethodOptions ]
+        ])
+    );
+}