I have finally found a working solution (all code changes are made in server.js):
I'm using the npm package koa-helmet (v6.1.0) (not necessary, can also be done without)
import helmet from "koa-helmet";
and almost right after the app.prepare statement, I have defined a new middleware function called setContentSecurityHeader. The problem with my other solution before was, that it has not always initialized the Clickjacking header correctly, especially before authentication, the header has not been set.
app.prepare().then(async () => {
const server = new Koa();
const router = new Router();
const setContentSecurityHeader = (ctx, next) => {
// Cookie is set after auth
if (ctx.cookies.get("shopOrigin")) {
return helmet.contentSecurityPolicy({
directives: {
defaultSrc: helmet.contentSecurityPolicy.dangerouslyDisableDefaultSrc,
frameAncestors: [
`https://${ctx.cookies.get("shopOrigin")}`,
"https://admin.shopify.com",
],
},
})(ctx, next);
} else {
// Before auth => no cookie set...
return helmet.contentSecurityPolicy({
directives: {
defaultSrc: helmet.contentSecurityPolicy.dangerouslyDisableDefaultSrc,
frameAncestors: [
`https://${ctx.query.shop}`,
"https://admin.shopify.com",
],
},
})(ctx, next);
}
};
server.use(setContentSecurityHeader);
And as a final step, I initialize a cookie right after authentication. This cookie ensures, that the header is set correctly for each following request after authentication.
server.use(
createShopifyAuth({
async afterAuth(ctx) {
const { shop, accessToken, scope } = ctx.state.shopify;
// set shopOrigin cookie, so it can be used for click jacking header
ctx.cookies.set("shopOrigin", shop, {
httpOnly: false,
secure: true,
sameSite: "none",
});
const host = ctx.query.host;
ACTIVE_SHOPIFY_SHOPS[shop] = scope;
Hope this helps.
