@botfabrik/engine-webclient 4.109.11 → 4.109.12-alpha.0

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-C02CnGO5.js"></script>
+    <script type="module" crossorigin src="./assets/index-DfW2mfd6.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-BKtBdibb.css">
   </head>
 

package/dist/index.js

@@ -1,6 +1,8 @@
 import { Actions, ActionTypes, BotUser, TextMessage, } from '@botfabrik/engine-domain';
 import { getPdf } from '@botfabrik/engine-transcript-export';
-import { static as serveStatic } from 'express';
+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 { setUpSamlAuth, storeLoginRequestToken, verifyLoginToken, } from './auth/index.js';
@@ -21,8 +23,95 @@ const __filename = fileURLToPath(import.meta.url);
 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],
+                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' },
+        // 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();
+    });
     // serve transcript pdf
-    bot.webserver.express.use('/transcript-pdf/:sessionId', async (req, res) => {
+    router.use('/transcript-pdf/:sessionId', async (req, res) => {
         const sessionId = req.params['sessionId'];
         if (sessionId?.length) {
             const session = await bot.createSession(sessionId);
@@ -36,7 +125,7 @@ export default (clientName, environment, props) => async (bot) => {
         }
     });
     // serve embed resources
-    bot.webserver.express.get(`/${clientName}/embed`, (req, res) => {
+    router.get('/embed', (req, res) => {
         const server = `${bot.webserver.baseUrl}/${clientName}`;
         const serverUrl = new URL(server);
         // Pass all query parameters to the chatbot URL
@@ -53,7 +142,7 @@ export default (clientName, environment, props) => async (bot) => {
         res.end();
     });
     if (fabVisibilityIsConditional(props)) {
-        bot.webserver.express.get(`/${clientName}/embed/bundle.js`, (req, res) => {
+        router.get('/embed/bundle.js', (req, res) => {
             const caller = req.query['caller'];
             const referer = req.get('referer')?.toLowerCase();
             const visibleUrls = Array.isArray(props.fabVisible)
@@ -72,18 +161,20 @@ export default (clientName, environment, props) => async (bot) => {
             }
         });
     }
-    bot.webserver.express.use(`/${clientName}/embed`, serveStatic(__dirname + '/embed', serveStaticOptions));
-    bot.webserver.express.get(`/${clientName}/logo.svg`, (_req, res) => {
+    router.use('/embed', serveStatic(__dirname + '/embed', serveStaticOptions));
+    router.get('/logo.svg', (_req, res) => {
         res.redirect(`/cms/chatbot/design/logo.svg?client=${clientName}`);
     });
-    bot.webserver.express.get(`/${clientName}/bot.svg`, (_req, res) => {
+    router.get('/bot.svg', (_req, res) => {
         res.redirect(`/cms/chatbot/design/bot.svg?client=${clientName}`);
     });
-    bot.webserver.express.get(`/${clientName}/fab.svg`, (_req, res) => {
+    router.get('/fab.svg', (_req, res) => {
         res.redirect(`/cms/chatbot/design/fab.svg?client=${clientName}`);
     });
     // serve chat client resources
-    bot.webserver.express.use(`/${clientName}`, serveStatic(__dirname + '/client', serveStaticOptions));
+    router.use(serveStatic(__dirname + '/client', serveStaticOptions));
+    // 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`);
     nsp.on('connection', async (socket) => {
@@ -222,6 +313,7 @@ const sendConfigurationToClient = (socket, props, bot, clientName) => {
         enableSpeechSupport: !!props.speech,
         commands: props.commands || [],
         menuItems: props.menuItems || [],
+        allowedOrigins: props.allowedOrigins,
     };
     socket.emit('set-settings', settings);
     if (props.expandChatWindowAtStart &&

package/dist/types.d.ts

@@ -183,6 +183,35 @@ export interface WebClientProps {
      * @default []
      */
     menuItems?: MenuItem[];
+    /**
+     * List of allowed origins for CORS and CSP `frame-ancestors`.
+     *
+     * Controls **who may use the webclient**:
+     * - embed the chatbot in an iframe (`frame-ancestors` directive of the Content Security Policy)
+     * - make cross-origin requests to webclient endpoints (CORS `Access-Control-Allow-Origin`)
+     *
+     * - **Not set (default):** all origins are allowed – backward-compatible behaviour.
+     * - **Set to an array:** only the listed origins are permitted; all others are blocked.
+     *   An empty array `[]` blocks all cross-origin access.
+     *
+     * @default undefined (all origins allowed)
+     */
+    allowedOrigins?: string[];
+    /**
+     * List of trusted origins the webclient itself may load resources from.
+     *
+     * Controls **what external sources the webclient (iframe) may use**, e.g.:
+     * - fonts (`font-src`), e.g. `https://fonts.gstatic.com` for Google Fonts
+     * - images (`img-src`)
+     *
+     * Typical entries: `https://fonts.googleapis.com`, `https://fonts.gstatic.com`
+     *
+     * - **Not set (default):** all origins are trusted – backward-compatible behaviour.
+     * - **Set to an array:** only the listed origins are permitted as resource sources.
+     *
+     * @default undefined (all origins trusted)
+     */
+    trustedResourceOrigins?: string[];
 }
 export declare enum Devices {
     All = "all",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botfabrik/engine-webclient",
-  "version": "4.109.11",
+  "version": "4.109.12-alpha.0",
   "description": "Webclient for Botfabriks Bot Engine",
   "type": "module",
   "main": "./dist/index.js",
@@ -36,8 +36,11 @@
     "@botfabrik/engine-utils": "^4.109.11",
     "@google-cloud/speech": "^7.3.0",
     "@node-saml/passport-saml": "^5.1.0",
+    "@types/cors": "^2.8.19",
+    "cors": "^2.8.6",
     "express": "^5.2.1",
     "flat": "^6.0.1",
+    "helmet": "^8.1.0",
     "jose": "^6.1.3",
     "passport": "^0.7.0"
   },
@@ -50,5 +53,5 @@
     "tsx": "^4.21.0",
     "typescript": "5.9.3"
   },
-  "gitHead": "9d3e23c943a11b20144356d3ab9d0a3270fc3e6e"
+  "gitHead": "49afbc154f2bdd31c5cb2a8c9c6d605959f538bf"
 }