I have a hyperlink doing calling a node express API on heroku. The API sets a session cookie and redirects back the url of a single page application (frontend). The backend API is located on a different domain than the application frontend.
This works fine with
- Chrome 92 Dektop
- Firefox 91 Dektop
- Safari on IOS
- Opera on IOS
But the cookie is not set on
- Chrome for IOS
- Firefox on IOS
Chrome IOS and Firefox IOS will only do the redirect if I move the backend and Frontend on the same domain. This should nit be a requirement since the cookie is set with Secure
, HttpOnly
and SameSite=None
. I suspect that the SameSite
attribute is not set correctly or defaulted to Lax
. I've tried some workarounds for old browsers but without success.
I use the code below to set the cookie on Node on my backend:
res.cookie('session', {
// some data
}, {
secure: true,
httpOnly: true,
sameSite: 'None',
maxAge: 24 * 60 * 60 * 1000, // 24 hours
signed: true
})
res.redirect(302, myRedirectUrl);
Express is configured as below:
// Enable CORS
app.use(cors({
credentials: true, // Must be true for cookies to work.
origin: true // Required if 'credentials' is true.
}));
// Initialize cookie parser used for session cookie.
app.use(cookieParser(process.env.COOKIE_PARSER_SECRET))
Once the backend has redirected, I fetch the API from teh frontend with HttpClient which is setup as below. No cokkies are passed with the requests.
this.http = new HttpClient();
this.http.configure(config => {
config.withBaseUrl(this.apiUrl)
.withDefaults({
headers: {
'Pragma': 'no-cache',
'Cache-Control': 'no-cache'
},
credentials: 'include'
})
.rejectErrorResponses()
});