Can't Get Ky Custom Referrer Policy Working

[LuisOsta]

I have the client of a website (Next.js) and the API (Express) hosted on different domains. And I'd need the API to be able to send a cookie to the client. I've got that working (I think) but all requests are blocked by chrome's default

strict-origin-when-cross-origin

And I think you should be able to customize that for your website so it has a different referrer policy but it doesn't work at all. Is the below code not do it?

So I've got this custom ky instance setup:

export let kyInstance = ky.create({
  prefixUrl,
  referrerPolicy: "no-referrer-when-downgrade",
  credentials: "include",
});

[sholladay]

Ky has no special handling for referrerPolicy, so it works the same as fetch does in this case.

but all requests are blocked by chrome's default strict-origin-when-cross-origin

No, referrerPolicy does not have any influence on whether requests will be blocked. It only controls the value of the HTTP Referer header, which is optional and just informational. That's all it does.

Since you're trying to use referrerPolicy: 'no-referrer-when-downgrade', I'm guessing that you are trying to fetch an http: URL from an https: page. That is not going to work because, these days, most browsers do not allow mixed content. So, in summary, it's your URLs, not your referrerPolicy, that is causing the problem, from what I can tell. Try to use HTTPS everywhere and it should work, with or without the referrerPolicy. It's relatively easy to set that up these days, even on localhost, so check out this tutorial if you need some help.

[LuisOsta]

Hey, thanks for the quick response!

Actually what I'm trying to get to work is to have cross-domain cookies (API hosted in domain X and client in domain Y). With the client being a Next.js application.

The issue is that I can't get it working with a '*' origin due to Chrome's default referral policy. Is that not possible to override for our specific website?

The reason that I wanted to get it working with '*' is so that it works with localhost of course.

[sholladay]

You're welcome! :)

Referrer Policy has nothing to do with cookies, either. These things are unrelated.

When you mention an origin of *, it sounds like you might be talking about CORS, which also has nothing to do with Referrer Policy. However, cross-domain requests can indeed be blocked if CORS is not set up correctly. Sounds like that might be the problem.

Is it possible you are confusing Referrer Policy with the Access-Control-Allow-Origin header? That's something you set on the server-side, not in the browser. If you set that to * in a server endpoint, then any domain will be allowed to make a fetch request to that endpoint. And it follows then that if that endpoint is trying to set a cookie, that would hopefully then succeed.

[LuisOsta]

Ah okay. So where I got confused was this - https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default#:~:text=strict%2Dorigin%2Dwhen%2Dcross%2Dorigin%20offers%20more%20privacy,the%20path%20and%20query%20string.

And so the issue with the star origin is that you can't have the credentials (and thus cookies). With '*' origin. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials.

So I was hoping that as I saw in the first post I linked that if I could customize the referrer-policy, I'd be able to get the credentials to work with the '*' origin.

[sholladay]

Got it. Yes, what's allowed by default for cross-origin requests is extremely limited. Cookies can be sent from browser to server by using credentials: 'include' in the browser, as you've done, but in order for the server's response to be readable in the browser, the server must explicitly allow it by responding with both of the following headers:

• Access-Control-Allow-Origin set to a specific origin (not *)
• Access-Control-Allow-Credentials set to true

While there's no way to make Access-Control-Allow-Origin: * work with credentials, the solution is pretty simple. All the server has to do is read the Origin request header and copy its value to the Access-Control-Allow-Origin response header. (Whatever you do, don't use the Referrer header for this! That would be insecure.)

Hope that helps. :)

[LuisOsta]

That's brilliant actually! Can't believe I hadn't thought of that. Thanks!