Template
65 lines
1.7 KiB
Markdown
65 lines
1.7 KiB
Markdown
# Security Headers Configuration
|
|
|
|
Protect against XSS, Clickjacking, MIME sniffing, and other common web attacks.
|
|
|
|
## Setup
|
|
|
|
Add security headers to `next.config.ts`:
|
|
|
|
```typescript
|
|
import type { NextConfig } from 'next'
|
|
|
|
const nextConfig: NextConfig = {
|
|
async headers() {
|
|
return [
|
|
{
|
|
source: '/:path*',
|
|
headers: [
|
|
{
|
|
key: 'X-Frame-Options',
|
|
value: 'DENY',
|
|
},
|
|
{
|
|
key: 'X-Content-Type-Options',
|
|
value: 'nosniff',
|
|
},
|
|
{
|
|
key: 'Referrer-Policy',
|
|
value: 'origin-when-cross-origin',
|
|
},
|
|
{
|
|
key: 'Strict-Transport-Security',
|
|
value: 'max-age=31536000; includeSubDomains',
|
|
},
|
|
],
|
|
},
|
|
]
|
|
},
|
|
}
|
|
|
|
export default nextConfig
|
|
```
|
|
|
|
## What Each Header Does
|
|
|
|
| Header | Protection |
|
|
|--------|-----------|
|
|
| X-Frame-Options: DENY | Prevents your site from being embedded in iframes (clickjacking) |
|
|
| X-Content-Type-Options: nosniff | Prevents browsers from guessing content types (MIME sniffing) |
|
|
| Referrer-Policy | Controls how much URL info is sent to other sites |
|
|
| Strict-Transport-Security | Forces HTTPS connections |
|
|
|
|
## Verify After Deployment
|
|
1. Open Chrome DevTools
|
|
2. Go to Network tab
|
|
3. Click on any request to your site
|
|
4. Check Response Headers section
|
|
5. Verify all 4 headers are present
|
|
|
|
## Advanced (Optional)
|
|
**Content-Security-Policy (CSP)** - The most powerful header, but can break your app if misconfigured. Only add after thorough testing:
|
|
```
|
|
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'
|
|
```
|
|
Start with report-only mode first: `Content-Security-Policy-Report-Only`
|