<p>We are going to walk through the Origin header. We will also put together what we already learned, because writing requests the standard way is how we keep the API we write safer. A blog API is only the example. The same rules belong on any API you ship.</p><p>Earlier in our tips series we named five verbs. We named Content type, Accept, and Authorization. We kept the bearer token in the authorization header, not in the URL, and not in the JSON body. Last tip, Cookie was the header the browser attaches. We said we would not do CORS there. We do it here.</p><p>When we finish, you should be able to tell two locks apart. CORS is about whether another site's JavaScript may read the answer. CSRF is about whether another site can use your Cookie to change data. Origin, Delete as the verb, and SameSite Lax, are how we tighten both.</p><p>Origin is a request header. The browser sets it. You do not type it in fetch the way you type Authorization.</p><p>It is only the scheme, the host, and the port. No path.</p><p>You are on an admin page at tipsbymoh dot tech slash admin. You call Get slash api slash blogs. The browser sends Origin https slash slash tipsbymoh dot tech. That same Origin rides on every call from that site.</p><p>Host is which server you are talking to. Cookie is what the browser stored. Authorization is who is asking, on purpose. Origin is which site sent this.</p><p>Now three real errors. They are not the same problem.</p><p>The first error is CORS. You meant to call your own API. The admin runs on localhost port three thousand. It fetches localhost port eight thousand slash api slash blogs. The server can return two hundred and the JSON. Chrome’s console says blocked by CORS policy. The network tab still shows the blogs. Your JavaScript never gets them, because Origin localhost port three thousand is not allowed.</p><p>Classic CORS is this: the server answered, but JavaScript may not read it. A server can also send four oh three on a bad Origin. That is extra, not the default.</p><p>Postman, and the api dot http file we use in this series, do not follow CORS, so those tools still show the body. That is the same split we saw with Cookie: page JavaScript is locked, and those tools are not.</p><p>Some calls are not a simple Get. If the request carries Authorization, or uses Delete, or sends JSON as the content type, the browser first fires a separate request whose verb is Options. That is not extra headers you typed. Options is an HTTP method, like Get and Delete. That Options call is a preflight. The browser is asking, may this Origin send the real request. If the preflight fails, the real Delete to slash api slash blogs slash forty two never leaves, and the blog stays. If it succeeds, the real Delete goes out, and CORS is checked again on that response.</p><p>Some admin pages do not call fetch themselves. They use axios, a small JavaScript helper that sends those same requests. Axios on your own admin can send Delete. That is the right verb. Axios on an evil page is a cross-site call. The browser still sends that Options preflight first. If that origin is not allowed, the delete never goes out. SameSite Lax also keeps your Cookie off that foreign axios call. So an axios Delete from another site is not the usual CSRF story.</p><p>The second error is CSRF. This time protection is working. You are in the blog admin. Your session cookie is there. Your own delete goes out with that Cookie, but you forgot the CSRF token. The server answers four oh three. You notice. The blog is still there.</p><p>The third one is the quiet bug. You are logged into the blog admin. The session cookie was set SameSite None, and Secure. You open a funny page. It has a form. The action is your API, slash api slash blogs slash forty two slash delete. The method is Post. The browser attaches your Cookie. The server deletes the blog. There is no CORS message, because that page did not need to read the JSON. You find out later the post is gone.</p><p>Two holes had to line up for that form.</p><p>One. HTML forms cannot send Delete. They only send Get or Post. So the server had to treat that Post, with delete in the URL, as a real delete. If your API only accepts Delete slash api slash blogs slash forty two, that form gets four oh five or four oh four, and the hack fails. That is why we put the verb in the method, not in the path. In the first tip, slash api slash blog slash id slash delete was the junior mistake. SameSite Lax still sends the Cookie on a top-level Get, a link or a Get form that changes the address bar. An image tag pointing at a Get delete does not get that Cookie, but a junior Get delete can still ride Lax if someone opens the link.</p><p>Two. The cookie had to be allowed to ride cross site. The value is None, with Secure. Lax or Strict would have blocked that foreign Post. None lets the Cookie go. That is why SameSite Lax on a session cookie matters, next to Delete as the verb.</p><p>CORS did not stop that quiet bug, because CORS only stops JavaScript from reading. CSRF is the change. Check Origin on cookie deletes, use SameSite Lax, and keep Get as a read. SameSite Lax is a flag on the Cookie, not a token. A CSRF token is a different secret the server put on your own page, so a foreign form cannot guess it. It is not the JWT from Authorization. Some cookie apps check that too.</p><p>Bearer in Authorization is a different door. You put that header on purpose, so a funny page cannot send it for you. CSRF shows up when login lives in a Cookie, because the browser attaches Cookie on its own.</p><p>We write things the standard way because it shrinks these holes, on a blog API and on any other API. Use the five verbs, keep the token in the header, let the browser attach Cookie, name Origin, send Delete as Delete, and set SameSite Lax. That is one security story.</p><p>So here is what to keep. Origin names the site that sent the request. CORS is the lock on whether that site’s JavaScript may read the answer. CSRF is the lock on whether another site can ride your Cookie and change data. Delete as the verb, and SameSite Lax, close the holes we just walked through. That is how a standard request keeps an API safer.</p><p>Work the quiz on this one. Sit with the practice if you want another pass.</p><p>Catch you in the next tip.</p>

