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?
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.