I have an embedded Shopify application with React (Polaris) on the frontend and Node (Koa.js) on the backend. One feature of the application is to export some information as an Excel spreadsheet.
To generate the file, I'm using the xlsx package and file-saver to download it. Everything works fine in Chrome (v 80.0.3987.132), but in Firefox (v 73.0) I get the following error when I click on the button to download the file:
Content Security Policy: The page’s settings blocked the loading of a resource at blob:https://... (“frame-src”).
As this is an embedded application, it is running inside an iframe. Based on the error message I thought that the Content Security Policy for blobs inside an iframe is blocking the file to be downloaded so I added koa-helmet to my backend with the following settings:
const Koa = require('koa');
const KoaHelmet = require('koa-helmet');
const server = new Koa();
server.use(KoaHelmet({
frameguard: false,
contentSecurityPolicy: {
directives: {
frameSrc: ["'blob'"]
}
}
}));
I also tried frameSrc: ["'blob:'"], frameSrc: ["'blob:;'"], 'frame-src': ["'blob'"], 'frame-src': ["'blob:'"], 'frame-src': ["'blob:;'"] but none of these solved the problem.
What am I missing?