Shopify/shopify-app-bridge

Content-Security-Policy: The page’s settings blocked the loading of a resource (frame-src) ❗❗❗

Opened this issue · 7 comments

VuongNQ commented

Describe the bug

At now, I can't run source app embed on local
Image

My team can't do anything because we all using app embed. Please fix as soon as possible!!!

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

  • @shopify/app-bridge @ CDN
  • @shopify/app-bridge-react @ ^4.1.3
  • @shopify/polaris @ 12.25.0

Platform

  System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i3-8100 CPU @ 3.60GHz
    Memory: 7.36 GB / 15.87 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.0.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.10.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (123.0.2420.81)
    Internet Explorer: 11.0.19041.1566
arunaugustine commented

This is causing issues for our team too! We use https://localhost:3000 for embedded app so that we need not use the tunnel and one app per developer in the team.

VuongNQ commented

I think we can try create an host local by using nginx and config proxy forward to app local
Our team had try on this way because we really hate cloudflare-tunnel or ngrok for coding on local

arunaugustine commented

I think we can try create an host local by using nginx and config proxy forward to app local Our team had try on this way because we really hate loudflare-tunnel or ngrok for coding on local

same! tunnels are finicky, plus you need one app per developer in your team for the tunnel approach.

  • 👍1
VuongNQ commented

I think we can try create an host local by using nginx and config proxy forward to app local Our team had try on this way because we really hate loudflare-tunnel or ngrok for coding on local

same! tunnels are finicky, plus you need one app per developer in your team for the tunnel approach.

I'm not expert of using nginx but my point is base on below this article
nginx proxy

arunaugustine commented

I found a workaround based on your suggestion @VuongNQ but using Caddy instead of Nginx because it's setup is easier (atleat for Mac).

  1. Install caddy on your dev machine (assuming Mac):

$ brew install caddy nss

  1. Edit Caddyfile

$ vim /opt/homebrew/etc/Caddyfile

  1. Add the following in the file and save with :wq
app.localhost {
 tls internal
 reverse_proxy localhost:3000
}
  1. Start Caddy service via homebrew
brew services start caddy

Use brew services restart caddy in case you make changes to Caddyfile

Change dev app url to app.localhost, confirm that this url is accessible via browser and reload your dev app and things should work now.

In case you were using remix and had set https: true in vite.config.js, turn that to false because Caddy will take care of https for us now. Also in case you were using protocol "wss" for hmrConfig in localhost dev, change that to ws.

  • 🎉2
VuongNQ commented

@arunaugustine great job, I had write guide using nginx on window too, check it out
https://gist.github.com/VuongNQ/741c6eabe925d9678d31c5a3f463c3ff

dsychin commented

@arunaugustine Caddy method works. In my case, I had to modify the Caddyfile to work with https on localhost because I didn't want to change my existing config.

app.localhost {
        tls internal
        reverse_proxy localhost:3000 {
                transport http {
                        tls
                        tls_insecure_skip_verify
                }
        }
}
  • 🎉2