Cloudflare

1 Cloudflare does not set X-Frame-Options by default
2 Use Transform Rules to add it, or set frame-ancestors in CSP instead

Header: X-Frame-Options
Value: DENY

# Better: use CSP frame-ancestors
Content-Security-Policy: frame-ancestors 'none'

Cloudflare docs

AWS CloudFront

1 Create a Response Headers Policy in CloudFront
2 Attach the policy to your distribution's behavior

Custom header:
  Name: X-Frame-Options
  Value: DENY
  Override origin: Yes

AWS CloudFront docs

Vercel

1 Add a headers entry to your vercel.json
2 Redeploy

json

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Frame-Options", "value": "DENY" }
      ]
    }
  ]
}

Vercel docs

Netlify

1 Add a headers section to your netlify.toml or _headers file
2 Redeploy

toml

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"

Netlify docs

Nginx

1 Add the header directive to your server or location block
2 Test config with nginx -t, then reload

nginx

add_header X-Frame-Options "DENY" always;

Nginx docs

Apache

1 Make sure mod_headers is enabled
2 Add the Header directive to your .htaccess or VirtualHost

apacheconf

Header always set X-Frame-Options "DENY"

Apache docs

Caddy

1 Add a header directive to your Caddyfile
2 Reload Caddy

caddyfile

header X-Frame-Options "DENY"

Caddy docs

Next.js

1 Add a headers function to your next.config.js
2 Rebuild and redeploy

javascript

// next.config.js
module.exports = {
  async headers() {
    return [{
      source: "/(.*)",
      headers: [
        { key: "X-Frame-Options", value: "DENY" },
      ],
    }];
  },
};

Next.js docs

Express

1 Use the helmet middleware (recommended) or set the header manually
2 Restart your server

javascript

// Using helmet (recommended)
const helmet = require("helmet");
app.use(helmet());

// Or manually
app.use((req, res, next) => {
  res.setHeader("X-Frame-Options", "DENY");
  next();
});

Express docs

Django

1 Django sets X-Frame-Options via XFrameOptionsMiddleware
2 Make sure the middleware is in MIDDLEWARE

python

# settings.py
X_FRAME_OPTIONS = 'DENY'
# Ensure 'django.middleware.clickjacking.XFrameOptionsMiddleware' is in MIDDLEWARE

Django docs

Laravel

1 Add a middleware that sets the header
2 Register it in your HTTP kernel

php

// app/Http/Middleware/SecurityHeaders.php
public function handle($request, Closure $next)
{
    $response = $next($request);
    $response->headers->set('X-Frame-Options', 'DENY');
    return $response;
}

Laravel docs

Rails

1 Set the header in your ApplicationController or config

ruby

# config/application.rb
config.action_dispatch.default_headers.merge!(
  'X-Frame-Options' => 'DENY'
)

Rails docs

Spring Boot

1 Spring Security sets X-Frame-Options: DENY by default
2 If it's missing, ensure default headers are not disabled

java

@Bean
SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
    http.headers(h -> h
        .frameOptions(fo -> fo.deny())
    );
    return http.build();
}

Spring Boot docs

WordPress

1 Add the header via your theme's functions.php or .htaccess
2 A security plugin like HTTP Headers can also help

php

# .htaccess (Apache)
Header always set X-Frame-Options "DENY"

# Or in functions.php
add_action('send_headers', function() {
    header('X-Frame-Options: DENY');
});

WordPress docs

Nuxt

1 Add the header to your nuxt.config.ts routeRules
2 Rebuild and redeploy

typescript

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/**': {
      headers: { 'X-Frame-Options': 'DENY' },
    },
  },
});

Nuxt docs

ASP.NET

1 Add middleware in your Program.cs or Startup.cs

csharp

app.Use(async (context, next) =>
{
    context.Response.Headers.Append("X-Frame-Options", "DENY");
    await next();
});

ASP.NET docs

Block your pages from being framed

CDN and edge

Web servers

Frameworks

Cloudflare

AWS CloudFront

Vercel

Netlify

Nginx

Apache

Caddy

Next.js

Express

Django

Laravel

Rails

Spring Boot

WordPress

Nuxt

ASP.NET

Related fixes