I’m running SvelteKit with the Netlify adapter. It generates the following
* /.netlify/functions/render 200
It also generates the following
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:
How do I configure my site correctly?
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/* https://api.example.com/:splat 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
netlify.toml will fail to trigger so you would need to prepend rather than append to the
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 https://dev.virtualearth.net/REST/v1/Routes 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: https://snelberekend.be 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 https://snelberekend.be/api/routes 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.
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
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 https://snelberekend.be/api/routes if CORS allows so.
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!