We run a WordPress blog on a subdomain e.g. blog.shop.com
Previously we had a minimal page on shop.com that contained just the basket count and iframed that on blog.shop.com which allowed us to show the users basket count on the subdomain. That request is being blocked by your X-Frame-Options headers.
Am now looking at using cart.js to get the cart total - but that's now being blocked by CORS policy. ( as outlined below) :
What's the best approach for showing the users basket total on a subdomain.
Solved! Go to the solution
To add some more detail.
Previously we loaded a very paired back page in an <iframe> which just included the basket count. Example of this below:
Refused to frame 'https://www.scp.co.uk/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".
Believe this is due to the following header that Shopify is serving on the file.
If I add a meta tag to the 'remote-cart' page in Shopify this seems to make no difference, e.g.
<meta http-equiv="Content-Security-Policy" content="child-src https://news.scp.co.uk; frame-ancestors https://www.scp.co.uk;">
Access to XMLHttpRequest at 'hhttps://www.scp.co.uk/cart.js' from origin 'https://news.scp.co.uk' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
@scottydont ah nice one - that's worked!
For anyone else stuck, it's cart.json to request via JSONP not cart.js
/* do something with the data. In this example we are just loggin it */