[Bug]: Codespaces `app dev` CSP error

[aaronadamsCA]

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App

Expected behavior

shopify app dev should work correctly in a Codespaces environment.

Actual behavior

The Shopify embedded app iframe shows "github.com refused to connect." The error message is:

Refused to frame 'https://github.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

The root cause seems to be that GitHub auth cookies have SameSite=Lax, so the iframe will never see them.

I can work around it with CODESPACE_NAME= pnpm exec shopify app dev to force a Cloudflare tunnel (side note, I'd love a better way to configure the tunnel).

Verbose output

N/A

Reproduction steps

1. Start the embedded app template in Codespaces.
2. Run shopify app dev and open the preview URL.

Operating System

Codespaces

Shopify CLI version (shopify --version)

@shopify/cli/3.83.2

Shell

No response

Node version (run node -v if you're not sure)

No response

What language and version are you using in your application?

No response

[isaacroldan]

Thanks for the report @aaronadamsCA, i'll add a internal note to fix this, but since there is an easy workaround i'll mark it as non-urgent.

When you say "a better way to configure the tunnel", what do you have in mind? what config would be useful to have?

[github-actions]

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action.
→ If there's no activity within a week, then a bot will automatically close this.
Thanks for helping to improve Shopify's dev tooling and experience.

P.S. You can learn more about why we stale issues here.

[zigojacko2]

Oh wow, I have spent the last two bloody days battling this problem trying to load the app in Shopify backend from a development environment in Github Codespaces! I couldn't even get a Cloudflare Quick Tunnel to work.

This should not be closed and developing in Codespaces with Shopify CLI should NOT be this challenging! I have given up with it now as nothing I tried worked. Plan to look at Ngrok hoping this may allow me to get somewhere with it.

Definitely should not be marked as non-urgent @isaacroldan this just basically does not work following any documentation I could find. If there is an easy workaround, it would be really good if someone could actually document this somewhere!

[opplearner]

Is there a workaround for this issue? I am trying to create app using Codespaces for Shopify but every time i run the app, i get the same error: “Framing 'https://github.com/' violates the Content Security Policy directive: 'frame-ancestors 'none''. The request has been blocked.” I cannot use other options like ngrok and cloudflare.

[github-actions]

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action.
→ If there's no activity within a week, then a bot will automatically close this.
Thanks for helping to improve Shopify's dev tooling and experience.

P.S. You can learn more about why we stale issues here.

[zigojacko2]

If it hasn't been fixed then it is obviously still an issue.

I personally cannot confirm because I sacked off Codespaces as it was too problematic and difficult to work with the Shopify CLI.

[aaronadamsCA]

OP here again, trying to use this CLI again. I don't mean to offend, but it's a nightmare. 😅

• Codespaces tunnels are still broken out of the box.
• Cloudflare tunnels are now broken too, I just get Error forwarding web request: connect ECONNREFUSED.
• --tunnel-url is ignored in Codespaces unless I also set CODESPACE_NAME=.
• I have to append a random unused port number to the tunnel URL to trick it into letting me use the ngrok tunnel I'm already setting up myself.

Since I also need to skip dependency installation (the app lives in a pnpm workspace), that gives us this monster command just to start a dev session:

CODESPACE_NAME= pnpm exec shopify app dev --config=staging --skip-dependencies-installation --tunnel-url="https://myapp.myorg.ngrok.dev:8080"

None of this feels right.

When you say "a better way to configure the tunnel", what do you have in mind? what config would be useful to have?

Well, shopify app dev has exactly one feature I care about: temporarily changing the app URL for a single dev store. Everything else just gets in the way of a good dev experience.

If I could pass --tunnel-url=https://myapp.myorg.ngrok.dev with no port number, and the CLI simply used that URL—great.

If there really needs to be more, maybe it could be configurable in the shopify.web.toml file, and ideally I'd be able to turn it all off (along with all the other stuff I don't want).