From b95e25e937977eb6e5ffcff20fc8f83c73fddb35 Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Thu, 6 Jun 2024 10:59:34 -0400 Subject: [PATCH] docs: adds live preview csp troubleshooting tips (#6655) --- docs/live-preview/client.mdx | 8 ++++++++ docs/live-preview/server.mdx | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/docs/live-preview/client.mdx b/docs/live-preview/client.mdx index fa3e6bba3..1de5279f4 100644 --- a/docs/live-preview/client.mdx +++ b/docs/live-preview/client.mdx @@ -282,3 +282,11 @@ const { data } = useLivePreview({ depth: 1, // Ensure this matches the depth of your initial request }) ``` + +### Iframe refuses to connect + +If your front-end application has set a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) that blocks the Admin Panel from loading your front-end application, the iframe will not be able to load your site. To resolve this, you can whitelist the Admin Panel's domain in your CSP by setting the `frame-ancestors` directive: + +```plaintext +frame-ancestors: "self" localhost:* https://your-site.com; +``` diff --git a/docs/live-preview/server.mdx b/docs/live-preview/server.mdx index 65079ff42..850e09e25 100644 --- a/docs/live-preview/server.mdx +++ b/docs/live-preview/server.mdx @@ -173,3 +173,11 @@ If you are noticing that updates feel less snappy than client-side Live Preview }, } ``` + +### Iframe refuses to connect + +If your front-end application has set a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) that blocks the Admin Panel from loading your front-end application, the iframe will not be able to load your site. To resolve this, you can whitelist the Admin Panel's domain in your CSP by setting the `frame-ancestors` directive: + +```plaintext +frame-ancestors: "self" localhost:* https://your-site.com; +```