<p>This lesson is about the cookie header. Stay for this reason. The header you cannot type in fetch is the same one Postman can paste.</p><p>In an earlier tip we named content type, accept, and authorization. Those are jobs you set on purpose. Cookie is different. The browser stores it, and the browser attaches it.</p><p>On the page, you do not write the cookie header in fetch. Page JavaScript is blocked from setting it. Postman and api dot http do not attach it for you. Hold that thought. We come back to how those tools still send it.</p><p>First visit, no session cookie. You log into an admin page for a blog A P I. The server answers set cookie, session equals a b c, http only, secure, same site. Next, get slash api slash blogs already carries cookie, session equals a b c. You did not add it. That is the browser’s session note.</p><p>Cookie is not authorization. Cookie is what the browser stored. Authorization bearer is a token the client sends on purpose. A session cookie does not become bearer. Some servers still want authorization on a delete even when a cookie is present.</p><p>The browser sends every cookie that matches this request, together, in one header. Frontend code does not pick them. The line can be cookie, session equals a b c, semicolon, theme equals dark. Not every cookie on the computer. This site’s cookie stays off another host. Path slash admin stays off get slash api slash blogs. Secure stays on H T T P S. Same site lax or strict stay off most calls from another site. Expired cookies are dropped. A cookie on slash even rides on an image. That is why cookies stay small.</p><p>If the page and the A P I share one site, fetch sends matching cookies by default. If the page sits on another site, the default is no cookies. You would need credentials included, and that A P I must allow credentials. We will not do C O R S here.</p><p>What if the bearer token lives in a cookie? Real pattern. It changes which header carries login, not whether you are logged in. JavaScript can set authorization bearer from local storage. The browser will not add that header. A script can still read local storage. Or login sets set cookie, access equals a token, http only. The next get slash api slash blogs is cookie, access equals that token. Usually no authorization header. The server must accept cookie. That is cookie auth, not bearer hidden in a cookie.</p><p>Http only means page JavaScript cannot read the token. Secure means it only rides on H T T P S. Same site helps stop another site from riding that cookie. The browser attaches it, so you do not add bearer on every fetch. That cookie also goes on every matching request. C S R F is the risk, unless same site, or a C S R F token, blocks it. A cookie that is not http only is worse than local storage. A script can steal it, and another site can try to use it.</p><p>Then how can Postman send it, if page JavaScript cannot read an http only token? Two programs. The rule is for page JavaScript, not Postman. You cannot read http only with document dot cookie. Http only means this page’s JavaScript cannot see it. It does not mean nobody can see it.</p><p>In Postman, or api dot http, or curl, you are the client. You may send cookie. Role checks still run. Cookie auth does not block those tools. Log in inside Postman and read set cookie on the response. Or copy it from dev tools, application, cookies. Http only cookies show up there. Paste cookie, session equals a b c, on get slash api slash blogs. Same idea as copying bearer after login. The frontend never gives Postman the token. Some servers keep cookie for the website and authorization bearer for Postman. That second door is optional.</p><p>The browser adds cookie on the page. You do not set it in fetch. Postman can still send it if you paste it. It is not authorization. More headers still exist. This tip was only cookie.</p><p>Quiz and practice are waiting.</p><p>On to the next tip when you are ready.</p>

A short tip: the browser attaches Cookie on the page, Postman can still paste it, and Cookie is not Authorization.

The Cookie header | Tech Tips by Moh

Paste Cookie: session=abc from Set-Cookie or DevTools

The Cookie header

