set cookies properties and CSP settings to enable emedding

enrico-kaack-comp · enrico-kaack-comp · commit 18b8c34e77e3 · 2025-07-09T16:09:06.000+02:00
diff --git a/.env.template b/.env.template
@@ -20,3 +20,6 @@ SESSION_SECRET=
 
 FEEDBACK_SLACK_URL=
 FEEDBACK_URL_LINK=
+
+# frame-ancestors attribute of CSP. Separate multiple values with a space
+FRAME_ANCHESTORS=
diff --git a/index.html b/index.html
@@ -8,13 +8,9 @@
   <title>MCP</title>
 </head>
 
-<script>
-  window.global ||= window;
-</script>
-
 <body>
   <div id="root"></div>
   <script type="module" src="/src/mount.ts"></script>
 </body>
 
-</html>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "npm": "^11.0.0"
   },
   "scripts": {
-    "dev": "node server.js --dev",
+    "dev": "node server.js --local-dev",
     "start": "node server.js",
     "build": "tsc && vite build",
     "lint": "eslint ./src --report-unused-disable-directives --max-warnings 0",
@@ -23,9 +23,10 @@
     "@fastify/autoload": "^6.3.0",
     "@fastify/cookie": "^11.0.2",
     "@fastify/env": "^5.0.2",
+    "@fastify/helmet": "^13.0.1",
     "@fastify/http-proxy": "^11.1.2",
-    "@fastify/sensible": "^6.0.3",
     "@fastify/secure-session": "^8.2.0",
+    "@fastify/sensible": "^6.0.3",
     "@fastify/session": "^11.1.0",
     "@fastify/static": "^8.1.1",
     "@fastify/vite": "^8.1.3",
diff --git a/server.js b/server.js
@@ -1,18 +1,20 @@
 import Fastify from 'fastify';
 import FastifyVite from '@fastify/vite';
+import helmet from '@fastify/helmet';
 import { fileURLToPath } from 'node:url';
 import path from 'node:path';
 import dotenv from 'dotenv';
 import proxy from './server/app.js';
+import envPlugin from "./server/config/env.js";
 import { copyFileSync } from 'node:fs';
 
 dotenv.config();
 
-const isDev = process.argv.includes('--dev');
+const isLocalDev = process.argv.includes('--local-dev');
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const frontendConfigLocation = isDev
+const frontendConfigLocation = isLocalDev
   ? 'public/frontend-config.json'
   : 'dist/client/frontend-config.json';
 
@@ -33,13 +35,28 @@ const fastify = Fastify({
   logger: true,
 });
 
+await fastify.register(envPlugin);
+
+fastify.register(
+  helmet,
+  {
+    contentSecurityPolicy: {
+      directives: {
+        "connect-src": ["'self'", "sdk.openui5.org"],
+        "script-src": isLocalDev ? ["'self'", "'unsafe-inline'"] : ["'self'"],
+        "frame-ancestors": [fastify.config.FRAME_ANCHESTORS]
+      },
+    }
+  }
+)
+
 fastify.register(proxy, {
   prefix: '/api',
 });
 
 await fastify.register(FastifyVite, {
   root: __dirname,
-  dev: isDev,
+  dev: isLocalDev,
   spa: true,
 });
 
diff --git a/server/app.js b/server/app.js
@@ -1,7 +1,6 @@
 import path, { join, dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 import AutoLoad from "@fastify/autoload";
-import envPlugin from "./config/env.js";
 import encryptedSession from "./encrypted-session.js";
 
 export const options = {};
@@ -10,7 +9,6 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 export default async function (fastify, opts) {
-  await fastify.register(envPlugin);
   fastify.register(encryptedSession, {
     ...opts,
   });
diff --git a/server/config/env.js b/server/config/env.js
@@ -13,6 +13,7 @@ const schema = {
     'COOKIE_SECRET',
     'SESSION_SECRET',
     'API_BACKEND_URL',
+    'FRAME_ANCHESTORS',
   ],
   properties: {
     // Application variables (.env)
@@ -27,6 +28,7 @@ const schema = {
     API_BACKEND_URL: { type: 'string' },
     FEEDBACK_SLACK_URL: { type: 'string' },
     FEEDBACK_URL_LINK: { type: 'string' },
+    FRAME_ANCHESTORS: { type: 'string' },
 
     // System variables
     NODE_ENV: { type: 'string', enum: ['development', 'production'] },
diff --git a/server/encrypted-session.js b/server/encrypted-session.js
@@ -21,7 +21,7 @@ export const ENCRYPTED_COOKIE_KEY_ENCRYPTION_KEY = "encryptionKey";
 export const SESSION_COOKIE_NAME = "session-cookie";
 
 async function encryptedSession(fastify) {
-  const { COOKIE_SECRET, SESSION_SECRET, NODE_ENV } = fastify.config;
+  const { COOKIE_SECRET, SESSION_SECRET } = fastify.config;
 
   await fastify.register(fastifyCookie);
 
@@ -32,8 +32,9 @@ async function encryptedSession(fastify) {
     cookie: {
       path: "/",
       httpOnly: true,
-      sameSite: "lax",
-      secure: NODE_ENV === "production",
+      sameSite: "None", // cross-site cookies are needed for the session to work when embedded. By setting CORS to None and CSP.frame-anchestors we restrict the api calls from the browser that contain the cookies to originating from our site only.
+      partioned: true, // use for modern isolation of third party cookies when embedded, every embedded iframe (or not embedded) gets its own cookie partition
+      secure: true,
       maxAge: 60 * 60 * 24 * 7, // 7 days
     },
   });
@@ -44,8 +45,9 @@ async function encryptedSession(fastify) {
     cookie: {
       path: "/",
       httpOnly: true,
-      sameSite: "lax",
-      secure: NODE_ENV === "production",
+      sameSite: "None", // see secureSession cookie for explanation
+      partioned: true, // see secureSession cookie for explanation
+      secure: true,
       maxAge: 60 * 60 * 24 * 7, // 7 days
     },
   });
