Impossible to make dynamic API response security headers based on the current authenticated user

[ctrlaltdylan]

Background

Shopify renders apps within an iframe.

And they have started to become more strict on Content Security Policies, namely the frame-ancestor.

More information on this policy here: https://shopify.dev/apps/store/security/iframe-protection

Long story short, the CSP header is dependent on the currently logged in Shopify store. So if ctrlaltdylan.myshopify.com is logged in, then the headers need to be as followed:

Content-Security-Policy: frame-ancestors https://ctrlaltdylan.myshopify.com;

My middleware solution injects the current logged in store into the req object.

Next.js offers API response header customization, however the request is not passed to this headers() function available in the next.config.js.

This means that isn't not possible to dynamically adjust headers based on the request and the authenticated shop.

Other workarounds?

No. Unfortunately the res object in the API routes do not offer a method to alter the headers either.

No workarounds seem to be possible.

[gustavostz]

Yeah, as you mentioned, the res object in the API routes does not offer a method to alter the headers.

But maybe there is a way to deal with it, one workaround that you could try is to send the current store information as a part of the API response data, and then use JavaScript to set the headers dynamically on the client side.

Here's how you could implement this workaround:

1. Modify your API route to include the current store information in the response data:

app.get('/api/store-info', (req, res) => {
  res.json({
    store: req.store
  });
});

2. On the client side, use the store information to dynamically set the headers when the API response is received:

fetch('/api/store-info')
  .then(response => response.json())
  .then(data => {
    const store = data.store;
    const headerValue = `frame-ancestors https://${store}.myshopify.com`;
    document.head.append(`<meta http-equiv="Content-Security-Policy" content="${headerValue}">`);
  });

This should allow you to dynamically set the headers based on the current store information, without the need for the request object to be available in the headers() function :)

[ctrlaltdylan]

I'll certainly try this approach, but I'm not sure if client side header modification that will comply with this CSP policy.

Shopify is checking for this header during the initial OAuth handshake, I wonder if one of those steps is a server to server call or where they are calling my API directly and I cannot specify that their client should alter headers.

[gustavostz]

Yeah, it's possible that Shopify checks the headers during the OAuth handshake, which might not allow for client-side header modification, so this approach might not work. But it's worth a leap of faith ahaha.

Another approach that you could try is to serve the API response from a different domain that you control, and set the headers dynamically on the server side for that domain.

For example, you could serve the API response from api.example.com, and set the headers dynamically based on the current store information. This would allow you to comply with the CSP policy requirements set by Shopify, as you would be able to set the headers on the server side. However, this will require much more work