اگر اپلیکیشن شما به اجرای اسکریپتهای inline نیازی ندارد، میتوانید هدر CSP را مستقیماً در فایل next.config.js تنظیم کنید:
const cspHeader = `
default-src 'self';
script-src 'self' 'unsafe-eval' 'unsafe-inline';
style-src 'self' 'unsafe-inline';
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, ''),
},
],
},
]
},
}Next.js بهصورت آزمایشی از SRI برای CSP مبتنی بر هش پشتیبانی میکند. این روش امکان استفاده از رندرینگ استاتیک و کش CDN را فراهم میسازد.
در فایل next.config.js تنظیم زیر را اضافه کنید:
const nextConfig = {
experimental: {
sri: {
algorithm: 'sha256',
},
},
}
module.exports = nextConfigمیتوانید همچنان از سیاستهای CSP خود استفاده کنید. SRI بهصورت مستقل هشهای امنیتی را به اسکریپتها اضافه میکند:
const cspHeader = `
default-src 'self';
script-src 'self';
style-src 'self';
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 = {
experimental: {
sri: {
algorithm: 'sha256',
},
},
async headers() {
return [
{
source: '/(.*)',
headers: [
{
key: 'Content-Security-Policy',
value: cspHeader.replace(/\n/g, ''),
},
],
},
]
},
}در حالت توسعه، برای پشتیبانی از ابزارهای دیباگ باید 'unsafe-eval' فعال باشد:
const isDev = process.env.NODE_ENV === 'development'
const cspHeader = `
default-src 'self';
script-src 'self' 'nonce-${nonce}' 'strict-dynamic' ${isDev ? "'unsafe-eval'" : ''};
style-src 'self' ${isDev ? "'unsafe-inline'" : `'nonce-${nonce}'`};
...
`برای استفاده از سرویسهایی مانند Google Tag Manager:
import { GoogleTagManager } from '@next/third-parties/google'
import { headers } from 'next/headers'
export default async function RootLayout({ children }) {
const nonce = (await headers()).get('x-nonce')
return (
<html lang="en">
<body>
{children}
<GoogleTagManager gtmId="GTM-XYZ" nonce={nonce} />
</body>
</html>
)
}const cspHeader = `
default-src 'self';
script-src 'self' 'nonce-${nonce}' 'strict-dynamic' https://www.googletagmanager.com;
connect-src 'self' https://www.google-analytics.com;
img-src 'self' data: https://www.google-analytics.com;
`script-src مجاز هستند'wasm-unsafe-eval' را اضافه کنید| نسخه | تغییرات |
|---|---|
| v14.0.0 | افزوده شدن پشتیبانی آزمایشی از SRI برای CSP مبتنی بر هش |
| v13.4.20 | پیشنهاد شده برای مدیریت صحیح nonce و هدرهای CSP |
اگر اپلیکیشن شما به nonce نیاز ندارد، میتوانید با استفاده از SRI و تنظیم مستقیم هدر CSP امنیت را حفظ کرده و از مزایای رندرینگ استاتیک و کش CDN بهرهمند شوید. این روش برای اپلیکیشنهایی که به عملکرد بالا و امنیت در زمان build نیاز دارند، بسیار مناسب است.