Custom headers on HTTP 200 redirects

I’m running SvelteKit with the Netlify adapter. It generates the following _redirects file:

* /.netlify/functions/render 200

It also generates the following _headers file:

  cache-control: public
  cache-control: immutable
  cache-control: max-age=31536000

I can append custom rules to the generated _headers file. For Hoeveel kost de brandstof van mijn autorit?, I’m trying to add a custom Referrer-Policy header so that API calls on that page receive a Referer header. This is a safety measure from the API I’m using to ensure only my site can use the API key.

I even tried the following, which had no effect on the page:

  referrer-policy: origin

How do I configure my site correctly?

Hey @codemonkey

It is possible to have signed proxy redirects and also possible to have per redirect headers such as this example.

But while you have mentioned an API, I see no redirect e.g.

/api/*    200

The issue then comes down to the fact the redirect rule for the SSR points all traffic to the render function such that any rule defined after it in _redirects or netlify.toml will fail to trigger so you would need to prepend rather than append to the _redirects file.

What I don’t know (because I haven’t tried) is if you have a _redirects file in your project if the SvelteKit Netlify Adapter will append the render rule to it or overwrite it.

I have a _headers file which includes the Referrer-Policy header and this is applied to everything.

The external API I mentioned calls the endpoint directly, so for that XHR call no relaying/proxying/redirecting is currently involved. For authentication purposes, I’m attaching an API key to the query string and the browser needs to report the Referer: header on the request.

Interesting you mention that though. So instead of doing an XHR call directly to the external API, I could add a proxy redirect at which relays the request with the API token attached to it? I like that I’d be able to keep the API token confidential that way, but on the other hand I also want my local development environment to remain as production-like as possible.

Is there any way I can apply the Referrer-Policy header to the specific webpage that does the external API call, or at least every webpage that’s affected by the * /.netlify/functions/render 200 redirect? In my local development environment the Referer already gets sent, so the problem only exists in my production setup.

If you are calling the API directly client-side, Netlify cannot affect the headers. That is the browser making the call. If you are using fetch you could add headers to that call though.

If you have an API key/token it is best not to have this included in any front-end code as anyone can see what it is. Accessing the API via a function, or signed redirect is the better option. How this would with SvelkeKit I cannot say though.

If you want to better replicate a live Netlify environment try Netlify CLI.

1 Like

Netlify only needs to affect the header of the webpage that does the XHR call for this to work, I believe. If I understand Referrer-Policy correctly, I can include it in the HTTP response of the webpage that serves the XHR call so the browser knows it’s allowed to include the required Referer header.

I’ll take you up on the signed redirect idea though. I suppose that even in my local development environment I could just do the XHR call to if CORS allows so.

1 Like

I’ve come full circle and implemented a SvelteKit endpoint for the API call. That way I can shield off the API key and have a fully self-contained development environment, all without having to include the @netlify/functions dependency. Thanks for steering me in the right direction!

1 Like