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.
