How to fix iframe connection refusal due to Content Security Policy directive?

Shopify Apps
1

good morning.

I started to get this error message “Refused to frame ‘https://tear-dev.myshopify.com/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘none’”.”

I have already updated my app to return add CSP headers:

content-security-policy:
frame-ancestors tear-dev.myshopify.com tear-dev.account.myshopify.com

Is there any configuration that needs to be updated in Shopify for this to work?

Thanks :slightly_smiling_face:

Screen Shot 2022-10-17 at 18.42.04.png
Screen Shot 2022-10-17 at 18.42.04.png1919×682 129 KB

1 Like
2

Hi,

check this guide from Shopify:

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

Br,

3

Hello @rodrigoassis ,

It’s flareAI - your Fully Automated Free Sales Machine here. We are helping Shopify merchants providing solutions for the last few years in Shopify Community. I hope my tips will be helpful for you.

I would suggest you troubleshoot the issue by following few steps:

  1. Ensure that the URL you have supplied in your Apps Whitelist and Auth callbacks are HTTPS.
  2. Make sure the URL you are trying to load is a valid URL
  3. Clear the cookies and cache of your browser and then reboot the browser.
  4. Try a different web browser. For example: If you are currently using Google Chrome, login to your Shopify store using any other browser like Firefox and then try to install the Facebook Channel.
  5. Try to login from an incognito window or private browsing window to rule out any browser issues.
  6. Try another device, such as another computer or mobile phone.
  7. Try to connect to some other internet connection. For example: Use network on a phone rather than wifi.

Also I recommend you to go through this documentation on Setting up Iframe protection

I hope that the above list’s tips will help you solve your query

Gina
flareAI

4

Hey Rodrigoassis,
Was your issue resolved?

How did you resolve it,
I’m getting same issue, but it appears randomly in my case

5

Hello @flareAI ,
I’ve tried all the solutions & only 4 & 5 works out for me. How to make this app to work back in chrome again ?

rkavi_0-1731566092201.png
rkavi_0-1731566092201.png1851×958 115 KB