Origin, CORS, and CSRF as different locks. Why Delete as the verb and SameSite Lax stop a foreign form from pretending to be you.

The Origin header | Tech Tips by Moh

Origin http://localhost:3000 is not allowed, so JS cannot read the body

The server treats that POST, with delete in the URL, as a real delete

Axios on the funny page skipped preflight

Yes — it is the Lax flag on Set-Cookie: access=TOKEN

No — Lax is a Cookie flag; the CSRF token is a secret on your own page; JWT is who you are

The browser attaches Cookie on its own; a funny page cannot send your Authorization header

The Origin header

<div class="course-slide cs-center">
  <p class="cs-kicker">This tip</p>
  <h2 class="cs-title cs-at-1-4">The Origin header</h2>
  <p class="cs-pill cs-at-8-7">Keep the API <span class="cs-hl">safer</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Example only</p>
  <h2 class="cs-title">A blog API</h2>
  <p class="cs-pill cs-at-2-6">Same rules on <span class="cs-hl">any API</span> you ship</p>
  <p class="cs-note cs-at-7-1">Five verbs</p>
  <div class="cs-row cs-at-7-1"><span class="cs-chip">GET</span> <span class="cs-chip">POST</span> <span class="cs-chip">PUT</span> <span class="cs-chip">PATCH</span> <span class="cs-chip">DELETE</span></div>
  <p class="cs-note cs-at-8-4">Headers</p>
  <div class="cs-row"><span class="cs-chip cs-at-8-8">Content-Type</span> <span class="cs-chip cs-at-10">Accept</span> <span class="cs-chip cs-at-10-5">Authorization</span></div>
</div>

<div class="course-slide">
  <p class="cs-kicker">Already learned</p>
  <h2 class="cs-title">Token in the header</h2>
  <ul class="cs-checks">
    <li>Bearer in <span class="cs-mono">Authorization</span></li>
    <li class="cs-at-2-8">Not in the URL</li>
    <li class="cs-at-4-1">Not in the JSON body</li>
    <li class="cs-at-7">Cookie: the browser attaches it</li>
    <li class="cs-at-11-2"><span class="cs-hl">CORS: today</span></li>
  </ul>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Tell them apart</p>
  <h2 class="cs-title cs-at-1-6">Two locks</h2>
  <div class="cs-grid cs-cols-2">
    <div class="cs-card cs-at-3-2"><p class="cs-card-label">CORS</p><p class="cs-card-title">May that site's JS read the answer?</p></div>
    <div class="cs-card cs-card-danger cs-at-7-1"><p class="cs-card-label">CSRF</p><p class="cs-card-title">Can another site use your Cookie?</p></div>
  </div>
  <div class="cs-row"><span class="cs-chip cs-at-11-4">Origin</span> <span class="cs-chip cs-at-12-3">DELETE</span> <span class="cs-chip cs-at-13-5">SameSite=Lax</span></div>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Request header</p>
  <h2 class="cs-title cs-at-0-8">Origin</h2>
  <p class="cs-pill cs-at-2-1">The <span class="cs-hl">browser</span> sets it</p>
  <p class="cs-pill cs-at-6-7">scheme + host + port · no path</p>
</div>

