Cookies for static site: Cookie will be soon rejected(SameSite) issue

Question

I am creating a static website (to be published on github pages) and want to use cookies to store website state for the user. But I get the following error while setting cookies:

Cookie “buttonState” will be soon rejected because it has the “sameSite” attribute set to “none” or an invalid value, without the “secure” attribute. To know more about the “sameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite

I have been using following js code to set cookies:

function set_cookies(jsonObj={},expires="",path="/"){
for(var key in jsonObj){
    var temp = (key+"="+jsonObj[key]+";");
    if(expires!=="")
        temp += ("expires="+expires+";");
    if(path!=="")
        temp+= ("path="+path);
    console.log(temp);
    document.cookie = temp;
  }
}
set_cookies({"buttonState":"compile");

How do I address this issue?

Answer 1

I've been dealing with this very thing on cookies on our website as well. You need to append ";sameSite=Lax" to your temp variable. That's what browsers expect to see now. According to the link you provided, Mozilla documentation says, the definition for Lax is:

"Cookies are allowed to be sent with top-level navigations and will be sent along with GET request initiated by third party website. This is the default value in modern browsers."

And later, under None, it says:

"None used to be the default value, but recent browser versions made Lax the default value to have reasonably robust defense against some classes of cross-site request forgery (CSRF) attacks."

And later, under one of the examples, it says:

"While you could rely on modern browsers to apply SameSite=Lax automatically, you should rather specify it explicitly to clearly communicate your intent which SameSite policy applies to your cookie. This will also improve the experience across browsers as not all of them default to Lax yet."