Content Security Policy (CSP) Error when Deploying to Shopify from Fly.io"

Questions / Help
1

Hey Fly.io Community,

I hope this message finds you well! I wanted to share an issue I recently encountered when deploying an app to Fly.io. I’m hoping to gain some insights from the community.

Problem Description:

When deploying my embedded app to Shopify through Fly.io, I encountered the following error message:

Background:

The peculiar aspect of this issue is that the app works perfectly fine when tested locally. This suggests that the issue is specific to the deployment on Fly.io.

Upon reviewing the logs from Fly.io, the application installs on my test store. However, with any subsequent calls after the initial one, I receive NS_BINDING_ABORTED and NS_ERROR_CSP_FRAME_ANCESTOR_VIOLATION errors on any network calls to the application from Firefox.

In Chrome I get this error:

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

I have disabled any CSP headers coming from my express server.

Attempted Solution:

I attempted to adjust the Content Security Policy (CSP) headers in the fly.toml file as recommended in the Fly.io documentation. Specifically, I set the frame-ancestors directive to allow framing from the same origin ('self') and from https://admin.shopify.com. Unfortunately, the issue persists.

Here is the relevant portion at my attempt in my fly.toml:

[http_service]
  [[http_service.routes]]
    handle = "allow-framing"
    match = "Host(`######.fly.dev`)"
    [http_service.routes.headers]
      Content-Security-Policy = "frame-ancestors 'self' https://admin.shopify.com;"

This Is My Toml Config file.

app = "########"
primary_region = "lax"

[build]

[env]
  LOG_LEVEL = "debug"
  HOST = "https://#########.fly.dev"
  NODE_ENV = "production"
  PORT = "8081"
  SCOPES = "write_products,read_content,write_content"
  SHOPIFY_API_KEY = "################"
  SHOPIFY_API_SECRET = "#############"


[[services]]
  internal_port = 8081

[[services.ports]]
  handlers = ["http"]
  port = 80
  force_https = true  # optional
[[services.ports]]
  handlers = ["tls", "http"]
  port = "443"

[deploy]
  strategy = "rolling"

Looking for Solutions:

I’m reaching out to the community in the hopes that someone might have encountered a similar issue or have insights into resolving it. Is there something I might be missing in my configuration, or is there another approach I should consider?

Any help or guidance on this matter would be greatly appreciated.

Thank you in advance for your time and assistance!

Warm regards,

2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.