<div class="course-slide">
  <p class="cs-kicker">From the admin page</p>
  <h2 class="cs-title">One site, one Origin</h2>
  <p class="cs-pill cs-at-0-6"><span class="cs-mono">tipsbymoh.tech/admin</span></p>
  <div class="cs-code cs-no-copy cs-at-4-1">
    <div class="cs-code-bar"><span class="cs-code-path">request</span></div>
    <pre class="cs-code-body cs-lines"><span class="cs-ln">GET /api/blogs</span>
<span class="cs-ln cs-at-7-5">Origin: https://tipsbymoh.tech</span></pre>
  </div>
  <p class="cs-text cs-at-14">Same Origin on <span class="cs-hl">every call</span> from that site.</p>
</div>

<div class="course-slide">
  <p class="cs-kicker">Four jobs</p>
  <h2 class="cs-title">Which header?</h2>
  <div class="cs-grid cs-cols-2">
    <div class="cs-card"><p class="cs-card-label">Host</p><p class="cs-card-title">Which server</p></div>
    <div class="cs-card cs-at-2-2"><p class="cs-card-label">Cookie</p><p class="cs-card-title">What the browser stored</p></div>
    <div class="cs-card cs-at-3-6"><p class="cs-card-label">Authorization</p><p class="cs-card-title">Who is asking, on purpose</p></div>
    <div class="cs-card cs-card-accent cs-at-7-5"><p class="cs-card-label">Origin</p><p class="cs-card-title">Which site sent this</p></div>
  </div>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Not the same problem</p>
  <h2 class="cs-title cs-at-0-4">Three real errors</h2>
  <p class="cs-pill cs-at-3-7">Error 1 · <span class="cs-hl">CORS</span></p>
  <p class="cs-pill cs-at-8"><span class="cs-mono">localhost:3000</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Error 1 · CORS</p>
  <h2 class="cs-title">Two ports, two Origins</h2>
  <p class="cs-pill"><span class="cs-mono">:3000 → localhost:8000/api/blogs</span></p>
  <div class="cs-grid cs-cols-2">
    <div class="cs-card cs-at-5"><p class="cs-card-label">Server</p><p class="cs-card-title">200 + JSON</p></div>
    <div class="cs-card cs-card-danger cs-at-8-3"><p class="cs-card-label">Console</p><p class="cs-card-title">Blocked by CORS policy</p></div>
    <div class="cs-card cs-at-10-5"><p class="cs-card-label">Network tab</p><p class="cs-card-title">The blogs are there</p></div>
    <div class="cs-card cs-card-danger cs-at-13-2"><p class="cs-card-label">Your JS</p><p class="cs-card-title">Never gets them</p></div>
  </div>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Classic CORS</p>
  <h2 class="cs-title cs-at-1-7">The server answered</h2>
  <p class="cs-pill cs-at-3-3">JS <span class="cs-bad">may not read it</span></p>
  <p class="cs-pill cs-at-5-7"><span class="cs-mono">403</span> on Origin: extra, not the default</p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Not page JavaScript</p>
  <h2 class="cs-title">Tools skip CORS</h2>
  <div class="cs-row"><span class="cs-chip">Postman</span> <span class="cs-chip cs-at-1">api.http</span></div>
  <p class="cs-pill cs-at-6">They still show the body</p>
  <p class="cs-text cs-at-8-1">Same split as Cookie: page JS is <span class="cs-bad">locked</span>, tools are not.</p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Not a simple GET</p>
  <h2 class="cs-title cs-at-10-4">OPTIONS goes first</h2>
  <p class="cs-pill cs-at-3-4"><span class="cs-mono">Authorization</span></p>
  <p class="cs-pill cs-at-5-2"><span class="cs-mono">DELETE</span> · JSON body</p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Not extra headers you typed</p>
  <h2 class="cs-title cs-at-2-5">OPTIONS is an HTTP method</h2>
  <div class="cs-row cs-at-4-5"><span class="cs-chip">GET</span> <span class="cs-chip">DELETE</span> <span class="cs-chip"><span class="cs-hl">OPTIONS</span></span></div>
  <p class="cs-pill cs-at-7-2">A <span class="cs-hl">preflight</span></p>
  <p class="cs-text cs-at-9-6">May this Origin send the real request?</p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Preflight</p>
  <h2 class="cs-title">If it fails</h2>
  <p class="cs-pill cs-at-1-5"><span class="cs-mono">DELETE /api/blogs/42</span> <span class="cs-bad">never leaves</span></p>
  <p class="cs-text cs-at-7">The blog <span class="cs-hl">stays</span>.</p>
  <div class="cs-card cs-card-accent cs-at-8"><p class="cs-card-label">If it succeeds</p><p class="cs-card-title">The real DELETE goes out. CORS is checked again.</p></div>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Not fetch</p>
  <h2 class="cs-title cs-at-2-9">axios</h2>
  <p class="cs-pill cs-at-4-6">A small JavaScript helper that sends requests</p>
