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

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

ThangCQ
Shopify Partner
29 3 7

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.

Screen Shot 2024-01-17 at 17.21.25.png

Replies 4 (4)

Samia_Akram22
Shopify Partner
60 10 15

@ThangCQ  

It seems like the issue is related to the Content-Security-Policy (CSP) header being set differently in Chrome and Edge compared to Safari. The function you provided from Shopify's app Remix code is attempting to set the CSP header to allow framing within the specified domains.

However, in your case, it appears that in Chrome and Edge, the default CSP header is being applied, which might be overriding the custom headers set by your app.

Here are a few suggestions to investigate and resolve the issue:

1. Check for Overrides:
Ensure that there are no other parts of your code or external scripts that may be overriding the CSP headers set by your app. Look for any conflicting headers set elsewhere in your app or in the server configuration.

2. Browser Console:
Use the browser's developer tools console to inspect network requests and headers. Check if there are any warnings or errors related to CSP headers that might provide more details on why the custom headers are not being applied in Chrome and Edge.

3. Meta Tag in HTML:
Consider adding a meta tag in the HTML of your app's pages to set the CSP policy. While this is typically set in the server response headers, adding it directly to the HTML may help in some cases.

```html
<meta http-equiv="Content-Security-Policy" content="frame-ancestors https://your-shop.myshopify.com;">
```

4. Server Configuration:
Review your server configuration to ensure that it's correctly sending the headers. Double-check the logic in the server code that sets the headers and make sure it's being executed as expected.

5. Browser Compatibility:
Check if there are any known issues or differences in how Chrome and Edge handle certain CSP directives. Sometimes, browser-specific quirks may require adjustments in your implementation.

6. Shopify App Settings:
Verify that your Shopify app settings, especially those related to security and embedding, are configured correctly. Ensure that your app is allowed to be embedded in the Shopify admin and that the necessary permissions are granted.

 

Problem Solved? ✔Accept and Like solutions to help future merchants.

satellite7
Shopify Partner
2 0 0

did you managed that and how? Thanks

ThangCQ
Shopify Partner
29 3 7

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
Shopify Partner
2 0 0

Thank you!