Need to remove X-Frame-Options header from the response

[rebryk]

Summary

I want to redirect web page content without the X-Frame-Options header so I can embed it on my website.

As an example, I created a middleware according to the Next.js documentation.

import { NextResponse } from "next/server";

export function middleware(request) {
  const pathname = new URL(request.url).pathname;
  const response = NextResponse.rewrite(new URL(pathname, "https://docs.adapty.io/"));
  response.headers.set("x-frame-options", "sameorigin");
  return response;
}

export const config = {
  matcher: "/:path*"
}

But in the response, I still get X-Frame-Options equal to DENY.
Any ideas how to resolve it?

Additional information

No response

Example

No response

[Rvai226]

Hi rebryk
Am also facing same issue like this am not getting any resource to resolve this.
Did you resolved it , if you resolved means please share me some suggestion here

Thanks
Ravi

[ernest-nowacki]

Got similar case. I have one route in my app that I want to be able to embed and I applied Content-Security-Policy via middleware.ts file. I don't manually set X-Frame-Options header anywhere, yet when I deploy via Vercel this header is present and prevent usage of my route inside an iframe. It also seems like my middleware is not ever reached as Content-Security-Policy is not present.

[JoaquinPiersigilli]

Same issue here.

[ernest-nowacki]

What I ended up doing is spinning out another vercel app (completely independent from my own) with 1 route. On that newly spinned up app I didn't specify any Content-Security-Policies and then I was able to use that route as <iframe src of my original app.

Less then ideal but I couldn't find better way to do it (I specifically wanted iframed content to be different origin so overriding X-Frame-Options to SAMEORIGIN was not viable solution for me).

[JoaquinPiersigilli]

Same boat. Does anyone know how to work around this?

[pmillspaugh]

@JoaquinPiersigilli probably way late, but maybe my answer below will help 🤞

[maiconburn]

@JoaquinPiersigilli This worked for me, in my case I need to allow one specific domain where I want to remove the 'X-Frame-Options', 'SAMEORIGIN' not sure if this is your case but hope helps.

export function middleware(request: { url: string | URL; headers: HeadersInit }) {
  
  const requestHeaders = new Headers(request.headers);

  const referrer = requestHeaders.get('referer');
  
  const response = NextResponse.next();
  
  if (!referrer || !referrer.startsWith('https://where-you-need-to-allow.com')) {
      response.headers.set('X-Frame-Options', 'SAMEORIGIN');
  }
  
  return response;

}

export const config = {
  matcher: '/:path*',
};

[ntubrian]

@rebryk what if the service is a React with Vite project deployed on Vercel, how to do that

[pmillspaugh]

I ran into a similar issue, which in my case was caused by Vercel Authentication on preview deployments. TLDR: try disabling Vercel Authentication under Project Settings > Deployment Protection > Vercel Authentication.

Full summary:

• My application https://foo.com includes an iframe https://cdn.bar.com
• The iframe makes cross-origin requests to https://foo.com/static/:path
• I've added CORS headers (Access-Control-Allow-Origin, Cross-Origin-Resource-Policy, etc.) in next.config.ts
• On local dev and Vercel Production deployments those requests return 200, but on Vercel Preview deployments I get 401 Unauthorized with X-Frame-Options:DENY and none of my configured headers
• By disabling Vercel Authentication in my project settings, I no longer get 401s

Credit to this builder.io forum comment that led me to the solution after hours of investigation.

Note: if don't want to disable Vercel Authentication, I think adding a Protection Bypass for Automation (directly below in project settings) would also work. You'd need to configure a secret to pass in a x-vercel-protection-bypass header.

[pmillspaugh]

If anyone on the Vercel team is seeing this, it seems like a bug (but I could be wrong, ofc!).

[nfy-sg]

To work for deployment protected deployments I had to do as @pmillspaugh mentions by using x-vercel-protection-bypass.
However this wasn't enough for me, as subsequent requests would fail, incl. static assets like js/css.
What worked for me for subsequent requests was using this extra query/header.

x-vercel-set-bypass-cookie: samesitenone

If you are accessing the deployment through a non-direct way (e.g. in an iframe) then you may need to further configure x-vercel-set-bypass-cookie by setting the value to samesitenone.

🔗 Vercel docs

✅ This combination works perfect for me for protected deployments.