Skip to content

Add security headers to Next.js config #1338

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 18, 2025
Merged

Add security headers to Next.js config #1338

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d194d86
Update next.config.mjs
avorylli Feb 10, 2025
e1ac8cd
Update next.config.mjs
krofax Feb 18, 2025
49a30b1
Update next.config.mjs
krofax Feb 18, 2025
b32e542
Update next.config.mjs
krofax Feb 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,32 @@ export default {
eslint: {
ignoreDuringBuilds: true,
},

async headers() {
return [
{
source: '/:path*',
headers: [
{
key: 'X-DNS-Prefetch-Control',
value: 'on'
},
{
key: 'Strict-Transport-Security',
value: 'max-age=31536000; includeSubDomains; preload'
},
{
key: 'X-Content-Type-Options',
value: 'nosniff'
},
{
key: 'X-Frame-Options',
value: 'DENY'
}
],
Comment on lines +26 to +42
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Consider adding additional security headers for enhanced protection.

While the current implementation covers essential security headers, consider adding these additional headers for comprehensive security:

         headers: [
           {
             key: 'X-DNS-Prefetch-Control',
             value: 'on'
           },
           {
             key: 'Strict-Transport-Security',
             value: 'max-age=31536000; includeSubDomains; preload'
           },
           {
             key: 'X-Content-Type-Options',
             value: 'nosniff'
           },
           {
             key: 'X-Frame-Options',
             value: 'DENY'
           },
+          {
+            key: 'Content-Security-Policy',
+            value: "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';"
+          },
+          {
+            key: 'Referrer-Policy',
+            value: 'strict-origin-when-cross-origin'
+          },
+          {
+            key: 'Permissions-Policy',
+            value: 'camera=(), microphone=(), geolocation=()'
+          }
         ],

🌐 Web query:

What are the recommended security headers for Next.js applications?

💡 Result:

Next.js applications require robust security headers to mitigate common web vulnerabilities like cross-site scripting (XSS), clickjacking, and data leaks. Based on best practices from security experts and Next.js documentation[1][2][3][6], here are the essential security headers:

Core Security Headers

  1. Strict-Transport-Security (HSTS)
    Enforces HTTPS-only connections with:
    Strict-Transport-Security: max-age=63072000; includeSubDomains; preload

    • Prevents SSL-stripping attacks[2][6]
    • Automatically added by Vercel deployments[6]

  2. Content-Security-Policy (CSP)
    Restricts content sources to prevent XSS:

    default-src 'self';
script-src 'self' https://trusted.cdn.com;
style-src 'self' 'unsafe-inline';
img-src 'self' data:;
    • Start with restrictive policies (default-src 'self') and gradually expand[1][7]
    • Use tools like Google's CSP Evaluator to validate[1]

  3. X-Content-Type-Options
    Blocks MIME-type sniffing:
    X-Content-Type-Options: nosniff

    • Prevents browsers from misinterpreting file types[2][3]

  4. X-Frame-Options
    Mitigates clickjacking via:
    X-Frame-Options: DENY

    • Modern alternative: Use CSP's frame-ancestors directive[1]

Additional Protections

  1. Referrer-Policy
    Controls referrer data leakage:
    Referrer-Policy: origin-when-cross-origin[3][5]

  2. Permissions-Policy
    Restricts browser features:
    Permissions-Policy: camera=(), geolocation=(), microphone=()

    • Disables sensitive APIs by default[3][5]

  3. Security Header Tools

    Tool Purpose
    Nosecone Type-safe header configuration
    next-secure-headers Simplified setup
    Helmet General Node.js apps[1][4]

Implementation Guide

Configure via next.config.js:

module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          { key: "Strict-Transport-Security", value: "max-age=63072000; includeSubDomains; preload" },
          { key: "X-Content-Type-Options", value: "nosniff" },
          { key: "X-Frame-Options", value: "DENY" }
        ]
      }
    ];
  }
};

For complex CSP configurations, use middleware with libraries like Nosecone or next-secure-headers[1][4].

Key Considerations

  • Avoid deprecated headers like X-XSS-Protection[1]
  • Use server-only package to prevent server code leakage[1]
  • Never expose secrets via NEXT_PUBLIC_ environment variables[1]
  • Validate headers using SecurityHeaders.com scanner[5]

These measures create a defense-in-depth strategy while maintaining compatibility with Next.js features like Static Site Generation and Server Components[7].

Citations:

Enhanced Security Headers – Actionable Improvement Required

The current code correctly implements the core security headers. However, based on best practices for Next.js applications, you should consider adding additional headers to further harden security. For example, supplementing the existing configuration with headers such as Content-Security-Policy, Referrer-Policy, and Permissions-Policy can help mitigate risks like XSS, clickjacking, and data leakage. (Note: Some sources recommend a higher HSTS max-age value—ensure this aligns with your overall security strategy.)

Key locations for attention:

  • File: next.config.mjs
  • Lines: 26-42 (the header configuration section)

Suggested diff:

         headers: [
           {
             key: 'X-DNS-Prefetch-Control',
             value: 'on'
           },
           {
             key: 'Strict-Transport-Security',
-            value: 'max-age=31536000; includeSubDomains; preload'
+            value: 'max-age=31536000; includeSubDomains; preload'
           },
           {
             key: 'X-Content-Type-Options',
             value: 'nosniff'
           },
           {
             key: 'X-Frame-Options',
             value: 'DENY'
           },
+          {
+            key: 'Content-Security-Policy',
+            value: "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';"
+          },
+          {
+            key: 'Referrer-Policy',
+            value: 'strict-origin-when-cross-origin'
+          },
+          {
+            key: 'Permissions-Policy',
+            value: 'camera=(), microphone=(), geolocation=()'
+          }
         ],

Please review and consider incorporating these additional headers to ensure a more robust security posture.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{
key: 'X-DNS-Prefetch-Control',
value: 'on'
},
{
key: 'Strict-Transport-Security',
value: 'max-age=31536000; includeSubDomains; preload'
},
{
key: 'X-Content-Type-Options',
value: 'nosniff'
},
{
key: 'X-Frame-Options',
value: 'DENY'
}
],
{
key: 'X-DNS-Prefetch-Control',
value: 'on'
},
{
key: 'Strict-Transport-Security',
value: 'max-age=31536000; includeSubDomains; preload'
},
{
key: 'X-Content-Type-Options',
value: 'nosniff'
},
{
key: 'X-Frame-Options',
value: 'DENY'
},
{
key: 'Content-Security-Policy',
value: "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';"
},
{
key: 'Referrer-Policy',
value: 'strict-origin-when-cross-origin'
},
{
key: 'Permissions-Policy',
value: 'camera=(), microphone=(), geolocation=()'
}
],

},
]
},

// Don't put redirects here
// they go in public/_redirects
Expand Down