Files
proxmox/docs/04-configuration/NPMPLUS_CSP_QUIRKS_MODE_FIX.md
defiQUG bea1903ac9
Some checks failed
Deploy to Phoenix / deploy (push) Has been cancelled
Sync all local changes: docs, config, scripts, submodule refs, verification evidence
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-21 15:46:06 -08:00

169 lines
4.2 KiB
Markdown

# NPMplus CSP and Quirks Mode Fix
**Last Updated:** 2026-01-31
**Document Version:** 1.0
**Status:** Active Documentation
---
**Date**: 2026-01-16
**Status**: ✅ CSP Fixed | ⚠️ Quirks Mode Requires Backend Fix
---
## Issues Resolved
### ✅ Content Security Policy (CSP)
**Problem**: CSP was blocking `eval()` in JavaScript, causing errors:
```
Content Security Policy of your site blocks the use of 'eval' in JavaScript
```
**Solution**: Updated NPMplus advanced configuration to include CSP header that allows `unsafe-eval`:
```nginx
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https: data:; style-src 'self' 'unsafe-inline' https: data:; font-src 'self' https: data:; img-src 'self' data: https: blob:; connect-src 'self' https: wss: ws:; media-src 'self' https: data:; object-src 'none'; base-uri 'self'; form-action 'self' https:; frame-ancestors 'none'; upgrade-insecure-requests" always;
```
**Status**: ✅ Fixed for all 19 domains
---
### ⚠️ Quirks Mode
**Problem**: Browser reports Quirks Mode:
```
Page layout may be unexpected due to Quirks Mode
One or more documents in this page is in Quirks Mode
```
**Root Cause**: Backend services are not sending proper `<!DOCTYPE html>` declaration in HTML responses.
**Solution**: Backend services must include proper DOCTYPE in HTML responses.
#### For Backend Services:
**Express.js / Node.js:**
```javascript
// Ensure HTML responses include DOCTYPE
app.get('*', (req, res) => {
res.send(`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Your App</title>
</head>
<body>
<!-- content -->
</body>
</html>`);
});
```
**Nginx (if serving static files):**
```nginx
# Ensure HTML files have DOCTYPE
# This is typically handled by the application, not Nginx
```
**Python / Flask:**
```python
@app.route('/')
def index():
return '''<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Your App</title>
</head>
<body>
<!-- content -->
</body>
</html>'''
```
**Note**: NPMplus/Nginx cannot modify HTML body content to add DOCTYPE. This must be fixed in the backend application.
---
## CSP Configuration Details
### Current CSP Policy
The updated CSP allows:
-`'unsafe-eval'` - Allows `eval()` for legacy JavaScript
-`'unsafe-inline'` - Allows inline scripts/styles
-`https:` - Allows loading resources from any HTTPS source
-`data:` - Allows data URIs (for images, fonts)
-`wss: ws:` - Allows WebSocket connections
### Security Considerations
⚠️ **Warning**: Allowing `'unsafe-eval'` reduces security but is necessary for:
- Legacy JavaScript applications
- Frameworks that use `eval()` internally
- Development environments
**For Production**: Consider removing `'unsafe-eval'` if possible and refactoring code to avoid `eval()`.
---
## Verification
### Check CSP Header
```bash
curl -I -k https://sankofa.nexus | grep -i "content-security"
```
Expected output:
```
content-security-policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https: data:; ...
```
### Check in Browser
1. Open browser DevTools (F12)
2. Go to **Network** tab
3. Reload page
4. Click on the main document request
5. Check **Response Headers** for `Content-Security-Policy`
---
## Scripts Created
1. **`scripts/fix-npmplus-csp-headers.sh`**
- Updates CSP headers for all proxy hosts
- Allows `unsafe-eval` for legacy JavaScript
- Can be re-run to update additional domains
**Usage:**
```bash
bash scripts/fix-npmplus-csp-headers.sh \
https://192.168.0.166:81 \
nsatoshi2007@hotmail.com \
ce8219e321e1cd97bd590fb792d3caeb7e2e3b94ca7e20124acaf253f911ff72
```
---
## Next Steps
### For CSP (✅ Complete)
- CSP headers are configured for all domains
- `eval()` should now work without errors
### For Quirks Mode (⚠️ Requires Backend Fix)
1. **Identify Backend Services**: Determine which services serve HTML without DOCTYPE
2. **Update Backend Code**: Add `<!DOCTYPE html>` to HTML responses
3. **Test**: Verify Quirks Mode warning disappears in browser DevTools
---
## Related Documentation
- [NPMplus Migration Guide](./NPMPLUS_MIGRATION_GUIDE.md)
- [Server Headers Configuration](../../smom-dbis-138/orchestration/portal/SERVER_HEADERS.md)