@botfabrik/engine-webclient 4.109.12-alpha.2 → 4.109.12-alpha.4

package/dist/client/index.html

@@ -13,7 +13,7 @@
     <meta name="theme-color" content="#000000" />
     <meta name="google" content="notranslate" />
     <title>Bubble Chat Client</title>
-    <script type="module" crossorigin src="./assets/index-DfW2mfd6.js"></script>
+    <script type="module" crossorigin src="./assets/index-DHHRN8Yr.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-BKtBdibb.css">
   </head>
 

package/dist/index.js

@@ -1,10 +1,10 @@
 import { Actions, ActionTypes, BotUser, TextMessage, } from '@botfabrik/engine-domain';
 import { getPdf } from '@botfabrik/engine-transcript-export';
-import cors from 'cors';
 import { Router, static as serveStatic, } from 'express';
-import helmet from 'helmet';
 import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { Server as SocketIOServer } from 'socket.io';
+import { applySecurityMiddleware } from './applySecurityMiddleware.js';
 import { setUpSamlAuth, storeLoginRequestToken, verifyLoginToken, } from './auth/index.js';
 import { CLIENT_TYPE } from './constants.js';
 import createSessionInfo from './createSessionInfo.js';
@@ -24,100 +24,7 @@ const __dirname = dirname(__filename);
 export default (clientName, environment, props) => async (bot) => {
     const logger = bot.logger.child({ clientType: CLIENT_TYPE, clientName });
     const router = Router();
-    // Security: CORS
-    // When allowedOrigins is undefined, all origins are permitted (backward-compatible default).
-    // When it is set (even to an empty array), only the listed origins are allowed.
-    const allowedOrigins = props.allowedOrigins;
-    // When trustedResourceOrigins is undefined, the webclient may load resources from all origins.
-    // When it is set, only those origins are trusted as resource sources (font-src, img-src, …).
-    const trustedResourceOrigins = props.trustedResourceOrigins;
-    router.use(cors({
-        // Access-Control-Allow-Origin
-        origin: allowedOrigins === undefined
-            ? true // all origins allowed
-            : (origin, callback) => {
-                if (!origin || allowedOrigins.includes(origin)) {
-                    callback(null, true);
-                }
-                else {
-                    callback(new Error(`CORS: Origin '${origin}' is not allowed`));
-                }
-            },
-        // Access-Control-Allow-Methods
-        methods: ['GET', 'POST', 'OPTIONS'],
-        // Access-Control-Allow-Headers
-        allowedHeaders: ['Content-Type', 'Authorization'],
-        credentials: true,
-    }));
-    // Security: Helmet (CSP + security headers)
-    router.use(helmet({
-        contentSecurityPolicy: {
-            directives: {
-                defaultSrc: ["'self'"],
-                scriptSrc: ["'self'"],
-                styleSrc: ["'self'", "'unsafe-inline'"],
-                // images: restrict to trusted resource origins when defined, otherwise allow all HTTPS
-                imgSrc: trustedResourceOrigins === undefined
-                    ? ["'self'", 'data:', 'https:']
-                    : ["'self'", 'data:', ...trustedResourceOrigins],
-                connectSrc: [
-                    "'self'",
-                    // allow websocket connections back to the same server
-                    bot.webserver.baseUrl.replace(/^http/, 'ws'),
-                    bot.webserver.baseUrl.replace(/^http/, 'wss'),
-                ],
-                // fonts may be loaded from trusted resource origins (e.g. Google Fonts);
-                // when no trustedResourceOrigins are configured, allow fonts from all origins
-                fontSrc: trustedResourceOrigins === undefined
-                    ? ['*']
-                    : ["'self'", ...trustedResourceOrigins],
-                // when no allowedOrigins are configured, allow framing from all origins
-                frameAncestors: allowedOrigins === undefined
-                    ? ['*']
-                    : ["'self'", ...allowedOrigins],
-                // frame-src controls what this page may embed in an iframe.
-                // The /embed page loads the chatbot in an iframe on the same server ('self').
-                // When allowedOrigins are set, those must also be allowed (e.g. standalone view).
-                frameSrc: ["'self'", ...(allowedOrigins ?? [])],
-                objectSrc: ["'none'"], // disable Flash/plugins
-                baseUri: ["'self'"], // prevent <base>-tag injection
-                // When SAML auth is configured, the browser POSTs a form to the external IdP.
-                // The IdP URL must therefore be explicitly allowed alongside 'self'.
-                formAction: props.auth?.saml.entryPoint
-                    ? ["'self'", props.auth.saml.entryPoint]
-                    : ["'self'"],
-                // upgrade-insecure-requests is intentionally omitted:
-                // the webclient is embedded via iframe on external pages which may themselves be HTTP,
-                // and the directive would also affect those sub-resource loads in some browsers.
-            },
-        },
-        // Disable X-Frame-Options: we control framing exclusively via CSP frame-ancestors above.
-        // X-Frame-Options: SAMEORIGIN (helmet default) would block cross-origin iframe embedding.
-        frameguard: false,
-        // Send origin only, without path – sufficient for analytics while avoiding leaking URLs
-        referrerPolicy: { policy: 'strict-origin-when-cross-origin' },
-        // Disable HSTS: HTTPS enforcement is already handled globally in engine-core.
-        // Enabling it here would cause the browser to enforce HTTPS for the entire origin,
-        // which breaks local development (http://localhost:3000).
-        hsts: false,
-        // resources served by the webclient must be loadable cross-origin (e.g. embed script)
-        crossOriginResourcePolicy: { policy: 'cross-origin' },
-    }));
-    // Permissions-Policy: restrict browser feature access to the minimum required.
-    // Microphone is only permitted when speech-to-text is configured.
-    router.use((_req, res, next) => {
-        const microphonePolicy = props.speech
-            ? 'microphone=(self)'
-            : 'microphone=()';
-        res.setHeader('Permissions-Policy', [
-            microphonePolicy,
-            'camera=()',
-            'geolocation=()',
-            'payment=()',
-            'usb=()',
-        ].join(', '));
-        next();
-    });
+    applySecurityMiddleware(router, props, bot.webserver.baseUrl);
     // serve transcript pdf
     router.use('/transcript-pdf/:sessionId', async (req, res) => {
         const sessionId = req.params['sessionId'];
@@ -184,7 +91,26 @@ export default (clientName, environment, props) => async (bot) => {
     // mount router on the main app
     bot.webserver.express.use(`/${clientName}`, router);
     logger.info(`Webclient will be available on route: /${clientName}`);
-    const nsp = bot.webserver.socket.of(`/${clientName}/chat`);
+    // Each webclient gets its own Socket.IO server with a dedicated transport
+    // path: /website-messenger/{clientName}/socket.io
+    //
+    // destroyUpgrade: false is required when multiple SocketIOServer instances
+    // share the same httpServer. By default engine.io destroys any WebSocket
+    // upgrade whose URL doesn't match after 1 second – with multiple instances
+    // that would kill the connections of all other instances.
+    // With destroyUpgrade: false each instance simply ignores upgrades that
+    // don't belong to it, and the matching instance handles them.
+    //
+    // No CORS configuration needed: the Socket.IO connection is always initiated
+    // from the chatbot page, which is served from the same origin as the server.
+    const io = new SocketIOServer(bot.webserver.httpServer, {
+        path: `/website-messenger/${clientName}/socket.io`,
+        destroyUpgrade: false,
+        ...(isLocalhost(bot.webserver.baseUrl)
+            ? { cors: { origin: 'http://localhost:3001' } } // allow CORS for local development
+            : {}),
+    });
+    const nsp = io.of('/');
     nsp.on('connection', async (socket) => {
         try {
             sendConfigurationToClient(socket, props, bot, clientName);
@@ -332,3 +258,4 @@ const sendConfigurationToClient = (socket, props, bot, clientName) => {
         });
     }
 };
+const isLocalhost = (baseUrl) => baseUrl === 'http://localhost:3000';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botfabrik/engine-webclient",
-  "version": "4.109.12-alpha.2",
+  "version": "4.109.12-alpha.4",
   "description": "Webclient for Botfabriks Bot Engine",
   "type": "module",
   "main": "./dist/index.js",
@@ -31,9 +31,9 @@
     "dev:embed": "tsx --watch ./run-embed-local.ts"
   },
   "dependencies": {
-    "@botfabrik/engine-domain": "^4.109.11",
-    "@botfabrik/engine-transcript-export": "^4.109.11",
-    "@botfabrik/engine-utils": "^4.109.11",
+    "@botfabrik/engine-domain": "^4.109.12-alpha.4",
+    "@botfabrik/engine-transcript-export": "^4.109.12-alpha.4",
+    "@botfabrik/engine-utils": "^4.109.12-alpha.4",
     "@google-cloud/speech": "^7.3.0",
     "@node-saml/passport-saml": "^5.1.0",
     "@types/cors": "^2.8.19",
@@ -42,16 +42,18 @@
     "flat": "^6.0.1",
     "helmet": "^8.1.0",
     "jose": "^6.1.3",
-    "passport": "^0.7.0"
+    "passport": "^0.7.0",
+    "socket.io": "^4.8.3"
   },
   "devDependencies": {
     "@types/express": "^5.0.6",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/serve-static": "^2.2.0",
+    "@types/supertest": "^7.2.0",
     "@types/ua-parser-js": "^0.7.39",
-    "socket.io": "^4.8.3",
+    "supertest": "^7.2.2",
     "tsx": "^4.21.0",
     "typescript": "5.9.3"
   },
-  "gitHead": "0706d247f9232a5a70742a082e0f3177ed182609"
+  "gitHead": "0823e487c73ce26568e77cf598e83866f469360a"
 }