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.
This commit is contained in:
233
CSP-TEST-RESULTS.md
Normal file
233
CSP-TEST-RESULTS.md
Normal file
@@ -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`
|
||||
|
||||
Reference in New Issue
Block a user