Content-Security-Policy problem for Shopify app in Chrome, not in Safari

[ThangCQ]

I'm developing an Shopify app which embed in Shopify admin page. I have deployed it to manual server with url "https://{hostname}:8000"

The problem is when I install it in my development store, I met the error "This content is blocked. Contact the site owner to fix the issue."(image below). This issue happen in Chrome, Edge. But in Safari, it work well.

Then I find out that problem laid on "Content-Security-Policy" header. In detail:

- The app install and run successfully (without :{port} in appUrl, or run in Safari), Content-Security-Policy header would be (it is like Iframe-protection 😞 

"Content-Security-Policy":"frame-ancestors https://{shop-name}.myshopify.com https://admin.shopify.com https://*.spin.dev;"

- But in my app, which run fail, Content-Security-Policy header was:

"Content-Security-Policy":"frame-ancestors https://admin.shopify.com; default-src 'self' https://cdn.shopify.com https://cdn.shopifycdn.net; frame-src https://*;base-uri 'self'; object-src 'none'; img-src 'self' data: https://*; style-src 'self' 'unsafe-inline' https://cdn.shopify.com https://cdn.shopifycdn.net cdn.shopify.com; font-src 'self' https://fonts.shopifycdn.com https://cdn.shopify.com https://cdn.shopifycdn.net cdn.shopify.com; script-src 'self' https://cdn.shopify.com https://cdn.shopifycdn.net 'nonce-c0e1f1f0-c397-4b0d-98be-62f4ad901404'; connect-src 'self' online-store-web.shopifyapps.com https://notify.bugsnag.com https://analytics.shopify.com https://burst.shopify.com spellbook.shopify.ai wss://argus.shopifycloud.com https://shopify.s3.amazonaws.com https://shopify-staged-uploads.storage.googleapis.com monorail-edge.shopifysvc.com monorail-edge-ca.shopifycloud.com; worker-src 'self' blob:; form-action 'self'; script-src-attr 'none'; upgrade-insecure-requests"

it is like a default Content-Security-Policy header (I'm not sure).

I checked in Shopify app Remix code, they handled this by use function 

function addDocumentResponseHeaders(headers, isEmbeddedApp, shop) {
  if (shop) {
    headers.set('Link', '<https://cdn.shopify.com/shopifycloud/app-bridge.js>; rel="preload"; as="script";');
  }
  if (isEmbeddedApp) {
    if (shop) {
      headers.set('Content-Security-Policy', `frame-ancestors https://${shop} https://admin.shopify.com https://*.spin.dev;`);
    }
  } else {
    headers.set('Content-Security-Policy', `frame-ancestors 'none';`);
  }
}

I wonder why in Chrome, the Content-Security-Policy header is like default.

Anyone who know what happen, could you please explain that for me. Thank you so much much much.

 

[satellite7]

did you managed that and how? Thanks

[ThangCQ]

From what I can recall,

Before, I deployed 2 servers in a host, and use 2 ports correspond to 2 servers. And there is some problem with proxy inside the app, which make the incorrect response, and lead to this error.

To handle it, I deployed 2 servers in 2 separated hosts. And I remember it work

[satellite7]

Thank you!