Ad

Violates The Following Content Security Policy Directive: *** In Shopify

I made a custom App for Shopify. But I got the below error when I set up the application AWS EC2.

Refused to frame 'https://***.com:2053/' because it violates the following Content Security Policy directive: "frame-src app.myshopify.io *.shopifyapps.com .myshopify.io .myshopify.com https:// shopify-pos://".

Curiously, when I use Ngrok on the EC2, it works well. On the other hand, when I use the original domain, it doesn't work and I get the error. I have already set up an SSL with Certbot. I confirmed to connect to my domain directly, not via shopify app. I made it referred to this site: https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react.

I have been researching it for a week tho, I have no clue to resolve it. Do you guys have the same experience and do you know how to resolve it?

Ad

Answer

The CSP includes https://. According to the specification this does not mean HTTPS on arbitrary ports, but only on default port 443.

Your custom app instead uses https://...:2053 which matches the allowed protocol but does not match the allowed port. When using ngrok both protocol and port match since ngrok is using the default port 443.

Ad
source: stackoverflow.com
Ad