</div>

<div class="course-slide">
  <p class="cs-kicker">Same helper, two sites</p>
  <h2 class="cs-title">Who is calling?</h2>
  <div class="cs-grid cs-cols-2">
    <div class="cs-card cs-card-accent"><p class="cs-card-label">Your admin</p><p class="cs-card-title"><span class="cs-mono">axios.delete</span>: the right verb</p></div>
    <div class="cs-card cs-card-danger cs-at-5-4"><p class="cs-card-label">Evil page</p><p class="cs-card-title">A cross-site call</p></div>
  </div>
  <p class="cs-text cs-at-8-3">The browser still sends <span class="cs-hl">OPTIONS</span> first.</p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Foreign axios</p>
  <h2 class="cs-title">The DELETE never goes out</h2>
  <p class="cs-pill cs-at-3-3"><span class="cs-mono">SameSite=Lax</span> keeps your Cookie off</p>
  <p class="cs-text cs-at-10-1">Not the usual <span class="cs-hl">CSRF</span> story.</p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Error 2 · CSRF</p>
  <h2 class="cs-title cs-at-2-9">Protection is working</h2>
  <p class="cs-pill cs-at-9-9">Forgot the CSRF token</p>
  <p class="cs-pill cs-at-12-5"><span class="cs-mono">403</span> · the blog is still there</p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Error 3 · Silence</p>
  <h2 class="cs-title cs-at-1-6">The quiet bug</h2>
  <p class="cs-pill cs-at-6-1"><span class="cs-bad cs-mono">SameSite=None; Secure</span></p>
</div>

<div class="course-slide">
  <p class="cs-kicker">A funny page</p>
  <h2 class="cs-title">A form, not axios</h2>
  <div class="cs-code cs-no-copy">
    <div class="cs-code-bar"><span class="cs-code-path">evil page</span></div>
    <pre class="cs-code-body cs-lines"><span class="cs-ln">&lt;form action="/api/blogs/42/delete"</span>
<span class="cs-ln cs-at-6-1">      method="POST"&gt;</span></pre>
  </div>
  <p class="cs-text cs-at-7-9">The browser attaches your <span class="cs-hl">Cookie</span>.</p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">They did not need the JSON</p>
  <p class="cs-text">The server deletes the blog.</p>
  <h2 class="cs-title cs-at-1-9">No CORS message</h2>
  <p class="cs-pill cs-at-7-4">The post is <span class="cs-bad">gone</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Both had to line up</p>
  <h2 class="cs-title cs-at-0">Two holes</h2>
  <p class="cs-pill cs-at-5-7">Forms send only <span class="cs-mono">GET</span> or <span class="cs-mono">POST</span></p>
  <p class="cs-pill cs-at-10">Hole 1: <span class="cs-bad">delete in the URL</span></p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Hole 1</p>
  <h2 class="cs-title">Only accept DELETE</h2>
  <p class="cs-pill"><span class="cs-bad cs-mono">POST /api/blogs/42/delete</span></p>
  <p class="cs-pill cs-at-1-8"><span class="cs-hl cs-mono">DELETE /api/blogs/42</span></p>
  <p class="cs-pill cs-at-6-4"><span class="cs-mono">405</span> or <span class="cs-mono">404</span> · the hack fails</p>
  <p class="cs-text cs-at-10-2">Verb in the method, not in the path.</p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">The junior mistake</p>
  <h2 class="cs-title">GET must only read</h2>
  <p class="cs-pill cs-at-3-5"><span class="cs-bad cs-mono">GET /api/blog/:id/delete</span></p>
  <p class="cs-text cs-at-8-9">Lax still sends Cookie on a <span class="cs-hl">top-level GET</span>.</p>
  <div class="cs-row cs-at-10"><span class="cs-chip">a link</span> <span class="cs-chip">a GET form</span></div>
