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

[VuongNQ]

Describe the bug

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

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]

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]

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]

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.

[VuongNQ]

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]

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

2. Edit Caddyfile

$ vim /opt/homebrew/etc/Caddyfile

3. Add the following in the file and save with :wq

   app.localhost {
   tls internal
   reverse_proxy localhost:3000
   }

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

[VuongNQ]

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

[dsychin]

@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
                }
        }
}