feat: rethink the whole plugin system

Author: notwindstone

docs/README.md

@@ -37,7 +37,76 @@ Isolation was done using the [Secure ECMAScript](https://github.com/endojs/endo)
 
 Interactive Live2Ds were taken from [Z_DK's Steam Workshop](https://steamcommunity.com/id/xingsuileixi/myworkshopfiles/?appid=431960)
 
-One more thing: we need to take care of DOM script tags that plugins can add when have the DOM access. Otherwise, this sandbox can be escaped. Maybe we can overwrite the `document.createElement` before freezing it? And just to be sure, listen for `head` element changes for possible script tag additions?
+<details>
+We need to take care of DOM script tags that plugins can add when have the DOM access. Otherwise, this sandbox can be escaped. Maybe we can overwrite the `document.createElement` before freezing it? And just to be sure, listen for `head` element changes for possible script tag additions?
+
+Update: Seems like giving DOM access to the compartment basically ruins the whole purpose of plugin isolation, since one can add a JS code to any DOM element that will be executed in the global scope.
+
+Well, let's make these permissions then?
+
+- Full DOM access
+- File System access (window.__TAURI__.fs)
+- System shell access (window.__TAURI__.shell)
+- ...other Tauri-specific plugins access
+
+How to adapt to these rules? Do I really need compartments here? Isn't it better to just use `new Function` at this point? What to do about script tags and the above DOM element JS executions? Should I expose Tauri API through `window` object? How to import and share Tauri API then?
+
+---
+
+After some thoughts, I decided to go with this approach:
+
+Tauri API **will not** be exposed through `window`
+
+Account sign in is made through another webview window with no plugin access to prevent any possible security vulnerabilities.
+
+- Kaede User Repository (KUR) - plugins that are free to publish for anyone. Will use Secure ECMAScript Compartments for not full DOM access, otherwise they are executed with `new Function`
+- Moderated plugins - every plugin publish/update goes through my checks. I only need plugin's source code and build manual. Executed with `new Function` or `Module Federation Runtime API`, have full DOM access by default, only require Tauri API scope permissions (fs, shell, global shortcuts, network, os info, etc.) from user
+
+Permissions:
+
+Runs in compartment:
+
+- CSS: Apply CSS stylesheet                    - Custom
+- |    Edit/replace element class list (by id)
+- |    Edit element styles (by id)
+
+Runs in `new Function` or Module Federation Runtime API (`eval`):
+
+Note: I need to generalize these, because seeing 30 permissions that vary from doing 1 simple ass thing (tauri-core-app) to doing 50+ dangerous things (tauri-plugin-fs/tauri-plugin-shell) is not ok
+
+- Website capabilities: everything that HTML & JS & CSS offers (no access to Tauri API)
+- Tauri Core: Allow to change application theme (not the UI) - App
+- |           Emit/listen events to/from the backend         - Event
+- |           Create images from paths                       - Image
+- |           Menu
+- |           Path
+- |           Resources
+- |           Tray
+- |           WebViews & windows management
+- Tauri Plugins: Clipboard writing (texts, images) - Clipboard Manager
+- |              Clipboard reading (texts)
+- |              Clipboard reading (images)
+- |             
+- plugin-drpc (i will format these a bit later)
+- plugin-fs
+- plugin-global-shortcut
+- plugin-http
+- plugin-log
+- plugin-notification
+- plugin-opener
+- plugin-os
+- plugin-process
+- plugin-shell
+- plugin-upload
+
+not related, but need to store it somewhere:
+
+context menu has 50000 z-index
+log menu     has 40000 z-index
+sidebar      has 3000 z-index
+</details>
+
+If there is no video, [click here](https://github.com/user-attachments/assets/a1ccc9f2-0244-437b-8883-a68a26953e2a)
 
 <video src="https://github.com/user-attachments/assets/a1ccc9f2-0244-437b-8883-a68a26953e2a" width="320" height="240" controls></video>
 

index.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="./assets/index.b5021dcf.css" />
     <title>Kaede</title>
   </head>
-  <body>
+  <body style="background:#111111">
     <div id="app"></div>
     <div id="blue_archive" style="position:absolute;left:0;top:0;right:0;bottom:0"></div>
     <script type="module" src="/src/main.ts"></script>

src/App.vue

@@ -59,20 +59,34 @@ const LogViewer = defineAsyncComponent(
 
   try {
     console.log("Action: Trying to lockdown every JS globals");
-    lockdown({
-      "evalTaming": "unsafeEval",
-    });
+    // lockdown({
+    //   "evalTaming": "unsafeEval",
+    // });
   } catch {
     console.log("Already locked down");
   }
 
   window.Buffer = Buffer;
 
-  console.log(window);
+  const _temporary: object = {};
+
+  for (const _name of Object.getOwnPropertyNames(window)) {
+    if (["Infinity", "undefined", "NaN"].includes(_name)) {
+      continue;
+    }
+
+    if (_name[0] === _name[0].toLowerCase() && typeof window[_name] === "function") {
+      _temporary[_name] = window[_name].bind(window);
+
+      continue;
+    }
+
+    _temporary[_name] = window[_name];
+  }
 
   console.log("Action: Creating a safe compartment");
   const c = new Compartment({
-    "globals": {
+    "globals": _temporary, /* {
       ...window,
       "console": {
         ...console,
@@ -157,14 +171,15 @@ const LogViewer = defineAsyncComponent(
       clearInterval: window.clearInterval.bind(window),
       clearTimeout: window.clearTimeout.bind(window),
       FontFace: window.FontFace,
-    },
+    }, */
     "__options__": true,
   });
   const t2 = performance.now();
 
   console.log("Action: Running the contained code");
   try {
-    await c.evaluate(_cleaned);
+    // await c.evaluate(_cleaned);
+    // eval(_cleaned);
   } catch (error) {
     console.error("Error in the container:", error);
   }

src/components/layout/Sidebar.vue

@@ -11,15 +11,15 @@ const globalStates = inject<ContextGlobalStatesType>(GlobalStatesContextKey);
 
 <template>
   <div class="h-full w-20"></div>
-  <TransitionGroup name="fade" tag="div" class="absolute left-0 top-0 h-vh w-20 flex flex-col items-center bg-[theme(colors.neutral.950/.3)] z-1000 backdrop-blur-sm">
+  <TransitionGroup name="fade" tag="div" class="absolute left-0 top-0 h-vh w-20 flex flex-col items-center bg-neutral-950 z-10000">
     <button
       v-for="item in globalStates?.sidebarItems"
       :key="item.path"
       :disabled="item.path === globalStates?.page"
       @mousedown="item.action"
       @touchstart="item.action"
       @click="item.action"
-      class="relative size-20 flex shrink-0 flex-col items-center justify-center gap-1 text-white transition-[background-color] duration-150 disabled:bg-[theme(colors.neutral.100/.15)]"
+      class="relative size-20 flex shrink-0 flex-col items-center justify-center gap-1 text-white transition-[background-color] duration-150 disabled:bg-neutral-900"
       name="sidebar__item"
     >
       <span

src/components/logging/LogViewer.vue

@@ -113,12 +113,12 @@ onMounted(async () => {
 <template>
   <div
     @contextmenu.prevent
-    class="absolute bottom-0 left-0 right-0 top-0 grid place-items-center pointer-events-none"
+    class="absolute z-40000 bottom-0 left-0 right-0 top-0 grid place-items-center pointer-events-none"
   >
     <div
       @contextmenu.prevent
       @contextmenu="showContextMenu"
-      class="rounded-md pointer-events-auto z-40000 h-fit max-h-[calc(100vh-64px)] max-w-[calc(100vw-64px)] w-fit flex flex-col gap-2 bg-neutral-900 p-4 text-white drop-shadow-lg"
+      class="rounded-md pointer-events-auto h-fit max-h-[calc(100vh-64px)] max-w-[calc(100vw-64px)] w-fit flex flex-col gap-2 bg-neutral-900 p-4 text-white drop-shadow-lg"
     >
       <div class="w-full flex flex-nowrap items-start justify-between gap-4 pb-2 shrink-0">
         <div class="flex flex-col gap-2">