365devnet/CSP-TEST-RESULTS.md

🛡️ 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

npm run build

Result: ✅ Build successful (astro-compress warning is harmless)

2. CSP Enabled Server Test

ENABLE_SSR_CSP=1 npm run start

Result: ✅ Server started successfully on port 3000

3. CSP Header Present

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)

# 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)

# 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