Next.js 14 Draft Mode not working in an iframe(headless CMS preview)

I have tried using the Draft Mode in two of my projects which are built with combination of Next.js 14 and Headless CMS(Storyblok, Crystalize). While the Draft Mode workes perfectly fine in a browser tab it doesn’t work in any of the the CMS UI’s preview(iframe). I have previous projects built with the pages router and the “Preview Mode”(same functionality as draft mode) in them works so it’s nothing to do with the CMS’s.

Here’s my setup:

  • Next.js 14.0.4
  • local-ssl-proxy(the iframes require https)
  • Chrome v121
  • CMS: Storyblok or Crystalize
  • Ubuntu 22.04.3

Here’s my draft/route.ts:

// route handler with secret and slug
import { draftMode } from 'next/headers';
import { redirect } from 'next/navigation';
import { paths } from '@/constants/paths';

export async function GET(request: Request) {
  // Parse query string parameters
  const { searchParams } = new URL(request.url);
  const crystallizeSignature = searchParams.get('crystallizeSignature');
  const slug = searchParams.get('slug');

  // TODO: Check the secret and slug
  if (!crystallizeSignature || !slug) {
    return new Response('Invalid token', { status: 401 });
  }

  // Enable Draft Mode by setting the cookie
  draftMode().enable();

  // Redirect to the path from the fetched post and remove the prefix
  const slugWithoutPrefix = slug.replace(paths.crystallizeRoot, '');

  redirect(`${slugWithoutPrefix}`);
}

Here’s what i tried and didn’t work:

  1. Updating Nextjs to latest version
  2. Refered to this GH issue. I have tried all the solutions/workarounds people suggested but none of them worked. Even checking if the cookie was correct in the response:enter image description here
  3. Using Firefox
  4. Setting a random cookie(e.g test-cookie=123455) to check if any cookie will be set at all and when i logged out all cookies the test-cookie was visible in the iframe