Feature/kasm 6894 remove webpack to reduce vulnerabilities (#128)

* KASM-6894 Remove Webpack to reduce vulnerabilities, update packages
2025-02-21 02:18:45 +13:00 · 2025-02-21 02:18:45 +13:00 · 5c46b2e13a
parent 46412d23af
commit 5c46b2e13a
6 changed files with 93 additions and 29788 deletions
--- a/app/ui.js
+++ b/app/ui.js
@ -25,6 +25,9 @@ window.updateSetting = (name, value) => {
    }
 }

+import '@interactjs/pointer-events'
+import '@interactjs/actions/drag'
+import interact from '@interactjs/interact';
 import "core-js/stable";
 import "regenerator-runtime/runtime";
 import * as Log from '../core/util/logging.js';
@ -67,6 +70,7 @@ const UI = {
    selectedMonitor: null,
    refreshRotation: 0,
    currentDisplay: null,
+    displayWindows: ['primary'],

    supportsBroadcastChannel: (typeof BroadcastChannel !== "undefined"),

@ -84,7 +88,13 @@ const UI = {

    // Render default UI and initialize settings menu
    start() {
-        //initialize settings then apply quality presents
+
+        // If secondary monitor skip init
+        if (window.location.href.includes("screen.html")) {
+            return;
+        }
+
+        // Initialize settings then apply quality presents
        UI.initSettings();
        UI.updateQuality();

@ -265,6 +275,7 @@ const UI = {
        UI.initSetting('prefer_local_cursor', true);
        UI.initSetting('toggle_control_panel', false);
        UI.initSetting('enable_perf_stats', false);
+        UI.initSetting('enable_threading', true);
        UI.initSetting('virtual_keyboard_visible', false);
        UI.initSetting('enable_ime', false);
        UI.initSetting('enable_webrtc', false);
@ -529,6 +540,7 @@ const UI = {
        UI.addClickHandle('noVNC_settings_button', UI.toggleSettingsPanel);

        document.getElementById("noVNC_setting_enable_perf_stats").addEventListener('click', UI.showStats);
+        document.getElementById("noVNC_setting_enable_threading").addEventListener('click', UI.threading);
        document.getElementById("noVNC_auto_placement").addEventListener('change', UI.setAutoPlacement);

        UI.addSettingChangeHandler('encrypt');
@ -597,6 +609,8 @@ const UI = {
        UI.addSettingChangeHandler('enable_webrtc', UI.toggleWebRTC);
        UI.addSettingChangeHandler('enable_hidpi');
        UI.addSettingChangeHandler('enable_hidpi', UI.enableHiDpi);
+        UI.addSettingChangeHandler('enable_threading');
+        UI.addSettingChangeHandler('enable_threading', UI.threading);
    },

    addFullscreenHandlers() {
@ -742,6 +756,17 @@ const UI = {
        
    },

+    threading() {
+        if (UI.rfb) {
+            if (UI.getSetting('enable_threading')) {
+                UI.rfb.threading = true;
+            } else {
+                UI.rfb.threading = false;
+            }
+        }
+        UI.saveSetting('enable_threading');
+    },
+
    showStatus(text, statusType, time, kasm = false) {
        // If inside the full Kasm CDI framework, don't show messages unless explicitly told to
        if (WebUtil.isInsideKasmVDI() && !kasm) {
@ -1482,6 +1507,7 @@ const UI = {
        UI.rfb.clipboardBinary = supportsBinaryClipboard() && UI.rfb.clipboardSeamless;
        UI.rfb.enableWebRTC = UI.getSetting('enable_webrtc');
        UI.rfb.enableHiDpi = UI.getSetting('enable_hidpi');
+        UI.rfb.threading = UI.getSetting('enable_threading');
        UI.rfb.mouseButtonMapper = UI.initMouseButtonMapper();
        if (UI.rfb.videoQuality === 5) {
            UI.rfb.enableQOI = true;
@ -1792,6 +1818,10 @@ const UI = {
                case 'control_displays':
                    parent.postMessage({ action: 'can_control_displays', value: true}, '*' );
                    break;
+                case 'enable_threading':
+                    UI.forceSetting('enable_threading', event.data.value, false);
+                    UI.threading();
+                    break;
                case 'terminate':
                    //terminate a session, different then disconnect in that it is assumed KasmVNC will be shutdown
                    if (UI.rfb) {
@ -1892,6 +1922,7 @@ const UI = {
        UI.rfb.videoQuality = UI.getSetting('video_quality');
        UI.rfb.enableWebP = UI.getSetting('enable_webp');
        UI.rfb.enableHiDpi = UI.getSetting('enable_hidpi');
+        UI.rfb.threading = UI.getSetting('enable_threading');

        if (UI.rfb.resizeSession) {
            UI.rfb.forcedResolutionX = null;
@ -1982,8 +2013,9 @@ const UI = {
                    const current = UI.increaseCurrentDisplay(details) 
                    let screen = details.screens[current]
                    const options = 'left='+screen.availLeft+',top='+screen.availTop+',width='+screen.availWidth+',height='+screen.availHeight+',fullscreen'
-                    window.open(new_display_url, '_blank', options);
-                    return
+                    let newdisplay = window.open(new_display_url, '_blank', options);
+                    UI.displayWindows.push(newdisplay);
+                    return;
                }
            } catch (e) {
                console.log(e)
@ -1992,7 +2024,8 @@ const UI = {
        }
        
        Log.Debug(`Opening a secondary display ${new_display_url}`)
-        window.open(new_display_url, '_blank', 'toolbar=0,location=0,menubar=0');
+        let newdisplay = window.open(new_display_url, '_blank', 'toolbar=0,location=0,menubar=0');
+        UI.displayWindows.push(newdisplay);
    },

    initMonitors(screenPlan) {
@ -2545,6 +2578,7 @@ const UI = {
            UI.rfb.videoQuality = parseInt(UI.getSetting('video_quality'));
            UI.rfb.enableQOI = enable_qoi;
            UI.rfb.enableHiDpi = UI.getSetting('enable_hidpi');
+            UI.rfb.threading = UI.getSetting('enable_threading');

            // Gracefully update settings server side
            UI.rfb.updateConnectionSettings();
--- a/index.html
+++ b/index.html
@ -47,12 +47,9 @@
    <link rel="apple-touch-icon" sizes="120x120" type="image/png" href="app/images/icons/368_kasm_logo_only_120x120.png">
    <link rel="apple-touch-icon" sizes="152x152" type="image/png" href="app/images/icons/368_kasm_logo_only_152x152.png">

-    <script src="vendor/interact.min.js"></script>
+    <link rel="stylesheet" href="app/styles/base.css">

-    <!-- Stylesheets -->
-    <!--link rel="stylesheet" href="app/styles/base.css">
-
-    <script src="app/error-handler.js"></script>
+    <script type="module" src="app/error-handler.js"></script>

    <script>
        let isInsideKasmVDI = false;
@ -63,7 +60,7 @@
        }
    </script>

-    <script type="module" crossorigin="use-credentials" src="app/ui.js"></script-->
+    <script type="module" crossorigin="use-credentials" src="app/ui.js"></script>
 </head>

 <body>
@ -275,6 +272,13 @@
                                        <span class="slider-label">Enable Performance Stats</span>
                                    </label>
                                </li>
+                                <li>
+                                    <label class="switch">
+                                        <input id="noVNC_setting_enable_threading" type="checkbox" /> 
+                                        <span class="slider round"></span>
+                                        <span class="slider-label">Enable Threaded Decoding</span>
+                                    </label>
+                                </li>
                                <li>
                                    <label class="switch">
                                        <input type="checkbox" id="noVNC_setting_pointer_lock" /> 
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -21,9 +21,10 @@
  "scripts": {
    "lint": "eslint app core po/po2js po/xgettext-html tests utils",
    "test": "karma start karma.conf.js",
-    "prepublish": "node ./utils/use_require.js --as commonjs --clean",
-    "build": "webpack --config webpack.config.js",
-    "build-production": "cross-env NODE_ENV=production webpack --config webpack.config.js"
+    "prepublish": "node ./utils/use_require.js --clean",
+    "serve": "vite",
+    "build": "vite build && mkdir -p dist/app dist/core/decoders/qoi && cp -a app/locale dist/app && cp package.json dist/ && cp core/decoders/qoi/qoi_viewer_bg.wasm dist/core/decoders/qoi && cp dist/index.html dist/vnc.html",
+    "preview": "vite preview"
  },
  "repository": {
    "type": "git",
@ -43,23 +44,23 @@
    "@babel/plugin-transform-modules-commonjs": "*",
    "@babel/preset-env": "*",
    "@chiragrupani/karma-chromium-edge-launcher": "*",
+    "@interactjs/actions": "^1.10.27",
+    "@interactjs/interact": "^1.10.27",
+    "@interactjs/pointer-events": "^1.10.27",
+    "@originjs/vite-plugin-commonjs": "^1.0.3",
    "babel-loader": "^8.2.2",
    "babel-plugin-import-redirect": "*",
    "babelify": "*",
    "browserify": "*",
    "chai": "*",
-    "clean-webpack-plugin": "^3.0.0",
    "commander": "*",
-    "core-js": "^3.18.3",
+    "core-js": "3.18.3",
    "css-loader": "^5.0.1",
-    "css-minimizer-webpack-plugin": "^1.1.5",
    "es-module-loader": "*",
    "eslint": "*",
    "file-loader": "^6.2.0",
    "fs-extra": "*",
    "html-loader": "^1.3.2",
-    "html-webpack-inline-svg-plugin": "^2.3.0",
-    "html-webpack-plugin": "^4.5.0",
    "jsdom": "*",
    "karma": "*",
    "karma-chrome-launcher": "*",
@ -73,9 +74,9 @@
    "mini-css-extract-plugin": "^1.3.3",
    "mocha": "*",
    "node-getopt": "*",
+    "pako": "^2.1.0",
    "po2json": "*",
    "postcss-loader": "^4.1.0",
-    "preload-webpack-plugin": "^3.0.0-beta.4",
    "regenerator-runtime": "^0.13.9",
    "requirejs": "*",
    "rollup": "*",
@ -84,9 +85,10 @@
    "sass-loader": "^10.1.0",
    "sinon": "*",
    "sinon-chai": "^2.8.0",
-    "svg-sprite-html-webpack": "^2.3.0",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.2.3"
+    "vite": "^6.0.5",
+    "vite-plugin-env-compatible": "^2.0.1",
+    "vite-plugin-minify": "^2.1.0",
+    "vite-plugin-restart": "^0.4.2"
  },
  "keywords": [
    "vnc",
--- a/utils/use_require.js
+++ b/utils/use_require.js
@ -1,7 +1,7 @@
 #!/usr/bin/env node

 const path = require('path');
-const program = require('commander');
+const { program } = require('commander');
 const fs = require('fs');
 const fse = require('fs-extra');
 const babel = require('@babel/core');
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,30 @@
+import { defineConfig } from 'vite';
+import envCompatible from 'vite-plugin-env-compatible';
+import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
+import { ViteMinifyPlugin } from 'vite-plugin-minify';
+import ViteRestart from 'vite-plugin-restart'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '',
+  server: {
+    host: '0.0.0.0'
+  },
+  plugins: [
+    viteCommonjs(),
+    envCompatible(),
+    ViteMinifyPlugin(),
+    ViteRestart({restart: ['core/**', 'app/**','kasmvnc-version.txt']}),
+  ],
+  build: {
+    rollupOptions: {
+      input: {
+        main: './index.html',
+        screen: './screen.html',
+      },
+      output: {
+        entryFileNames: '[name].bundle.js'
+      }
+    }
+  },
+})