Yes, a hash-based CSP approach is excellent for your use case with statically generated pages in the Pages Router! Here's why it's particularly well-suited:
Why Hash-Based CSP Works Well for Static Pages
Predictable Content: Since your pages are statically generated, the inline scripts and styles are determined at build time and don't change between requests. This makes hash-based CSP ideal because:
- Hashes can be calculated once during the build process
- No server-side nonce generation needed for each request
- Works seamlessly with CDN caching and static hosting
- Perfect for SSG (Static Site Generation) workflows
Implementation Approach
For Pages Router with static generation, you can implement hash-based CSP in your next.config.js:
// Calculate hashes for your inline scripts/styles at build time
const cspHeader = `
default-src 'self';
script-src 'self' 'sha256-[YOUR_SCRIPT_HASH]';
style-src 'self' 'sha256-[YOUR_STYLE_HASH]';
img-src 'self' blob: data:;
font-src 'self';
object-src 'none';
base-uri 'self';
form-action 'self';
frame-ancestors 'none';
upgrade-insecure-requests;
`
module.exports = {
async headers() {
return [
{
source: '/(.*)',
headers: [
{
key: 'Content-Security-Policy',
value: cspHeader.replace(/\n/g, ''),
},
],
},
]
},
}Hash vs Nonce Comparison for Your Case
| Aspect | Hash-Based | Nonce-Based |
|---|---|---|
| Static Pages | ✅ Perfect fit | ❌ Overkill |
| Build Complexity | ✅ Simple | ❌ Requires middleware |
| CDN Friendly | ✅ Yes | ❌ Dynamic headers |
| Performance | ✅ No runtime overhead | ❌ Server processing |
Recommendations
- Use hash-based CSP for your statically generated pages 1
- Calculate hashes during build for any inline scripts/styles
- Avoid
unsafe-inline- use hashes for specific inline content you control 2 - Start with
Content-Security-Policy-Report-Onlyto test without breaking functionality 2 - Be specific with sources rather than using wildcards 2
Hash-based CSP is the most appropriate choice for your architecture, providing strong security without the complexity of dynamic nonce generation that you don't need for static content.
303d ago
No, you cannot use hash-based CSP for external scripts loaded with the Next.js <Script> tag. Here's why and what to do instead:
Hash-Based CSP vs External Scripts
Hashes are only for inline content - they're calculated based on the actual content of inline scripts or styles. External scripts loaded via src attribute work differently in CSP.
How External Scripts Work with CSP
For external scripts loaded with <Script>, you need to allowlist the domains in your CSP:
// next.config.js
const cspHeader = `
default-src 'self';
script-src 'self'
https://www.googletagmanager.com
https://www.google-analytics.com
https://cdn.jsdelivr.net;
style-src 'self' 'unsafe-inline';
img-src 'self' blob: data:;
`Example with Next.js Script Component
// This external script requires domain allowlisting, not hashes
<Script
src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
strategy="afterInteractive"
/>
// This inline script would use a hash
<Script id="gtag-init" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
`}
</Script>CSP Configuration for Both
const cspHeader = `
default-src 'self';
script-src 'self'
https://www.googletagmanager.com
'sha256-[HASH_FOR_INLINE_GTAG_SCRIPT]';
connect-src 'self'
https://www.google-analytics.com
https://analytics.google.com;
`Best Practices for External Scripts
- Allowlist specific domains rather than using wildcards
Use Subresource Integrity (SRI) when possible for additional security:
<Script src="https://cdn.example.com/script.js" integrity="sha384-[SRI_HASH]" crossOrigin="anonymous" />- Consider
connect-srcfor scripts that make network requests - Use
strict-dynamicif you need scripts to load other scripts
Summary
- External scripts: Use domain allowlisting in
script-src - Inline scripts: Use hash-based CSP with
'sha256-[hash]' - Next.js
<Script>: Primarily for external scripts, so focus on domain allowlisting - Hybrid approach: Most real applications need both domain allowlisting and hashes
Your hash-based approach is still valuable for inline scripts, but you'll need to complement it with domain allowlisting for external scripts loaded via the <Script> component.
303d ago