Blocked by Content Security Policy (FireFox)

Highlighted
Shopify Partner
4 0 1

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

0 Likes
Highlighted

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?

SPO - SEO App to research keywords & edit social link preview
0 Likes
Highlighted
Shopify Partner
4 0 1

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.

0 Likes
Highlighted
New Member
1 0 0

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

0 Likes
Highlighted
Shopify Partner
4 0 1

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

 

1 Like