Support Forums

How to set dynamic header for Content-Security-Policy: frame-ancestors

Hi, I’m using Netlify to host a Shopify app that is run inside an iframe in the Shopify dashboard. Shopify requires that I set the proper Content Security Policy frame-ancestors directive to avoid clickjacking attacks. The frame-ancestors header should be set dynamically to whatever shop origin has loaded the app. I read the _headers docs on Netlify and did some searching but couldn’t find anything if this is even possible. Others have accomplishes this by using middleware to set the CSP header unfortunately my app is a JavaScript SPA. Any help is greatly appreciated. Thanks!

Content-Security-Policy: frame-ancestors https://example.myshopify.com https://admin.shopify.com;

Hey @philnetlify1,

Could you share the Netlify site URL?

Hi, @philnetlify1. To confirm, is this something you looking to solve programmatically because there are many shops being used so the subdomain cannot be known before hand?

If so, Edge Handlers would be a solution once they become publicly available. In the meantime, the only solution I see is to use a function to dynamically generate the headers.

Yes, you are correct. Basically I will need to programmatically validate the domain *.myshopify.com and then set the frame-ancestors to whichever shop domain is being used. The subdomain cannot be know before hand. I’ll look into functions. Thanks!