الـ CORS والـ Cookies: المتصفح بيحمي المستخدم إزاي

أهلًا بيك. الدرس ده عن حاجتين المتصفح بيعملهم لوحده، ولازم الـ backend يتعامل معاهم صح: الـ cookies، والـ CORS. الـ cookie: الـ server بيقول للمتصفح احفَظ القيمة دي، بـ header اسمه Set-Cookie، والمتصفح بيبعتها تاني لوحده مع كل request لنفس الموقع. وأهم حاجة في الـ cookie مش القيمة، الـ attributes: httpOnly: الـ JavaScript في الصفحة ما يقدرش يقراها، فلو حصل XSS ما تتسرقش. secure: HTTPS بس. sameSite lax: ما تتبعتش مع requests جاية من مواقع تانية، وده بيحمي من CSRF. و signed: عليها توقيع HMAC بالـ secret، فلو حد غيّرها نكشفه. نشغّل، ونعمل login، وبعدين نبعت الـ cookies في me، ومرة بقيمة متلعّب فيها.

import express from "express";
import cookieParser from "cookie-parser";

const app = express();
app.use(cookieParser(process.env.COOKIE_SECRET));

app.post("/login", (req, res) => {
  res.cookie("theme", "dark", { maxAge: 30 * 24 * 3600 * 1000 });
  res.cookie("sid", "u7-session", {
    httpOnly: true, // JavaScript في المتصفح ما يشوفهاش
    secure: true, // HTTPS بس
    sameSite: "lax", // ما تتبعتش مع requests جاية من مواقع تانية (غير الـ links)
    signed: true, // عليها توقيع HMAC
    maxAge: 3600 * 1000,
  });
  res.json({ ok: true });
});

app.get("/me", (req, res) => {
  res.json({ cookies: req.cookies, signed: req.signedCookies });
});

app.listen(3000, () => console.log("http://localhost:3000"));

$ node --env-file=.env server.js
http://localhost:3000

→ POST /login
← 200 OK
  connection: keep-alive
  content-length: 11
  content-type: application/json; charset=utf-8
  etag: W/"b-Ai2R8hgEarLmHKwesT1qcY913ys"
  keep-alive: timeout=5
  set-cookie: theme=dark; Max-Age=2592000; Path=/; Expires=Mon, 16 Nov 2026 13:52:46 GMT
  set-cookie: sid=s%3Au7-session.dAdhvT2wTx0lQ%2FSgs5CEdOxynKGrXpoglm7MosL2U2w; Max-Age=3600; Path=/; Expires=Sat, 17 Oct 2026 14:52:46 GMT; HttpOnly; Secure; SameSite=Lax
  x-powered-by: Express
{
  "ok": true
}

→ GET /me
← 200 OK
{
  "cookies": {
    "theme": "dark"
  },
  "signed": {
    "sid": false
  }
}

الـ set-cookie الأولى: theme بـ Max-Age و Expires. التانية: sid، وقيمتها بقت s colon، وبعدها القيمة، و dot، والتوقيع، ومعاها HttpOnly و Secure و SameSite Lax. وفي me بعتنا sid بتوقيع مزوّر، فـ req dot signedCookies قالت false، يعني التوقيع غلط. الـ signed cookie مش متشفرة، أي حد يقدر يقرا القيمة، بس ما يقدرش يغيّرها.

دلوقتي الـ CORS. المتصفح عنده قاعدة اسمها Same-Origin Policy: صفحة من موقع، ما ينفعش تقرا رد request رايح لموقع تاني، إلا لو الموقع التاني سمح. والـ origin هو الـ protocol والـ domain والـ port مع بعض. والسماح بيتم بـ headers اسمها Access-Control. أهم حاجة: الـ CORS بيقرره المتصفح. الـ server بيعلن بس. علشان كده Postman والـ curl بيشتغلوا عادي، والمتصفح بيرفض. أشهر غلطة في الـ CORS على الإنترنت: الـ middleware ده. بياخد أي origin جاي ويرجّعه في Allow-Origin، ومعاه Allow-Credentials true. النتيجة: أي موقع، حتى موقع مهاجم، يقدر يكلم الـ API بالـ cookies بتاعة المستخدم، ويقرا الرد. نشغّل، ونبعت request كأنه جاي من موقع مهاجم.

import express from "express";

const app = express();
app.use(express.json());

// ❌ أي موقع في الدنيا يقدر يكلم الـ API ومعاه cookies المستخدم
app.use((req, res, next) => {
  res.set("Access-Control-Allow-Origin", req.get("Origin") ?? "*");
  res.set("Access-Control-Allow-Credentials", "true");
  next();
});

app.get("/me", (req, res) => res.json({ name: "مُنى", balance: 5000 }));

app.listen(3000, () => console.log("http://localhost:3000"));

$ node --env-file=.env server.js
http://localhost:3000

→ GET /me
← 200 OK
  access-control-allow-credentials: true
  access-control-allow-origin: https://evil.example
  connection: keep-alive
  content-length: 34
  content-type: application/json; charset=utf-8
  etag: W/"22-rpHl0n6NAROYLc0KVSyz2aA4Pjc"
  keep-alive: timeout=5
  x-powered-by: Express
{
  "name": "مُنى",
  "balance": 5000
}

access-control-allow-origin: evil dot example، و credentials true. يعني المتصفح هيسمح لموقع المهاجم يقرا الرصيد بتاع أي حد فاتح الموقع ده وهو عامل login عندك. الحل: allowlist، قايمة بالـ origins المسموحة بس. بمكتبة cors. origin: function بتشوف الـ origin في الـ allowlist، أو مفيش origin أصلًا، يعني مش متصفح. credentials true. الـ methods والـ headers المسموحة. و maxAge: المتصفح يفتكر الإجابة عشر دقايق. وهنا مفهوم الـ preflight: قبل أي request مش بسيط، زي PATCH أو JSON أو فيه Authorization، المتصفح بيبعت OPTIONS الأول يسأل: مسموح؟ ولو الإجابة آه، يبعت الـ request الحقيقي. نشغّل: preflight من الـ app، و GET من الـ app، و GET من المهاجم.

