الـ OAuth و OpenID Connect و PKCE: login بـ Google من غير ما تشوف الـ password

// متصفح بيمشي ورا الـ redirects بإيده، علشان نشوف كل خطوة
const hop = async (url, cookie = "") => {
  const res = await fetch(url, { redirect: "manual", headers: { cookie } });
  const { host, pathname } = new URL(url);
  console.log(`${res.status} ← ${host}${pathname}`);
  return res;
};

export async function loginUntilCode() {
  const a = await hop("http://localhost:3000/login");
  const tx = a.headers.get("set-cookie").split(";")[0];
  const b = await hop(a.headers.get("location"));
  const callback = new URL(b.headers.get("location"));
  return { tx, callback };
}

if (process.argv[1].endsWith("browser.js")) {
  const { tx, callback } = await loginUntilCode();
  const c = await hop(callback.href, tx);
  console.log(await c.json());
}

$ node idp.js & I=$!; node server.js & S=$!; sleep 1; node browser.js; kill $I $S
IdP: http://localhost:4000
App: http://localhost:3000
302 ← localhost:3000/login
302 ← localhost:4000/authorize
200 ← localhost:3000/callback
{ welcome: '[email protected]', sub: 'user-7' }

import { loginUntilCode } from "./browser.js";
const token = (body) =>
  fetch("http://localhost:4000/token", { method: "POST", body: new URLSearchParams(body) });

// 1) app خبيث على نفس الموبايل خطف الـ code من الـ redirect، وما عندوش الـ verifier
const { callback } = await loginUntilCode();
const code = callback.searchParams.get("code");
const stolen = await token({ grant_type: "authorization_code", code, client_id: "my-backend", redirect_uri: "http://localhost:3000/callback" });
console.log("code مسروق من غير verifier:", stolen.status, stolen.ok ? "اخد token ❌" : await stolen.text());

// 2) نفس الـ code تاني (replay)
const again = await token({ grant_type: "authorization_code", code, client_id: "my-backend", redirect_uri: "http://localhost:3000/callback" });
console.log("نفس الـ code تاني:            ", again.status, again.ok ? "اخد token ❌" : await again.text());

// 3) CSRF على الـ login: المهاجم بيبعت للضحية callback بـ code بتاعه
const forged = await fetch(`http://localhost:3000/callback?code=${code}&state=guess`);
console.log("callback بـ state مزوّر:       ", forged.status, await forged.text());

$ node idp.js & I=$!; node server.js & S=$!; sleep 1; node attack.js; kill $I $S
IdP: http://localhost:4000
App: http://localhost:3000
302 ← localhost:3000/login
302 ← localhost:4000/authorize
code مسروق من غير verifier: 200 اخد token ❌
نفس الـ code تاني:             200 اخد token ❌
callback بـ state مزوّر:        400 {"error":"state غلط"}

// الـ Authorization Server (زي Google أو Auth0)، على port أربعة آلاف
import express from "express";
import crypto from "node:crypto";
import { generateKeyPair, exportJWK, SignJWT } from "jose";

const ISSUER = "http://localhost:4000";
const CLIENTS = { "my-backend": { redirectUris: ["http://localhost:3000/callback"] } };
const { publicKey, privateKey } = await generateKeyPair("ES256");
const jwk = { ...(await exportJWK(publicKey)), kid: "k1", alg: "ES256", use: "sig" };
const codes = new Map(); // code → { client_id, redirect_uri, code_challenge, nonce, sub, exp }

const app = express();
app.use(express.urlencoded({ extended: false }));
app.get("/jwks", (req, res) => res.json({ keys: [jwk] }));

app.get("/authorize", (req, res) => {
  const { client_id, redirect_uri, response_type, state, nonce, code_challenge } = req.query;
  const client = CLIENTS[client_id];
  if (!client?.redirectUris.includes(redirect_uri))
    return res.status(400).send("client_id أو redirect_uri مش متسجّل");
  if (response_type !== "code") return res.status(400).send("response_type=code بس");
  // هنا المستخدم بيكتب الـ password عند الـ IdP ويوافق. في التجربة: mona وافقت.
  const code = crypto.randomBytes(32).toString("base64url");
  codes.set(code, { client_id, redirect_uri, code_challenge, nonce, sub: "user-7", exp: Date.now() + 60_000 });
  const back = new URL(redirect_uri);
  back.searchParams.set("code", code);
  back.searchParams.set("state", state);
  res.redirect(302, back.href);
});

const idToken = (c) =>
  new SignJWT({ nonce: c.nonce, email: "[email protected]" })
    .setProtectedHeader({ alg: "ES256", kid: "k1" })
    .setIssuer(ISSUER)
    .setAudience(c.client_id)
    .setSubject(c.sub)
    .setIssuedAt()
    .setExpirationTime("5m")
    .sign(privateKey);

const s256 = (v) => crypto.createHash("sha256").update(v).digest("base64url");

app.post("/token", async (req, res) => {
  const { grant_type, code, client_id, redirect_uri, code_verifier } = req.body;
  const c = codes.get(code);
  codes.delete(code); // مرة واحدة، حتى لو المحاولة فشلت
  const fail = (why) => {
    console.log("رفضنا:", why);
    res.status(400).json({ error: "invalid_grant" });
  };
  if (grant_type !== "authorization_code") return res.status(400).json({ error: "unsupported_grant_type" });
  if (!c) return fail("code مش موجود أو اتستخدم قبل كده");
  if (Date.now() > c.exp) return fail("code قديم");
  if (c.client_id !== client_id || c.redirect_uri !== redirect_uri) return fail("client أو redirect_uri مختلف");
  if (typeof code_verifier !== "string" || !/^[\w.~-]{43,128}$/.test(code_verifier))
    return fail("code_verifier مش موجود أو شكله غلط");
  if (s256(code_verifier) !== c.code_challenge) return fail("code_verifier مش مطابق");
  res.json({
    access_token: crypto.randomBytes(24).toString("base64url"),
    token_type: "Bearer",
    expires_in: 300,
    id_token: await idToken(c),
  });
});

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

