Shopify Refused to frame xxx.myshopify.com because an ancestor violates the following Security

Retired Boards Appdev Partners Discussion
1

Shopify Refused to frame xxx.myshopify.com because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘none’”.

I am using ngrok to develop Shopify App locally.

https://xxx.myshopify.com/admin/oauth/authorize?client_id=3294eddd012b6690606a18a84526aa556&scope=read_themes,write_themes,read_products,write_products,read_orders,write_orders,read_draft_orders,write_draft_orders,read_inventory,write_inventory&redirect_uri=https://dae4-103-112-54-135.in.ngrok.io/oauth.php&state=1937087423

Firstly I am redirecting my root file oauth.php to authenticate the app. But here I am getting the error!

Also giving this error

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' https://cdn.shopify.com https://cdn.shopifycdn.net 'nonce-2e34e92a-ab6e-411a-a8b7-d945a4db5205'". Either the 'unsafe-inline' keyword, a hash ('sha256-dAMs3/Yp2SSUrhzjwbwLmPPB0soj/thHemUrM4u00O8='), or a nonce ('nonce-...') is required to enable inline execution.

How to solve this?

Using this https://github.com/phpish/shopify to authenticate.

If I put that in hosting then it’s working fine.
What could be the problem point?

2

Try to add HTTP header

Content-Security-Policy “frame-ancestors ‘self’ https://*.myshopify.com;”;

3

I’m assuming you have an embedded app…

Shopify’s guidelines are here:

https://shopify.dev/apps/store/security/iframe-protection

The docs also specifically state:

The frame-ancestors declaration must be different for every shop, and these headers must be present in any routes that render HTML content.