Why do I keep getting a warning: A cookie associated with a resource at http://127.0.0.1/ was set with `SameSite=None` but without `Secure`

Question

Full warning message:

A cookie associated with a resource at http://127.0.0.1/ was set with `SameSite=None` but without `Secure`. A future release of Chrome will only deliver cookies marked `SameSite=None` if they are also marked `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5633521622188032. 

However, I set cookies like:

res.cookie("token", token, {httpOnly: true, sameSite: 'none', secure: true});

Is there a way to get rid of this warning?

Answer 1

For a cookie required in a third-party or cross-site context, you should set both SameSite=None and Secure , as you are doing in your original example.

First question though - do you definitely need this cookie to be cross-site? In other words, are you expecting different sites to make a request to yours that require this cookie to be sent? Examples here would be if your site is embedded within an iframe on another site, hosting images where you want to have cookies included, or creating a token for additional security on a cross-site form submission.

If not, consider SameSite=Lax for this cookie instead. That way it will only be sent for requests within your site.

However, when you are developing on 127.0.0.1 or localhost you generally do not have a certificate for a valid HTTPS connection. I would suggest, in Express, using app.get('env); to get your current environment ( 'development' or 'production' ) and then using that to choose if you set Secure or not.

For example:

const express = require('express');
const app = express();

if (app.get('env') !== 'development') {
  // production settings, assume HTTPS
  app.set('cookie config', { httpOnly: true, sameSite: 'lax', secure: true });
} else {
  // development settings, no HTTPS
  app.set('cookie config', { httpOnly: true, sameSite: 'lax' });
}

// Later on when setting a cookie within your route, middleware, etc.
res.cookie('token', token, app.get('cookie config'));

You could also set up multiple cookie configs if you have different use cases on your site.

if (app.get('env') !== 'development') {
  // production settings, assume HTTPS
  app.set('cookie config 1p', { httpOnly: true, sameSite: 'lax', secure: true });
  app.set('cookie config 3p', { httpOnly: true, sameSite: 'none', secure: true });
} else {
  // development settings, no HTTPS
  app.set('cookie config 1p', { httpOnly: true, sameSite: 'lax' });
  // Assumes that I'm hosting all my test sites under localhost,
  // so the browser won't actually see them as 3p
  app.set('cookie config 3p', { httpOnly: true, sameSite: 'lax' });
}

You could also look up creating a self-signed certificate for your localhost environment, but that can be a bit of a pain. If you're going to do that, the effort might be better put into using some kind of container or vm for development.