Blocked by Content Security Policy (FireFox)

[laksh]

Hello, I am stuck with some "Blocked by Content Security Policy".

My Shopify app basically opens in an iframe. Only with Firefox Browser, I am receiving this error. I checked it with Inspect Element and I saw this "frame-ancestors". ( Screenshot -> https://prnt.sc/rojyht )

I reviewed this document -> https://content-security-policy.com/faq/

In my nginx configuration, I added -> 

add_header Content-Security-Policy "frame-ancestors 'self' https://*.myshopify.com;";

It added successfully in the Response Header but still, I see the same error.

Can anyone help me with this, I can provide more information if needed.

Thanks

[sillycube]

I also have the same problem recently. I guess it should be due to the latest update of chrome & firefox. For Content-Security-Policy, is it set by Shopify or the developer?

[laksh]

After doing a lot of research I found 2 links that helped to fix this problem. I hope it helps you too.

1. https://shopify.dev/tools/app-bridge/getting-started#authenticate-with-oauth
2. https://github.com/Shopify/shopify_app/wiki/Using-postMessage-during-embedded-app-authenticate

Good luck.

[DanielLabs]

Please, could you explain what was you doing wrong... I didn't understand where is the problem.

[laksh]

You need to use postMessage (javascript function) to escape from this problem. You cannot do authentication in the backend.