73

I have tried to set a cookie using document.cookie = "tagname = test; secure" but this does not set the secure flag. Am I setting it wrong? Can you only set it from a server response? I am also wondering that, because I have had a difficult time finding an example of its use, that it probably is not commonly used?

Thanks a bunch!

Aᴍɪʀ
  • 7,623
  • 3
  • 38
  • 52
BobtheMagicMoose
  • 2,246
  • 3
  • 19
  • 27

5 Answers5

109

TL:DR

document.cookie = "tagname = test;secure";

You have to use HTTPS to set a secure attribute

The normal (or formal, maybe) name is attribute. Since the flag refers to other things.

More Info

Cookie attributes:

Secure - Cookie will be sent in HTTPS transmission only.

HttpOnly- Don't allow scripts to access cookie. You can set both of the Secure and HttpOnly.

Domain- specify the hosts to which the cookie will be sent.

Path - create scopes, cookie will be sent only if the path matches.

Expires - indicates the maximum lifetime of the cookie.

More details and practical usages. Check Testing_for_cookies_attributes_(OTG-SESS-002)

UPDATES The following contents expire in June 2, 2016.

Cookie Flags

Cookie flags are prefixes. At the moment, they are described in the RFC draft as a update to the RFC6265

These flags are used with the 'secure' attribute.

__Secure-

The dash is a part of the prefix. This flag tells the browser, the cookie should only be included in 'https'.

__Host-

A cookie with this flag

  1. must not have 'domain' attribute, it will be only sent to the host which set it.

  2. Must have a 'path' attribute, that is set to '/', because it will be sent to the host in every request from the host.

Community
  • 1
  • 1
sfy
  • 2,810
  • 1
  • 20
  • 22
  • 2
    Thanks! The problem was that I was trying to set the secure attribute without being in HTTPS. – BobtheMagicMoose May 15 '16 at 16:23
  • I tried your `document.cookie = "tagname = test;secure";` but `document.cookie` return `tagname=test`, https, tested in current versions of Chromium and Firefox. UPD, oh, I found `secure` flag in cookie viewer inside Devtools. – Vitaly Zdanevich Jul 18 '17 at 08:42
  • 1
    MDN specifically mentions it's forbidden. https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#JavaScript_access_using_Document.cookie – mpoisot Sep 21 '19 at 21:18
  • @sfy I have to set secure true so what change required this is my js code -> document.cookie = `cookie_consent=${value}; expires=${expireDate} Secure; path=/`; ?? – Priyen Mehta Dec 06 '22 at 07:08
  • @PriyenMehta You need to check if you are contacting your server with HTTPS, and your server does support HTTPS. – sfy Dec 07 '22 at 07:26
5

This cookie package is easy to use @ https://www.npmjs.com/package/js-cookie

 //to set cookie use
 Cookies.set('name', 'value', { expires: 7, path: '' });

 //to read the cookie, use
 Cookies.get('name'); // => 'value'

 //to delete cookie this
 Cookies.remove('name')

  //to set secure cookie this
 Cookies.set('name', 'value', { secure: true });
Chukwuemeka Maduekwe
  • 6,687
  • 5
  • 44
  • 67
4

because the flag is called secure, not security:

document.cookie = "tagname = test;secure";
Tudor Constantin
  • 26,330
  • 7
  • 49
  • 72
  • 1
    Sorry, that was a typo in my original post. I have since corrected it. When using Chrome console, when I type: `document.cookie = "tagname = test;secure";` no cookies get added, but when I type `document.cookie = "tagname = test";` it does get added. Is this a limitation of entering things into the Chrome console? Thanks for the reply. – BobtheMagicMoose May 15 '16 at 07:24
  • 1
    @BobtheMagicMoose Are you trying this on a HTTPS website? It works for me just fine, but you have to do it on a HTTPS website. – rebane2001 Jan 06 '20 at 08:55
1

Although the server responded with Upper case, and separate with space:

set-cookie: x = y; Secure

The client javascript needs to lowercase the secure and delete the whitespace after ;, like so:

document.cookie = `x=y;secure`;

Otherwise, it will be no effect.

Jeff Tian
  • 5,210
  • 3
  • 51
  • 71
1

This is an example for ExpressJs users:

Set secure cookie

res.cookie("name", "value", { secure: true });

Read this cookie

req.cookies["name"];

When the Secure attribute is set on a cookie, the browser will include it in the request only when the request is made through HTTPS and not through HTTP .

It's a best practice to use this attribute for sensitive cookies as it will protect them from being sent over insecure connection.

I.sh.
  • 252
  • 3
  • 13