$ node idp.js & I=$!; node server.js & S=$!; sleep 1; node attack.js; kill $I $S
IdP: http://localhost:4000
App: http://localhost:3000
302 ← localhost:3000/login
302 ← localhost:4000/authorize
رفضنا: code_verifier مش موجود أو شكله غلط
code مسروق من غير verifier: 400 {"error":"invalid_grant"}
رفضنا: code مش موجود أو اتستخدم قبل كده
نفس الـ code تاني:             400 {"error":"invalid_grant"}
callback بـ state مزوّر:        400 {"error":"state غلط"}

// تطبيقنا (الـ client): login بـ OpenID Connect + PKCE
import express from "express";
import crypto from "node:crypto";
import { createRemoteJWKSet, jwtVerify } from "jose";

const IDP = "http://localhost:4000";
const CLIENT_ID = "my-backend";
const REDIRECT = "http://localhost:3000/callback";
const JWKS = createRemoteJWKSet(new URL(IDP + "/jwks"));
const rand = () => crypto.randomBytes(32).toString("base64url");
const cookie = (req, name) => req.get("cookie")?.match(new RegExp(`(?:^|; )${name}=([^;]+)`))?.[1];
const pending = new Map(); // tx → { state, nonce, verifier }

const app = express();

app.get("/login", (req, res) => {
  const t = { state: rand(), nonce: rand(), verifier: rand() };
  const tx = rand();
  pending.set(tx, t);
  const url = new URL(IDP + "/authorize");
  url.search = new URLSearchParams({
    response_type: "code",
    client_id: CLIENT_ID,
    redirect_uri: REDIRECT,
    scope: "openid email",
    state: t.state,
    nonce: t.nonce,
    code_challenge: crypto.createHash("sha256").update(t.verifier).digest("base64url"),
    code_challenge_method: "S256",
  });
  res.cookie("tx", tx, { httpOnly: true, sameSite: "lax", maxAge: 10 * 60 * 1000 });
  res.redirect(302, url.href);
});

app.get("/callback", async (req, res) => {
  const t = pending.get(cookie(req, "tx"));
  pending.delete(cookie(req, "tx")); // كل محاولة login تُستخدم مرة واحدة
  if (!t || req.query.state !== t.state) return res.status(400).json({ error: "state غلط" });

  const r = await fetch(IDP + "/token", {
    method: "POST",
    body: new URLSearchParams({
      grant_type: "authorization_code",
      code: req.query.code,
      redirect_uri: REDIRECT,
      client_id: CLIENT_ID,
      code_verifier: t.verifier,
    }),
  });
  if (!r.ok) return res.status(401).json({ error: "التبادل فشل", idp: await r.json() });
  const { id_token } = await r.json();

  const { payload } = await jwtVerify(id_token, JWKS, { issuer: IDP, audience: CLIENT_ID });
  if (payload.nonce !== t.nonce) return res.status(401).json({ error: "nonce غلط" });
  res.cookie("sid", rand(), { httpOnly: true, secure: true, sameSite: "lax" });
  res.json({ welcome: payload.email, sub: payload.sub });
});

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

import { loginUntilCode } from "./browser.js";
const token = (body) =>
  fetch("http://localhost:4000/token", { method: "POST", body: new URLSearchParams(body) });
const base = { grant_type: "authorization_code", client_id: "my-backend", redirect_uri: "http://localhost:3000/callback" };
let ok = 0, all = 0;
const check = (name, cond) => { all++; if (cond) ok++; console.log(cond ? "✅" : "❌", name); };

// 1) الـ login العادي لازم يفضل شغال
const { tx, callback } = await loginUntilCode();
const res = await fetch(callback.href, { headers: { cookie: tx } });
check("الـ login العادي بيرجّع welcome", res.status === 200 && (await res.json()).welcome === "[email protected]");

// 2) code من غير verifier
let { callback: c2 } = await loginUntilCode();
const code2 = c2.searchParams.get("code");
check("code من غير code_verifier ← 400", (await token({ ...base, code: code2 })).status === 400);
// 3) نفس الـ code بعد محاولة فاشلة: اتحرق
check("الـ code اتحرق بعد أول محاولة ← 400", (await token({ ...base, code: code2, code_verifier: "x".repeat(43) })).status === 400);

// 4) verifier غلط
let { callback: c3 } = await loginUntilCode();
check("code_verifier غلط ← 400", (await token({ ...base, code: c3.searchParams.get("code"), code_verifier: "a".repeat(43) })).status === 400);

// 5) redirect_uri مختلف
let { callback: c4 } = await loginUntilCode();
check("redirect_uri مختلف ← 400", (await token({ ...base, code: c4.searchParams.get("code"), redirect_uri: "http://evil.example/cb", code_verifier: "a".repeat(43) })).status === 400);

// 6) grant_type غلط
check("grant_type غلط ← 400", (await token({ ...base, grant_type: "password", code: "x" })).status === 400);
console.log(`\n${ok}/${all} نجحوا`);