fix: frame preview headers

src/app.d.ts

@@ -7,7 +7,9 @@ import type { ISbStoryData } from '@storyblok/js';
 declare global {
   namespace App {
     // interface Error {}
-    // interface Locals {}
+    interface Locals {
+      version: 'published' | 'draft';
+    }
     interface PageData {
       awards: ISbStoryData<RecognitionEntryStoryblok>[];
     }

src/components/draft-mode.svelte

@@ -22,6 +22,7 @@
     <Button
       as="a"
       data-sveltekit-preload-data="off"
+      data-sveltekit-reload
       href="/exit-preview?return_to={encodeURIComponent($page.url.pathname)}"
     >
       Published version

src/hooks.server.ts

@@ -0,0 +1,17 @@
+import { PREVIEW_COOKIE_KEY } from '$lib/constants';
+import { sequence } from '@sveltejs/kit/hooks';
+import type { Handle } from '@sveltejs/kit';
+
+const validateDraftMode: Handle = async ({ event, resolve }) => {
+  event.locals.version = event.cookies.get(PREVIEW_COOKIE_KEY) ? 'draft' : 'published';
+
+  const response = await resolve(event);
+  // Note: https://www.storyblok.com/docs/guide/essentials/visual-editor#visual-editor-preview
+  if (event.locals.version === 'draft') {
+    response.headers.set('X-Frame-Options', 'ALLOW-FROM storyblok.com');
+  }
+
+  return response;
+};
+
+export const handle = sequence(validateDraftMode);

src/routes/(handbook)/+layout.server.ts

@@ -1,12 +1,11 @@
-import { PREVIEW_COOKIE_KEY } from '$lib/constants';
 import { getStoryblok } from '$lib/storyblok';
 import type { ConfigurationStoryblok } from '$types/bloks';
 import { error } from '@sveltejs/kit';
 import type { ISbStoryData } from '@storyblok/js';
 import { fetchCareers } from '$lib/content';
 
-export const load = async ({ cookies, fetch }) => {
-  const version: 'draft' | 'published' = cookies.get(PREVIEW_COOKIE_KEY) ? 'draft' : 'published';
+export const load = async ({ fetch, locals }) => {
+  const version = locals.version;
   const storyblok = getStoryblok({ fetch });
 
   try {

src/routes/(marketing-site)/+layout.server.ts

@@ -1,12 +1,11 @@
-import { PREVIEW_COOKIE_KEY } from '$lib/constants';
 import { getStoryblok } from '$lib/storyblok';
 import type { ConfigurationStoryblok } from '$types/bloks';
 import { error } from '@sveltejs/kit';
 import type { ISbStoryData } from '@storyblok/js';
 import { fetchAwards, fetchAwardsTypes, fetchCareers } from '$lib/content';
 
-export const load = async ({ cookies, fetch }) => {
-  const version: 'draft' | 'published' = cookies.get(PREVIEW_COOKIE_KEY) ? 'draft' : 'published';
+export const load = async ({ locals, fetch }) => {
+  const version = locals.version;
   const storyblok = getStoryblok({ fetch });
 
   try {

src/routes/(marketing-site)/[...path]/+page.server.ts

@@ -1,16 +1,16 @@
 import { error } from '@sveltejs/kit';
-import { PREVIEW_COOKIE_KEY } from '$lib/constants';
 import { fetchPage } from '$lib/content';
 import { BYPASS_TOKEN } from '$env/static/private';
 
-export const load = async ({ params, cookies, fetch, url }) => {
+export const load = async ({ params, locals, fetch, url }) => {
+  const version = locals.version;
   // don't catch paths that end with an extension
   if (/\..+$/.test(params.path)) throw error(404);
 
   try {
     const page = await fetchPage({
       slug: params.path,
-      version: cookies.get(PREVIEW_COOKIE_KEY) ? 'draft' : 'published',
+      version,
       fetch,
       url
     });

src/routes/(proposals)/proposal/[slug]/+page.server.ts

@@ -1,5 +1,4 @@
 import { STORYBLOK_PROPOSALS_TOKEN } from '$env/static/private';
-import { PREVIEW_COOKIE_KEY } from '$lib/constants';
 import { getStoryblok } from '$lib/storyblok';
 import { fetchAwards, fetchPage } from '$lib/content';
 import type { ProposalStoryblok } from '$types/bloks.js';
@@ -13,8 +12,8 @@ const isStatusError = (err: unknown): err is { status: number } => {
   );
 };
 
-export const load = async ({ cookies, fetch, params, url }) => {
-  const version: 'draft' | 'published' = cookies.get(PREVIEW_COOKIE_KEY) ? 'draft' : 'published';
+export const load = async ({ locals, cookies, fetch, params, url }) => {
+  const version = locals.version;
 
   const storyblok = getStoryblok({ fetch }, { accessToken: STORYBLOK_PROPOSALS_TOKEN });