From db6270438fb69d8af00d0c06095e3d855ced4e7b Mon Sep 17 00:00:00 2001
From: Richard Bergsma <richard@365devnet.eu>
Date: Thu, 6 Nov 2025 12:54:47 +0100
Subject: [PATCH] Enhance development and production scripts in package.json
 and update README for CSP testing

- Added new npm scripts for production testing with Content Security Policy: `dev:prod` and `preview:prod`.
- Updated README.md to include detailed instructions for development, production testing, and a pre-deployment checklist to ensure security settings are verified before deployment.
---
 CSP-TEST-RESULTS.md | 233 ++++++++++++++++++++++++++++++++++++++++++++
 README.md           |  73 +++++++++++++-
 TESTING.md          | 132 +++++++++++++++++++++++++
 package.json        |   2 +
 server.js           |  11 ++-
 5 files changed, 449 insertions(+), 2 deletions(-)
 create mode 100644 CSP-TEST-RESULTS.md
 create mode 100644 TESTING.md

diff --git a/CSP-TEST-RESULTS.md b/CSP-TEST-RESULTS.md
new file mode 100644
index 0000000..eac1c73
--- /dev/null
+++ b/CSP-TEST-RESULTS.md
@@ -0,0 +1,233 @@
+
+# 🛡️ CSP Testing Results - Pre-Deployment Verification
+
+## Test Date: Thursday, November 6, 2025
+
+### ✅ CSP Header Verification
+
+**Status:** CSP is properly configured and active
+
+**Current CSP Policy:**
+```
+Content-Security-Policy: 
+  default-src 'self' https://365devnet.eu https://*.365devnet.eu; 
+  script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://chat.365devnet.eu; 
+  style-src 'self' 'unsafe-inline'; 
+  img-src 'self' data: https: blob:; 
+  font-src 'self' data:; 
+  connect-src 'self' https://365devnet.eu https://*.365devnet.eu https://chat.365devnet.eu https://git.365devnet.eu wss://chat.365devnet.eu; 
+  frame-src 'self' https://chat.365devnet.eu; 
+  frame-ancestors 'none'; 
+  base-uri 'self'; 
+  form-action 'self'
+```
+
+### 🔍 External Resource Audit
+
+All external domains have been identified and added to CSP:
+
+| Resource | Domain | CSP Directive | Status |
+|----------|--------|---------------|--------|
+| Latest Commits | `https://git.365devnet.eu` | `connect-src` | ✅ Added |
+| RocketChat Widget | `https://chat.365devnet.eu` | `script-src`, `connect-src`, `frame-src` | ✅ Included |
+| RocketChat WebSocket | `wss://chat.365devnet.eu` | `connect-src` | ✅ Included |
+| Images (any HTTPS) | `https:` | `img-src` | ✅ Wildcard |
+| Internal APIs | `https://*.365devnet.eu` | `connect-src` | ✅ Wildcard |
+| Uptime Kuma | Server-side only | N/A | ✅ No CSP needed |
+
+### 📊 Client-Side vs Server-Side Calls
+
+**Client-side calls (affected by CSP):**
+- `/api/commits` → Internal (OK)
+- `/api/contact` → Internal (OK)
+- `/api/uptime` → Internal (OK)
+- RocketChat widget → `chat.365devnet.eu` (Added to CSP)
+
+**Server-side calls (NOT affected by CSP):**
+- API routes fetch from `git.365devnet.eu` ✅
+- API routes fetch from `UPTIME_KUMA_URL` ✅
+
+### 🧪 Testing Performed
+
+#### 1. Build Test
+```bash
+npm run build
+```
+**Result:** ✅ Build successful (astro-compress warning is harmless)
+
+#### 2. CSP Enabled Server Test  
+```bash
+ENABLE_SSR_CSP=1 npm run start
+```
+**Result:** ✅ Server started successfully on port 3000
+
+#### 3. CSP Header Present
+```bash
+curl -I http://localhost:3000/en/
+```
+**Result:** ✅ CSP header is present and correctly formatted
+
+### 🎯 Key Fixes Applied
+
+#### Fix #1: Added `git.365devnet.eu` to `connect-src`
+**Problem:** Latest Commits widget was calling Gitea API but domain wasn't in CSP  
+**Solution:** Added `https://git.365devnet.eu` to `connect-src`
+
+#### Fix #2: Made `img-src` more permissive
+**Problem:** Too restrictive, only allowed specific domains  
+**Solution:** Changed to `https:` to allow all HTTPS images
+
+#### Fix #3: Added wildcard subdomain support
+**Problem:** Only specific subdomains were allowed  
+**Solution:** Added `https://*.365devnet.eu` to `connect-src`
+
+#### Fix #4: Kept `'unsafe-inline'` for scripts
+**Problem:** Astro's inline scripts require this directive  
+**Solution:** Included `'unsafe-inline'` in `script-src`
+
+### ⚠️ Manual Testing Required
+
+Before deploying to production, **manually test these features** with CSP enabled:
+
+**Test URL:** http://localhost:3000/en/ (with `npm run dev:prod` or `ENABLE_SSR_CSP=1 npm run start`)
+
+#### Features to Test:
+
+- [ ] **Mobile Menu Toggle**
+  - Open site on mobile (or use browser DevTools responsive mode)
+  - Click hamburger menu icon
+  - Menu should expand/collapse
+  - Check console for CSP violations
+
+- [ ] **Language Selector**
+  - Desktop: Click language dropdown
+  - Select different language
+  - Page should reload with new language
+  - Mobile: Use select dropdown
+
+- [ ] **Theme Switcher**
+  - Click sun/moon icon
+  - Theme should toggle between light/dark
+  - Preference should persist
+
+- [ ] **Contact Form**
+  - Fill out form
+  - Submit
+  - Check for successful submission
+  - Check console for CSP violations
+
+- [ ] **Latest Commits Widget** ← Critical test!
+  - Navigate to `/en/development/`
+  - Widget should load commit history
+  - Check browser console for errors
+  - Verify commits are displayed
+
+- [ ] **RocketChat Widget**
+  - Widget should appear in bottom right
+  - Should be clickable and functional
+  - Check console for CSP violations
+
+- [ ] **Smooth Scrolling**
+  - Click any anchor link (e.g., "Services" in nav)
+  - Page should scroll smoothly
+  - No console errors
+
+- [ ] **Images Loading**
+  - All images should load correctly
+  - Check different pages
+  - No broken images
+
+### 🔧 Debugging Tips
+
+#### If Something Doesn't Work:
+
+1. **Open Browser DevTools** (F12)
+2. **Go to Console tab**
+3. **Look for red CSP violation errors:**
+   ```
+   Refused to load ... because it violates CSP directive...
+   ```
+
+4. **Identify the blocked resource:**
+   - What domain?
+   - What type? (script, style, image, fetch, etc.)
+
+5. **Add to appropriate CSP directive:**
+   - Scripts → `script-src`
+   - API calls → `connect-src`
+   - Images → `img-src`
+   - Styles → `style-src`
+
+6. **Rebuild and test again**
+
+### 📝 Deployment Checklist
+
+Before enabling CSP in production:
+
+- [ ] Run `npm run dev:prod` locally
+- [ ] Complete all manual tests above
+- [ ] Check browser console (no CSP violations)
+- [ ] Test on Chrome, Firefox, and Safari
+- [ ] Test on actual mobile device
+- [ ] Verify Latest Commits widget works
+- [ ] Verify RocketChat widget works
+- [ ] Document any new CSP changes
+
+### 🚀 Deployment Instructions
+
+#### Option 1: Full Test (Recommended)
+```bash
+# Build and test locally with CSP
+npm run dev:prod
+
+# Manual testing...
+
+# If all tests pass, rebuild Docker
+docker-compose up -d --build
+```
+
+#### Option 2: Direct Deploy (Use with caution)
+```bash
+# Make sure ENABLE_SSR_CSP=1 is in docker-compose.yml
+docker-compose up -d --build
+
+# Monitor logs
+docker-compose logs -f web
+
+# Check production site immediately
+# Open browser DevTools and check console
+```
+
+### 📊 Confidence Level
+
+**Current Status:**
+- ✅ CSP policy created and verified
+- ✅ All external domains identified
+- ✅ Server runs with CSP enabled
+- ✅ CSP header present in responses
+- ⚠️ Manual browser testing required
+
+**Confidence for Production:** 85%
+
+**Why not 100%?** Manual browser testing of interactive features (mobile menu, language selector, Latest Commits widget) has not been performed with CSP enabled. This requires opening a browser and testing each feature while monitoring the console for CSP violations.
+
+### 🎯 Recommendation
+
+**Before deploying to production:**
+
+1. Run `npm run dev:prod`
+2. Open http://localhost:3000/en/ in your browser
+3. Open DevTools Console (F12)
+4. Test each interactive feature
+5. Verify NO CSP violation errors appear
+6. **Especially test Latest Commits widget** - this was the main issue!
+
+If all tests pass → **Deploy with confidence!** ✅  
+If CSP violations appear → **Document them and add domains to CSP** 🔧
+
+---
+
+**Test performed by:** AI Assistant  
+**Manual verification required by:** User  
+**Next step:** Manual browser testing with `npm run dev:prod`
+
diff --git a/README.md b/README.md
index 8d56979..0abe894 100644
--- a/README.md
+++ b/README.md
@@ -103,4 +103,75 @@ GITEA_TOKEN=
 
 # AI (optional)
 GEMINI_API_KEY=
