App reviews, troubleshooting, and recommendations
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.
did you managed that and how? Thanks
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
Thank you!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025