fix(site): allow sanity.io in CSP frame-ancestors and resilient iframe visual editing

Author: codercatdev

apps/site/src/components/DraftModeToggle.astro

@@ -10,6 +10,7 @@ const returnTo = Astro.url.pathname + Astro.url.search;
 <form
 	method="POST"
 	action="/api/draft-mode/disable"
+	data-sanity-preview
 	class="fixed bottom-4 right-4 z-50"
 >
 	<input type="hidden" name="returnTo" value={returnTo} />
@@ -20,17 +21,3 @@ const returnTo = Astro.url.pathname + Astro.url.search;
 		Exit draft mode
 	</button>
 </form>
-
-<script>
-	import { enableVisualEditing } from "@sanity/visual-editing-standalone";
-
-	enableVisualEditing({
-		refresh: (payload) => {
-			if (payload.source === "mutation" || payload.source === "manual") {
-				window.location.reload();
-				return Promise.resolve();
-			}
-			return false;
-		},
-	});
-</script>

apps/site/src/layouts/BaseLayout.astro

@@ -193,6 +193,24 @@ const graph = buildGraph([
 			<Footer />
 		</div>
 		{preview && <DraftModeToggle />}
+		<script>
+			import { enableVisualEditing } from "@sanity/visual-editing-standalone";
+
+			if (
+				window.self !== window.top ||
+				document.querySelector("[data-sanity-preview]")
+			) {
+				enableVisualEditing({
+					refresh: (payload) => {
+						if (payload.source === "mutation" || payload.source === "manual") {
+							window.location.reload();
+							return Promise.resolve();
+						}
+						return false;
+					},
+				});
+			}
+		</script>
 		<ChatModal />
 		<AnalyticsBeacon />
 	</body>

apps/site/src/lib/sanity/preview.ts

@@ -46,7 +46,7 @@ export function resolvePreview({
 	perspectiveParam,
 }: ResolvePreviewInput): PreviewContext {
 	const siteWide = env?.PUBLIC_SANITY_VISUAL_EDITING_ENABLED === "true";
-	if (!siteWide && !hasPreviewCookie) {
+	if (!siteWide && !hasPreviewCookie && !perspectiveParam) {
 		return { enabled: false };
 	}
 

apps/site/src/middleware.ts

@@ -93,7 +93,7 @@ export const onRequest = defineMiddleware(async (context, next) => {
 	response.headers.set("Referrer-Policy", "strict-origin-when-cross-origin");
 	response.headers.set(
 		"Content-Security-Policy",
-		"frame-ancestors 'self' https://*.sanity.studio http://localhost:3333",
+		"frame-ancestors 'self' https://*.sanity.studio https://*.sanity.io https://sanity.io http://localhost:3333",
 	);
 
 	// AIPREF / AI Preference Headers