</div>

<div class="course-slide">
  <p class="cs-kicker">Lax Cookie</p>
  <h2 class="cs-title">Image no, link yes</h2>
  <div class="cs-grid cs-cols-2">
    <div class="cs-card"><p class="cs-card-label">Image tag</p><p class="cs-card-title">No Lax Cookie</p></div>
    <div class="cs-card cs-card-danger cs-at-4-6"><p class="cs-card-label">Link someone opens</p><p class="cs-card-title">Cookie rides. Post deleted.</p></div>
  </div>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Hole 2</p>
  <h2 class="cs-title cs-at-2-4">Cookie rides cross-site</h2>
  <p class="cs-pill cs-at-3-7"><span class="cs-bad cs-mono">SameSite=None; Secure</span></p>
  <p class="cs-pill cs-at-6-4"><span class="cs-hl cs-mono">Lax</span> or <span class="cs-mono">Strict</span> blocks the foreign POST</p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Why Lax matters</p>
  <h2 class="cs-title cs-at-5-3">CORS did not stop it</h2>
  <p class="cs-pill cs-at-7-8">CORS stops JS <span class="cs-hl">reading</span></p>
  <p class="cs-pill cs-at-9-7">CSRF is the <span class="cs-bad">change</span></p>
</div>

<div class="course-slide">
  <p class="cs-kicker">Close the hole</p>
  <h2 class="cs-title">Three checks</h2>
  <ul class="cs-checks">
    <li>Check Origin on cookie deletes</li>
    <li class="cs-at-1-8"><span class="cs-mono">SameSite=Lax</span></li>
    <li class="cs-at-3-4">Keep <span class="cs-mono">GET</span> a read</li>
  </ul>
  <p class="cs-pill cs-at-6-5">Lax is a Cookie <span class="cs-hl">flag</span>, not a token</p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">A different secret</p>
  <h2 class="cs-title">CSRF token</h2>
  <p class="cs-text cs-at-1-2">A secret the server put on <span class="cs-hl">your own page</span>.</p>
  <p class="cs-text cs-at-4-7">A foreign form cannot guess it.</p>
  <p class="cs-pill cs-at-6-3">Not the JWT from <span class="cs-mono">Authorization</span></p>
  <p class="cs-text cs-at-8-9">Some cookie apps check it too.</p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Two doors</p>
  <h2 class="cs-title cs-at-9-5">Cookie attaches itself</h2>
  <p class="cs-pill cs-at-3-2">Bearer: <span class="cs-hl">you</span> add the header</p>
  <p class="cs-pill cs-at-7-7">Cookie login: <span class="cs-bad">the browser</span> sends it</p>
</div>

<div class="course-slide">
  <p class="cs-kicker">Any API</p>
  <h2 class="cs-title">The standard way</h2>
  <ul class="cs-checks">
    <li class="cs-at-6-7">Five verbs</li>
    <li class="cs-at-8-3">Token in the header</li>
    <li class="cs-at-9-3">Browser attaches Cookie</li>
    <li class="cs-at-11-3">Name Origin</li>
    <li class="cs-at-12-4"><span class="cs-mono">DELETE</span> as Delete</li>
    <li class="cs-at-14-1"><span class="cs-mono">SameSite=Lax</span></li>
  </ul>
  <p class="cs-pill cs-at-16-5">One <span class="cs-hl">security</span> story</p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Keep this</p>
  <h2 class="cs-title cs-at-1-8">Origin names the site</h2>
  <p class="cs-pill cs-at-3-7">CORS: may that site's JS <span class="cs-hl">read</span>?</p>
  <p class="cs-pill cs-at-8-4">CSRF: can another site ride your <span class="cs-bad">Cookie</span>?</p>
</div>

<div class="course-slide cs-center">
  <p class="cs-kicker">Close the holes</p>
  <h2 class="cs-title"><span class="cs-mono">DELETE</span> + <span class="cs-mono">SameSite=Lax</span></h2>
  <p class="cs-text cs-at-4-6">That is how a standard request keeps an API <span class="cs-hl">safer</span>.</p>
  <p class="cs-pill cs-at-8">Quiz · Practice</p>
</div>