import express from "express";
import cors from "cors";

const app = express();
app.use(express.json());

const ALLOWED = new Set(["https://app.example.com", "http://localhost:5173"]);

app.use(
  cors({
    origin: (origin, cb) => cb(null, !origin || ALLOWED.has(origin)),
    credentials: true,
    methods: ["GET", "POST", "PATCH", "DELETE"],
    allowedHeaders: ["Content-Type", "Authorization"],
    maxAge: 600,
  }),
);

app.get("/me", (req, res) => res.json({ name: "مُنى" }));
app.patch("/me", (req, res) => res.json({ updated: true }));

app.listen(3000, () => console.log("http://localhost:3000"));

$ node --env-file=.env server.js
http://localhost:3000

→ OPTIONS /me
← 204 No Content
  access-control-allow-credentials: true
  access-control-allow-headers: Content-Type,Authorization
  access-control-allow-methods: GET,POST,PATCH,DELETE
  access-control-allow-origin: https://app.example.com
  access-control-max-age: 600
  connection: keep-alive
  content-length: 0
  keep-alive: timeout=5
  vary: Origin
  x-powered-by: Express

→ GET /me
← 200 OK
  access-control-allow-credentials: true
  access-control-allow-origin: https://app.example.com
  connection: keep-alive
  content-length: 19
  content-type: application/json; charset=utf-8
  etag: W/"13-Jba3QuW7YLKH88P65c/iGmMkjzI"
  keep-alive: timeout=5
  vary: Origin
  x-powered-by: Express
{
  "name": "مُنى"
}

→ GET /me
← 200 OK
  connection: keep-alive
  content-length: 19
  content-type: application/json; charset=utf-8
  etag: W/"13-Jba3QuW7YLKH88P65c/iGmMkjzI"
  keep-alive: timeout=5
  x-powered-by: Express
{
  "name": "مُنى"
}

الـ preflight: two oh four، ومعاه الـ methods والـ headers والـ max-age. الـ app: allow-origin بالـ origin بتاعه، و vary Origin. المهاجم: الـ request وصل ورجع two hundred، بس مفيش allow-origin، فالمتصفح هيمنع الصفحة تقرا الرد. وخد بالك من حاجة: الـ CORS بيمنع القراية، مش الإرسال. الـ request وصل للـ server فعلًا. علشان كده الـ CORS مش حماية من CSRF، والحماية دي ليها درس لوحدها. التحدي: CORS بإيدك من غير مكتبة. allowlist. preflight: two oh four بالـ methods والـ headers والـ max-age، أو four oh three لو مش مسموح. credentials و Vary Origin. والـ origin الغريب ما ياخدش أي header. أربع حالات اختبار في الكومنت.

الحل. مفيش origin: next. مش في الـ allowlist: four oh three للـ preflight، وغير كده نكمّل من غير headers، والمتصفح هو اللي هيمنع. مسموح: الـ origin نفسه، و credentials، و vary. و OPTIONS: الـ headers و two oh four. نشغّل.

import express from "express";

const app = express();
const ALLOWED = ["https://app.example.com", "https://admin.example.com"];


function corsAllowlist(req, res, next) {
  const origin = req.get("Origin");
  if (!origin) return next();
  if (!ALLOWED.includes(origin)) {
    if (req.method === "OPTIONS") return res.sendStatus(403);
    return next();
  }
  res.set({
    "Access-Control-Allow-Origin": origin,
    "Access-Control-Allow-Credentials": "true",
  });
  res.vary("Origin");
  if (req.method === "OPTIONS") {
    res.set({
      "Access-Control-Allow-Methods": "GET, POST, DELETE",
      "Access-Control-Allow-Headers": "Content-Type",
      "Access-Control-Max-Age": "600",
    });
    return res.sendStatus(204);
  }
  next();
}

app.use(corsAllowlist);
app.get("/data", (req, res) => res.json({ secret: 42 }));

app.listen(3000, () => console.log("http://localhost:3000"));

$ node --env-file=.env server.js
http://localhost:3000

→ OPTIONS /data
← 204 No Content
  access-control-allow-credentials: true
  access-control-allow-headers: Content-Type
  access-control-allow-methods: GET, POST, DELETE
  access-control-allow-origin: https://app.example.com
  access-control-max-age: 600
  connection: keep-alive
  etag: W/"a-bAsFyilMr4Ra1hIU5PyoyFRunpI"
  keep-alive: timeout=5
  vary: Origin
  x-powered-by: Express

→ GET /data
← 200 OK
  access-control-allow-credentials: true
  access-control-allow-origin: https://app.example.com
  connection: keep-alive
  content-length: 13
  content-type: application/json; charset=utf-8
  etag: W/"d-0n0LdXM287KCiojNhxjxFzS9UV4"
  keep-alive: timeout=5
  vary: Origin
  x-powered-by: Express
{
  "secret": 42
}

→ GET /data
← 200 OK
  connection: keep-alive
  content-length: 13
  content-type: application/json; charset=utf-8
  etag: W/"d-0n0LdXM287KCiojNhxjxFzS9UV4"
  keep-alive: timeout=5
  x-powered-by: Express
{
  "secret": 42
}

→ OPTIONS /data
← 403 Forbidden
Forbidden

الأربعة زي الاختبار. الدرس الجاي: رفع الملفات، وحدود الحجم، وإزاي ما تخليش upload واحد يملا الـ disk.