Fix dev ws proxy

api/src/reportcreator_api/pentests/consumers.py

@@ -229,6 +229,12 @@ class NotesConsumerBase(WebsocketConsumerBase):
         note, key = self.get_note_for_update(path=content.get('path'), valid_paths=['title', 'text'])
         if not note:
             return None
+        
+        version = content['version']
+        # TODO: reject updates for versions that are too old
+        # * check if version is too old and if there are updates in between
+        # * simple timestamp comparison is not enough, because when there were no updates in between, the version is still valid
+        # * checking version < note.version is not enough, because of concurrent updates (e.g. old version, update1 succeeds, update2 fails because of updated version)
 
         # Rebase updates
         over_updates = CollabEvent.objects \

dev/docker-compose.yml

@@ -145,8 +145,8 @@ services:
         condition: service_healthy
       languagetool:
         condition: service_started
-      redis:
-        condition: service_started
+      # redis:
+      #   condition: service_started
       # rendering-worker:
       #   condition: service_started
   frontend:

frontend/nuxt.config.ts

@@ -1,3 +1,5 @@
+import { createProxyServer } from "httpxy"
+
 const isDev = process.env.NODE_ENV === 'development';
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
@@ -76,28 +78,11 @@ export default defineNuxtConfig({
           target: 'http://api:8000',
           changeOrigin: false,
         },
-        // '/ws': {
-        //   // TODO: proxy does not forward WebSocket requests to target
-        //   target: 'ws://api:8000',
-        //   changeOrigin: true,
-        //   ws: true,
-        //   secure: false,
-        //   configure: (proxy, _options) => {
-        //     console.log('Configuring WebSocket Proxy');
-        //     proxy.on('error', (err, _req, _res) => {
-        //       console.log('proxy error', err);
-        //     });
-        //     proxy.on('proxyReq', (proxyReq, req, _res) => {
-        //       console.log('Sending Request to the Target:', req.method, req.url);
-        //     });
-        //     proxy.on('proxyRes', (proxyRes, req, _res) => {
-        //       console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
-        //     });
-        //     proxy.on('proxyReqWs', (proxyReq, req, socket, options, head) => {
-        //       console.log('Sending WebSocket Request to the Target:', req.url);
-        //     });
-        //   },
-        // },
+        '/ws': {
+          target: 'ws://api:8000',
+          changeOrigin: false,
+          ws: true,
+        },
 
         '/admin': 'http://api:8000',
         '/static': {
@@ -111,5 +96,18 @@ export default defineNuxtConfig({
       }
     },
   },
+  hooks: {
+    // Websocket proxy workaround: https://github.com/nuxt/cli/issues/107#issuecomment-1850751905
+    listen(server) {
+      const proxy = createProxyServer({ target: { host: "api", port: 8000 }, ws: true })
+
+      server.on("upgrade", (req, socket, head) => {
+        if (req.url!.startsWith('/ws')) {
+          // @ts-ignore
+          proxy.ws(req, socket, head);
+        }
+      })
+    },
+  },
 
 });

frontend/src/components/Design/designer-components.ts

@@ -441,7 +441,7 @@ export class ChartComponent extends DesignerComponentBase {
 
   createCode(form: any, context: DesignerContext) {
     const id = createUniqueId(kebabCase(form.chart.caption || 'chart'), context);
-    if (form.chart.chartType == "bar (vertical)") {
+    if (form.chart.chartType === "bar (vertical)") {
       return {
         html: trimLeadingWhitespace(`
         <figure>
@@ -534,7 +534,7 @@ export class ChartComponent extends DesignerComponentBase {
           <figcaption id="${id}">${form.chart.caption}</figcaption>
         </figure>`)
       };
-    } else if (form.chart.chartType == "pie") {
+    } else if (form.chart.chartType === "pie") {
       return {
         html: trimLeadingWhitespace(`
         <figure>
@@ -608,7 +608,7 @@ export class ChartComponent extends DesignerComponentBase {
           <figcaption id="${id}">${form.chart.caption}</figcaption>
         </figure>`)
       };
-    } else if (form.chart.chartType == "doughnut") {
+    } else if (form.chart.chartType === "doughnut") {
       return {
         html: trimLeadingWhitespace(`
         <figure>
@@ -682,7 +682,7 @@ export class ChartComponent extends DesignerComponentBase {
           <figcaption id="${id}">${form.chart.caption}</figcaption>
         </figure>`)
       };
-    } else if (form.chart.chartType == "polarArea") {
+    } else if (form.chart.chartType === "polarArea") {
       return {
         html: trimLeadingWhitespace(`
         <figure>
@@ -759,7 +759,7 @@ export class ChartComponent extends DesignerComponentBase {
           <figcaption id="${id}">${form.chart.caption}</figcaption>
         </figure>`)
       };
-    } else if (form.chart.chartType == "radar") {
+    } else if (form.chart.chartType === "radar") {
       return {
         html: trimLeadingWhitespace(`
         <figure>
@@ -825,7 +825,7 @@ export class ChartComponent extends DesignerComponentBase {
         <figure>
           <chart :width="15" :height="10" :config="{
               plugins: [ chartjsPlugins.DataLabels ],
-              type: '${(form.chart.chartType == "line") ? "line" : "bar"}', 
+              type: '${(form.chart.chartType === "line") ? "line" : "bar"}', 
               data: {
                   labels: ['Critical', 'High', 'Medium', 'Low', 'Info'],
                   datasets: [

frontend/src/utils/collab.ts

@@ -56,9 +56,7 @@ export function useCollab(storeState: CollabStoreState<any>) {
       return;
     }
   
-    const serverUrl = import.meta.env.DEV ? 
-      'ws://localhost:8000' : 
-      `${window.location.protocol === 'https' ? 'wss' : 'ws'}://${window.location.host}/`;
+    const serverUrl = `${window.location.protocol === 'https' ? 'wss' : 'ws'}://${window.location.host}/`;
     const wsUrl = urlJoin(serverUrl, storeState.websocketPath);
     storeState.perPathState.clear();
     storeState.connectionState = CollabConnectionState.CONNECTING;