All 5 Security Best Practices in Next.js questions
More in Security Best Practices in Next.js
Why is it important to never expose sensitive information like API keys inside client components? How do you protect a Next.js application against cross site scripting attacks? How would you protect server actions from being called with malicious or unauthorized data, since they can be invoked directly from the client? What steps should you take to keep dependencies and the Next.js framework itself secure over time?
Advertisement
Back to results for “Security”
Next.js › Security Best Practices in Next.js

How do you set security related HTTP headers, such as Content Security Policy, in a Next.js application?

Intermediate

Answer

You add a headers function inside your next.config.js file, defining custom response headers like Content-Security-Policy or X-Frame-Options that apply across your application, helping protect against attacks like clickjacking and restricting which sources of content the browser is allowed to load.
// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Content-Security-Policy', value: "default-src 'self'" }
        ]
      }
    ];
  }
};
Real-world example A banking application adds strict security headers across its entire site, preventing it from being embedded in a hidden frame on a malicious website that could trick users into clicking something unintended.

Common follow-ups: What does the X-Frame-Options header actually protect against?;How restrictive should a Content Security Policy be for a typical application?

Middleware;Third-Party Script Optimization
All 5 Security Best Practices in Next.js questions