Set the frame-ancestors in React with Polaris Embedded App

Shopify Apps
1

Hi there,

I am new in Shopify embedded app development. When we publish app to store it gets rejected with the error given in image.

So is there any proper solution that how we will add this policy into react app. Like i have used this one but no success.

And can we use this as headers to call API’s will it resolve the issue, like this.

axios.defaults.headers = {
“Content-Security-Policy”: frame-ancestors ${domain} admin.shopify.com;,
};

error.png
error.png1266×221 152 KB

2

Hi,
I have the same issue. Setting it with meta will not work, as apparently the frame-ancestors will not work on meta.
I don’t believe you should set it on the request to the API either - as I understand it, the header must be set on the response from the react app on URLs that render HTML.
But I am struggling to solve it myself, so I don’t have the full answer yet.

-Louise