<div class="course-slide cs-center">
  <p class="cs-kicker">This tip</p>
  <h2 class="cs-title">The cookie header</h2>
  <p class="cs-pill cs-at-4"><span class="cs-mono">fetch</span></p>
  <p class="cs-pill cs-at-6-5"><span class="cs-mono">Postman</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">You set these</p>
  <h2 class="cs-title">Three jobs</h2>
  <p class="cs-pill cs-at-1"><span class="cs-mono">Content-Type</span></p>
  <p class="cs-pill cs-at-2-4"><span class="cs-mono">Accept</span></p>
  <p class="cs-pill cs-at-3-4"><span class="cs-mono">Authorization</span></p>
  <p class="cs-title cs-at-7-6">Cookie is different</p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">On the page</p>
  <h2 class="cs-title">You do not write Cookie</h2>
  <p class="cs-pill cs-at-3"><span class="cs-mono">fetch</span></p>
  <p class="cs-pill cs-at-3-5"><span class="cs-mono">Postman</span></p>
  <p class="cs-pill cs-at-6-2"><span class="cs-mono">api.http</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">After login</p>
  <h2 class="cs-title cs-at-5">Set-Cookie</h2>
  <p class="cs-pill cs-at-6-1"><span class="cs-mono">session=abc</span></p>
  <p class="cs-pill cs-at-9-1"><span class="cs-mono">HttpOnly</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">You did not add it</p>
  <h2 class="cs-title">GET already carries Cookie</h2>
  <p class="cs-pill"><span class="cs-mono">GET /api/blogs</span></p>
  <p class="cs-pill cs-at-4-3"><span class="cs-mono">Cookie: session=abc</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Two jobs</p>
  <h2 class="cs-title">Cookie is not Authorization</h2>
  <p class="cs-pill cs-at-5-1"><span class="cs-mono">Authorization: Bearer</span></p>
  <p class="cs-pill cs-at-11"><span class="cs-mono">DELETE</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">One header</p>
  <h2 class="cs-title">Every matching cookie</h2>
  <p class="cs-pill cs-at-7-1"><span class="cs-mono">Cookie: session=abc; theme=dark</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Must match</p>
  <h2 class="cs-title">Domain and path</h2>
  <p class="cs-pill cs-at-2-7"><span class="cs-mono">Path=/admin</span></p>
  <p class="cs-pill cs-at-4-4"><span class="cs-mono">GET /api/blogs</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Still matching</p>
  <h2 class="cs-title">SameSite · expiry · Path=/</h2>
  <p class="cs-pill"><span class="cs-mono">SameSite=Lax</span></p>
  <p class="cs-pill cs-at-4-2"><span class="cs-mono">expired → dropped</span></p>
  <p class="cs-pill cs-at-6"><span class="cs-mono">Path=/</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">fetch</p>
  <h2 class="cs-title">Same site sends cookies</h2>
  <p class="cs-pill cs-at-8-9"><span class="cs-mono">credentials: include</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Real pattern</p>
  <h2 class="cs-title">Token in a cookie?</h2>
  <p class="cs-pill cs-at-7-5"><span class="cs-mono">localStorage</span></p>
  <p class="cs-pill cs-at-7-5"><span class="cs-mono">Authorization: Bearer</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">The other pattern</p>
  <h2 class="cs-title">Set-Cookie</h2>
  <p class="cs-pill"><span class="cs-mono">access=…</span></p>
  <p class="cs-pill cs-at-6-1"><span class="cs-mono">GET /api/blogs</span></p>
  <p class="cs-pill cs-at-6-5"><span class="cs-mono">Cookie: access=…</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Cookie-auth</p>
  <h2 class="cs-title">Not Bearer hidden in a cookie</h2>
  <p class="cs-pill cs-at-3-3"><span class="cs-mono">HttpOnly</span></p>
  <p class="cs-pill cs-at-7-9"><span class="cs-mono">Secure</span></p>
  <p class="cs-pill cs-at-11-2"><span class="cs-mono">SameSite</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">The cost</p>
  <h2 class="cs-title cs-at-4">Every matching request</h2>
  <p class="cs-pill cs-at-7-4"><span class="cs-mono">CSRF</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Worse than local storage</p>
  <h2 class="cs-title cs-at-6-8">How can Postman send it?</h2>
  <p class="cs-pill cs-at-12-7">Two programs</p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">HttpOnly</p>
  <h2 class="cs-title cs-at-6-6">Page JavaScript cannot see it</h2>
  <p class="cs-pill cs-at-3"><span class="cs-mono">document.cookie</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Postman · api.http · curl</p>
  <h2 class="cs-title cs-at-5">You may send Cookie</h2>
  <p class="cs-pill cs-at-10-4"><span class="cs-mono">Set-Cookie</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">DevTools · Application · Cookies</p>
  <h2 class="cs-title cs-at-6-4">Paste Cookie</h2>
  <p class="cs-pill cs-at-6-4"><span class="cs-mono">Cookie: session=abc</span></p>
  <p class="cs-pill cs-at-9-2"><span class="cs-mono">GET /api/blogs</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Optional</p>
  <h2 class="cs-title">Two doors</h2>
  <p class="cs-pill cs-at-2-5"><span class="cs-mono">Cookie</span></p>
  <p class="cs-pill cs-at-3-5"><span class="cs-mono">Authorization: Bearer</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Leave with this</p>
  <h2 class="cs-title">The browser adds Cookie</h2>
  <p class="cs-pill cs-at-2-2">You do not set it in fetch</p>
  <p class="cs-pill cs-at-4-4">Postman can paste it</p>
  <p class="cs-pill cs-at-6-2">It is not Authorization</p>
</div>