Customize dev server response HTTP headers

[denis-sokolov]

I would like to be able to customize the response HTTP headers that the Snowpack development server produces.

My use case is to test how my application behaves with the HTTP headers I will be using in production. This includes security headers Content-Security-Policy, Feature-Policy, X-Content-Type-Options, and others, but also non-security headers like Content-Type, X-UA-Compatible, and others.

In its simplest form, it could work by setting the headers to be added to HTTP requests to snowpack.config.js:

module.exports = {
  devOptions: {
    responseHeaders: {
      "Feature-Policy": "..."
    }
  }
}

Ideally we’d be able to provide a more powerful form to tweak the headers per path:

module.exports = {
  devOptions: {
    responseHeaders: {
      "*.html": {
        "Feature-Policy": "..."
      }
    }
  }
}

// Alternatively
module.exports = {
  devOptions: {
    responseHeaders: ({ path }) => {
      return {
        "Feature-Policy": "..."
      };
    }
  }
}

It seems that this feature would be of low risk to interact with other features and can thus be added at low risk.

https://github.com/snowpackjs/snowpack/blob/76dca31aa0518d5e672e5f81ef272726db420202/snowpack/src/commands/dev.ts#L142-L155

[awmcclain]

This would be clutch for us!

[FredKSchott]

Agreed! @Birch-san kicked off a PR to explore this, would love your all feedback in #3030

[colelawrence]

The PR there seems to have stalled over the last 45 days. Any chance we might might be able to have a smaller change for simpler overrides via the snowpack.config.js file under devOptions? I think we just need a headers key.

[thom4parisot]

It would be nice! Especially to configure CSP policies.

I have tried by tweaking the response in snowpack.config.cjs but it does not seem to apply plugin into the response:

module.exports = {
  // ...

  routes: [
    {
      "match": "routes",
      "src": ".*",
      // "dest": "index.html"
      "dest": (req, res) => {
        const indexFile = join('public', 'index.html')
        res.setHeader('content-type', 'text/html')
        res.setHeader('Accept-Ranges', 'bytes')
        res.setHeader('Access-Control-Allow-Origin', '*')
        res.setHeader('Content-Security-Policy', 'frame-ancestors localhost:3000 localhost:3060')
        return createReadStream(indexFile).pipe(res)
      }
    }
  ],

  // ...
}
`

[sanmai-NL]

You can also set CSP from the HTML document.

[michaelfig]

I can't use Snowpack for development because I need to set COOP+COEP headers (Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy) to enable SharedArrayBuffer+postMessage for my PWA, and meta http-equiv can't do that.

Is there any way forward?

[worstpractice]

@michaelfig dirty hack available here

[samueljseay]

I had this issue today, and just in case it helps anyone, I wrote a Snowpack plugin that spins up a proxy and lets you override headers. Here's the gist: https://gist.github.com/samueljseay/9d729d25707f8d975160bf389e637c4b

You'll see it in the gist but you'll need to disable the auto page open option in snowpack as the custom headers plugin will now open the correct page.

Also left as exercise for reader, you could quite easily modify this to only send headers per certain request type as suggested by OP.

[samueljseay]

I've published an npm package for the plugin. Please let me know if y'all get around to testing it. I'll do my best to fix issues promptly. https://github.com/samueljseay/snowpack-custom-headers