-```
\ No newline at end of file
+
+# Security - Content Security Policy
+# Set to 1 to enable CSP (use for production testing)
+# ENABLE_SSR_CSP=1
+```
+
+---
+
+## 🚀 Development & Testing
+
+### Quick Start
+```bash
+# Install dependencies
+npm install
+
+# Start development server (fast, no CSP)
+npm run dev
+
+# Visit http://localhost:4321
+```
+
+### **⚠️ IMPORTANT: Pre-Deployment Testing**
+
+**Always test with production security settings before deploying:**
+
+```bash
+# Test with CSP enabled (matches production)
+npm run dev:prod
+```
+
+This will:
+- Build the production bundle
+- Run with `server.js` (same as Docker)
+- Enable Content Security Policy (`ENABLE_SSR_CSP=1`)
+- Help you catch security/CSP issues before deployment
+
+### Available Commands
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Development server (Astro dev, no CSP) |
+| `npm run dev:prod` | **Production testing with CSP** ⚠️ Use before deploying! |
+| `npm run build` | Build for production |
+| `npm run preview:prod` | Preview built site with CSP enabled |
+| `npm run start` | Start production server |
+| `npm run check` | Run linting & type checking |
+
+### 📋 Pre-Deployment Checklist
+
+See [TESTING.md](./TESTING.md) for the complete testing guide and checklist.
+
+**Quick checks:**
+- [ ] Run `npm run dev:prod` locally
+- [ ] Test mobile menu, language selector, theme switcher
+- [ ] Check browser console for CSP violations
+- [ ] Run `npm run check` for linting errors
+
+---
+
+## 🐳 Docker Deployment
+
+The production environment runs in Docker with CSP enabled:
+
+```bash
+# Build and run with Docker Compose
+docker-compose up -d
+
+# View logs
+docker-compose logs -f web
+```
+
+Environment variables are set in `docker-compose.yml` and `.env`.
\ No newline at end of file
diff --git a/TESTING.md b/TESTING.md
new file mode 100644
index 0000000..ad25dfe
--- /dev/null
+++ b/TESTING.md
@@ -0,0 +1,132 @@
+# Testing & Pre-Deployment Checklist
+
+This document outlines how to test your changes before deploying to production.
+
+## Development Workflow
+
+### 1. **Regular Development** (Fast, no CSP)
+```bash
+npm run dev
+```
+- Uses Astro dev server
+- Hot reload enabled
+- No CSP enforcement
+- Best for rapid development
+
+### 2. **Production-like Testing** (Before Deployment)
+```bash
+npm run dev:prod
+```
+- Builds the production bundle
+- Runs with `server.js` (same as production)
+- **Enables CSP** (`ENABLE_SSR_CSP=1`)
+- Tests all security headers
+- **Use this to catch production issues early!**
+
+### 3. **Quick Production Test** (After Build)
+If you've already built:
+```bash
+npm run preview:prod
+```
+- Skips rebuild
+- Runs existing build with CSP enabled
+- Faster than `dev:prod`
+
+## Pre-Deployment Checklist
+
+Before pushing to production, **always test with CSP enabled**:
+
+- [ ] Run `npm run dev:prod` locally
+- [ ] Test all interactive features:
+  - [ ] Mobile menu toggle
+  - [ ] Language selector
+  - [ ] Theme switcher (dark/light mode)
+  - [ ] Contact form
+  - [ ] Smooth scrolling
+  - [ ] Latest commits widget (if applicable)
+  - [ ] RocketChat widget
+- [ ] Check browser console for CSP violations
+- [ ] Test on multiple browsers (Chrome, Firefox, Safari)
+- [ ] Test on mobile devices
+- [ ] Run `npm run check` (linting & type checking)
+
+## Common CSP Issues
+
+### Symptom: JavaScript not working in production
+**Error in console:** "Refused to execute inline script because it violates CSP directive..."
+
+**Solution:** Check that `'unsafe-inline'` is in the `script-src` directive in `server.js`
+
+### Symptom: External resources blocked
+**Error in console:** "Refused to load... because it violates CSP directive..."
+
+**Solution:** Add the domain to the appropriate CSP directive:
+- Images: Add to `img-src`
+- Scripts: Add to `script-src`
+- Styles: Add to `style-src`
+- API calls: Add to `connect-src`
+
+## Environment Parity
+
+**Development** and **Production** should match as closely as possible:
+
+| Environment | Dev Server | CSP Enabled | Use Case |
+|-------------|-----------|-------------|----------|
+| `npm run dev` | Astro | ❌ No | Fast development |
+| `npm run dev:prod` | Express | ✅ Yes | Pre-deployment testing |
+| Docker (production) | Express | ✅ Yes | Production |
+
+## Docker Testing (Optional)
+
+To test the **exact** Docker environment locally:
+
+```bash
+# Build the Docker image
+docker build -t 365devnet-test .
+
+# Run it locally
+docker run -p 3000:3000 -e ENABLE_SSR_CSP=1 365devnet-test
+
+# Visit http://localhost:3000
+```
+
+## Continuous Integration (CI)
+
+Consider adding these checks to your CI pipeline:
+
+```yaml
+# .github/workflows/test.yml (example)
+- name: Build
+  run: npm run build
+
+- name: Test with CSP
+  run: |
+    ENABLE_SSR_CSP=1 npm run start &
+    sleep 5
+    curl -f http://localhost:3000 || exit 1
+```
+
+## Best Practices
+
+1. **Always test with `dev:prod` before deploying**
+2. Check browser console for errors
+3. Test interactive features manually
+4. Keep development and production environments in sync
+5. Document any CSP changes in `server.js`
+6. Update this checklist as new features are added
+
+## Troubleshooting
+
+**Q: CSP is too restrictive, breaking features**
+**A:** Carefully add specific domains/directives instead of disabling CSP entirely
+
+**Q: Need to temporarily disable CSP for testing**
+**A:** Run without `ENABLE_SSR_CSP=1`: `npm run start`
+
+**Q: CSP works locally but not in Docker**
+**A:** Check `docker-compose.yml` - ensure `ENABLE_SSR_CSP=1` is set
+
+---
+
+**Remember:** Security settings that don't work in production are useless. Test early, test often! 🛡️
+
diff --git a/package.json b/package.json
index 51c3044..811edec 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,10 @@
   },
   "scripts": {
     "dev": "astro dev",
+    "dev:prod": "npm run build && ENABLE_SSR_CSP=1 npm run start",
     "build": "astro build",
     "preview": "astro preview",
+    "preview:prod": "ENABLE_SSR_CSP=1 npm run start",
     "start": "node server.js",
     "astro": "astro",
     "check": "npm run check:astro && npm run check:eslint && npm run check:prettier",
diff --git a/server.js b/server.js
index 143193a..4374cec 100644
--- a/server.js
+++ b/server.js
@@ -25,7 +25,16 @@ app.use((req, res, next) => {
   if (process.env.ENABLE_SSR_CSP === '1') {
     res.setHeader(
       'Content-Security-Policy',
-      "default-src 'self' https://365devnet.eu https://*.365devnet.eu; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' 'nonce-astro' https://chat.365devnet.eu; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://cdn.pixabay.com https://raw.githubusercontent.com; font-src 'self' data:; connect-src 'self' https://365devnet.eu https://chat.365devnet.eu wss://chat.365devnet.eu; frame-src https://chat.365devnet.eu; frame-ancestors 'none'; base-uri 'self'; form-action 'self'"
+      "default-src 'self' https://365devnet.eu https://*.365devnet.eu; " +
+      "script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://chat.365devnet.eu; " +
+      "style-src 'self' 'unsafe-inline'; " +
+      "img-src 'self' data: https: blob:; " +
+      "font-src 'self' data:; " +
+      "connect-src 'self' https://365devnet.eu https://*.365devnet.eu https://chat.365devnet.eu https://git.365devnet.eu wss://chat.365devnet.eu; " +
+      "frame-src 'self' https://chat.365devnet.eu; " +
+      "frame-ancestors 'none'; " +
+      "base-uri 'self'; " +
+      "form-action 'self'"
     );
   }
   next();