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

* KASM-6894 Remove Webpack to reduce vulnerabilities, update packages

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);
+                    let newdisplay = window.open(new_display_url, '_blank', options);
-                    return
+                    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();

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

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",
+    "prepublish": "node ./utils/use_require.js --clean",
-    "build": "webpack --config webpack.config.js",
+    "serve": "vite",
-    "build-production": "cross-env NODE_ENV=production webpack --config webpack.config.js"
+    "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",
+    "vite": "^6.0.5",
-    "webpack": "^4.29.6",
+    "vite-plugin-env-compatible": "^2.0.1",
-    "webpack-cli": "^3.2.3"
+    "vite-plugin-minify": "^2.1.0",
+    "vite-plugin-restart": "^0.4.2"
   },
   "keywords": [
     "vnc",

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');

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'
+      }
+    }
+  },
+})