How to add CSP headers in Remix Embedded App

Shopify CLI and Libraries
1

I am trying to add CSP headers in my remix app.

I have added the following code in my entry.server.jsx

  const shop = request.headers.get("x-shopify-shop-domain") || url.searchParams.get("shop") || "shopify-dev.myshopify.com";

And inside my main server code.

<RemixServer 
        context={remixContext} 
        url={request.url} 
        abortDelay={ABORT_DELAY}
/>

responseHeaders.set("Content-Type", "text/html");
responseHeaders.set("Content-Security-Policy", `frame-ancestors https://${shop} https://admin.shopify.com;`);

When I visit the url (i.e. cloudflare tunnel) I can see the CSP header but inside shopify admin I am not getting CSP in any page.

2

This is the solution actually. I was mistaken in testing procedure.

3

Hey there :waving_hand:

Does your entry.server.tsx have this line?

If so, that should be all you need. You shouldn’t need the code you added.