Articles
Panimula sa TypeScript
`Cookie` sa TypeScript

`Cookie` sa TypeScript

Ipinaliliwanag ng artikulong ito ang Cookie sa TypeScript.

Tatalakayin natin ang praktikal na mga pattern para pangasiwaan ang cookies nang ligtas at maaasahan sa parehong browser at server.

YouTube Video

Cookie sa TypeScript

Mga batayang konsepto ng cookies

Ang cookie ay mekanismo para mag-imbak ng maliliit na string (mga pares na name=value) sa kliyente, na nililikha sa pamamagitan ng Set-Cookie HTTP header o document.cookie. Maaari mong kontrolin ang kanilang asal gamit ang mga security attribute (HttpOnly, Secure, SameSite, atbp.).

Pangunahing mga operasyon sa browser: document.cookie

Nasa ibaba ang pinakasimpleng halimbawa para magsulat ng cookie sa browser. Gumawa ng cookie sa pamamagitan ng pagdugtong ng string sa document.cookie.

 1// Set a simple cookie that expires in 7 days.
 2// Note: Comments are in English per the user's preference.
 3const setSimpleCookie = (name: string, value: string) => {
 4  const days = 7;
 5  const expires = new Date(Date.now() + days * 86400_000).toUTCString();
 6  // name=value; Expires=...; Path=/
 7  document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; Expires=${expires}; Path=/`;
 8};
 9
10setSimpleCookie('theme', 'dark');
  • Ang code na ito ay lumilikha ng cookie na mag-e-expire sa loob ng 7 araw. Madaling gamitin sa panig ng browser, ngunit dahil hindi mo maitatakda ang HttpOnly, dapat mong iwasan ang pag-iimbak ng sensitibong impormasyon.

Pagbasa ng cookies (browser)

Ang sumusunod na function ay isang helper na kumukuha ng halaga ng cookie na may tinukoy na pangalan mula sa document.cookie. Ibinabalik ang document.cookie bilang isang string na pinaghiwalay ng semicolon at espasyo ('; '). Kaya, hinahati natin ito at hinahanap ang gustong cookie.

 1// Parse document.cookie and return value for given name or null if not found.
 2const getCookie = (name: string): string | null => {
 3  const cookies = document.cookie ? document.cookie.split('; ') : [];
 4  for (const cookie of cookies) {
 5    const [k, ...rest] = cookie.split('=');
 6    const v = rest.join('=');
 7    if (decodeURIComponent(k) === name) {
 8      return decodeURIComponent(v);
 9    }
10  }
11  return null;
12};
13
14// Example usage:
15const theme = getCookie('theme'); // => "dark" if set
16console.log('theme cookie:', theme);
  • Ang function na ito ay dine-decode ang parehong pangalan at halaga ng cookie upang ligtas na maikumpara at makuha ang mga ito. Pinangangasiwaan nito ang mga duplicate na pangalan ng cookie at mga naka-encode na espesyal na karakter, na ginagawang simple ngunit matatag na implementasyon.

Pag-unawa at paggamit ng mga secure na attribute

Ang mga cookie ay may ilang mahahalagang katangian; bawat isa ay kumokontrol sa seguridad at saklaw ng pag-uugali.

  • Ang katangiang HttpOnly ay pumipigil na ma-access ang cookie mula sa JavaScript, kaya nakatutulong na mabawasan ang XSS (cross-site scripting) na pag-atake. Tandaan na hindi mo maitakda ang HttpOnly mula sa panig ng browser.
  • Ang katangiang Secure ay nililimitahan ang pagpapadala ng mga cookie sa HTTPS lamang, na nagpapababa sa panganib ng eavesdropping at tampering.
  • Ang katangiang SameSite ay kumokontrol kung ipinapadala ang mga cookie sa mga cross-site na kahilingan at tumutulong na pigilan ang mga pag-atakeng CSRF (cross-site request forgery).
  • Ang katangiang Path ay tumutukoy sa saklaw ng mga request path kung saan ipinapadala ang cookie, at ang katangiang Domain ay tumutukoy sa domain kung saan balido ang cookie.
  • Sa pamamagitan ng pagtatakda ng Expires o Max-Age, maaari mong kontrolin ang pag-expire ng cookie.

Halimbawa ng pagdaragdag ng SameSite / Secure sa browser (kung ano ang posible)

Hindi maaaring itakda ang HttpOnly sa client side. Nasa ibaba ang isang halimbawa ng pagdaragdag ng SameSite at Secure sa client side. Gayunpaman, epektibo lamang ang Secure sa mga pahinang HTTPS.

 1// Set cookie with SameSite and Secure attributes (Secure only effective over HTTPS).
 2const setCookieWithAttributes = (name: string, value: string) => {
 3  const maxAge = 60 * 60 * 24 * 7; // 7 days in seconds
 4  // Note: HttpOnly cannot be set from JS; set it on server-side when you want to restrict JS access.
 5  document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; `
 6    + `Max-Age=${maxAge}; `
 7    + `Path=/; `
 8    + `SameSite=Lax; `
 9    + `Secure`;
10};
11
12setCookieWithAttributes('session_hint', 'true');
  • Ang SameSite=Lax ay isang ligtas at karaniwang pagpipilian. Para sa mas mahigpit na limitasyon, gamitin ang SameSite=Strict, ngunit maaaring tumigil sa paggana ang lehitimong pag-navigate mula sa mga panlabas na site.

Pag-set ng cookies sa server (Set-Cookie) (Node / TypeScript)

Sa server maaari mong idagdag ang HttpOnly sa pamamagitan ng Set-Cookie header, kaya ang session management ay pinakamainam na gawin sa panig ng server. Nasa ibaba ang halimbawa gamit ang http module ng Node.

 1// A minimal Node HTTP server in TypeScript that sets a secure HttpOnly cookie.
 2// This example uses built-in 'crypto' for a random session id.
 3import http from 'http';
 4import crypto from 'crypto';
 5
 6const server = http.createServer((req, res) => {
 7  if (req.url === '/login') {
 8    const sessionId = crypto.randomBytes(16).toString('hex');
 9    // Set cookie with HttpOnly, Secure, SameSite and Path
10    // Expires is optional — Max-Age preferred for relative lifetimes.
11    res.setHeader('Set-Cookie', `sid=${sessionId}; `
12      + `HttpOnly; `
13      + `Secure; `
14      + `SameSite=Strict; `
15      + `Path=/; `
16      + `Max-Age=3600`
17    );
18    res.writeHead(302, { Location: '/' });
19    res.end();
20    return;
21  }
22
23  res.writeHead(200, { 'Content-Type': 'text/plain' });
24  res.end('Hello\n');
25});
26
27server.listen(3000, () => {
28  console.log('Server running on http://localhost:3000');
29});
  • Kapag itinakda mo ang katangiang HttpOnly sa server side, nagiging hindi naa-access ang cookie mula sa JavaScript, kaya mas mahirap para sa mga pag-atakeng XSS (cross-site scripting) na nakawin ito. Dagdag pa rito, sa pamamagitan ng pagdaragdag ng katangiang Secure upang ang mga cookie ay laging ipinapadala sa HTTPS, maaari mong maiwasan ang eavesdropping at tampering at mapahusay ang seguridad ng komunikasyon.

Pagpapatupad ng serialization/parsing ng cookie (isang server-side helper)

Nasa ibaba ang isang simpleng utility sa server side na bumubuo ng string ng header na Set-Cookie.

 1// Cookie serialization helper for server-side use.
 2// Returns a properly formatted Set-Cookie header value.
 3type CookieOptions = {
 4  path?: string;
 5  domain?: string;
 6  maxAge?: number;
 7  expires?: Date;
 8  httpOnly?: boolean;
 9  secure?: boolean;
10  sameSite?: 'Strict' | 'Lax' | 'None';
11};
12
13const serializeCookie = (name: string, value: string, opts: CookieOptions = {}): string => {
14  const parts: string[] = [`${encodeURIComponent(name)}=${encodeURIComponent(value)}`];
15
16  if (opts.maxAge != null) parts.push(`Max-Age=${Math.floor(opts.maxAge)}`);
17  if (opts.expires) parts.push(`Expires=${opts.expires.toUTCString()}`);
18  if (opts.domain) parts.push(`Domain=${opts.domain}`);
19  parts.push(`Path=${opts.path ?? '/'}`);
20  if (opts.httpOnly) parts.push('HttpOnly');
21  if (opts.secure) parts.push('Secure');
22  if (opts.sameSite) parts.push(`SameSite=${opts.sameSite}`);
23
24  return parts.join('; ');
25};
26
27// Example usage:
28const headerValue = serializeCookie('uid', 'abc123', {
29  httpOnly: true,
30  secure: true,
31  sameSite: 'Lax',
32  maxAge: 3600
33});
34console.log(headerValue);
35// => "uid=abc123; Max-Age=3600; Path=/; HttpOnly; Secure; SameSite=Lax"
  • Ang utility na ito ang nagsisilbing batayan sa paglikha ng Set-Cookie sa isang custom na server. Mas maraming edge case ang kayang hawakan ng mga library.

Pag-iwas sa pagmanipula gamit ang pirma (HMAC)

Mapanganib ang direktang pag-iimbak ng mahahalagang value sa cookies. Magpapakilala kami ng paraan na lumalagda ng mga value sa server upang matukoy ang pagmanipula. Dito, gumagamit tayo ng HMAC-SHA256. Sa production, kailangan mo ring pamahalaan ang pagpapawalang-bisa ng token sa panig ng server.

 1// A simple HMAC signing and verification helper for cookies.
 2// Signing prevents client from tampering cookie values.
 3import crypto from 'crypto';
 4
 5const SECRET = 'replace_with_env_secret'; // store in env var in production
 6
 7const signValue = (value: string) => {
 8  const hmac = crypto.createHmac('sha256', SECRET);
 9  hmac.update(value);
10  return `${value}.${hmac.digest('hex')}`;
11};
12
13const verifySignedValue = (signed: string): string | null => {
14  const idx = signed.lastIndexOf('.');
15  if (idx === -1) return null;
16  const value = signed.slice(0, idx);
17  const sig = signed.slice(idx + 1);
18
19  const hmac = crypto.createHmac('sha256', SECRET);
20  hmac.update(value);
21  const expected = hmac.digest('hex');
22  // use timing-safe comparison in production
23  if (crypto.timingSafeEqual(Buffer.from(sig), Buffer.from(expected))) {
24    return value;
25  }
26  return null;
27};
28
29// Example usage:
30const signed = signValue('userId=42');
31console.log('signed:', signed);
32console.log('verified:', verifySignedValue(signed)); // => "userId=42"
  • Sa paraang ito, maaari mong suriin kung napakialaman ang halaga ng Cookie. Huwag isama ang signing key sa source code; pamahalaan ito sa pamamagitan ng mga ligtas na paraan gaya ng environment variables.

Cookies at pag-iwas sa CSRF (pangkalahatang mga pattern)

Ang mga session na gumagamit ng cookies ay nangangailangan ng proteksyon laban sa CSRF. Kasama sa mga karaniwang mitigasyon ang:.

  • I-set ang SameSite sa Lax o Strict upang maiwasan ang hindi kinakailangang pagpapadala sa cross-site. Gamitin ang SameSite=None; Secure lamang kapag kinakailangan ang komunikasyong cross-origin.
  • Gumamit ng mga token ng CSRF, na pinatutunayan ng server, para sa mga form at mga kahilingan sa API. Huwag iimbak ang token sa isang HttpOnly cookie; sa halip, ibigay ito sa pamamagitan ng response body o mga meta tag, at ipa-JavaScript lamang itong basahin kapag kinakailangan.
  • Kung maa-access ang token mula sa JavaScript, tiyaking magpatupad din ng mga proteksyon laban sa XSS (CSP, output escaping, atbp.).
  • Hilingin ang muling pag-authenticate para sa mga sensitibong aksyon at sa pag-login, at pigilan ang mga pag-atake ng session fixation.

Nasa ibaba ang isang ligtas na halimbawa ng client na nagpapadala ng CSRF token sa isang header. Ito ay nagpapalagay na natanggap na ng client ang token mula sa server, hal., sa response body.

 1// Example of sending CSRF token safely in a header using fetch.
 2// Assumes CSRF token was provided securely (e.g., via response body or meta tag).
 3async function sendProtectedRequest(url: string, csrfToken: string) {
 4  const res = await fetch(url, {
 5    method: 'POST',
 6    credentials: 'same-origin', // include cookies for same-site requests
 7    headers: {
 8      'Content-Type': 'application/json',
 9      'X-CSRF-Token': csrfToken
10    },
11    body: JSON.stringify({ action: 'doSomething' })
12  });
13  return res;
14}
  • Kung itatakda mo ang credentials: 'same-origin', tanging mga cookie para sa parehong origin ang ipinapadala. Sa server, i-validate ang halaga ng header na X-CSRF-Token at tiyaking tumutugma ang token. Kung kinakailangan ang mga kahilingang cross-site, i-configure ang CORS nang maingat.

Cross-site (CORS) at ang kaugnayan nito sa credentials

Upang magpadala at tumanggap ng mga cookie sa komunikasyong cross-origin, dapat tukuyin ng client ang credentials: 'include' at dapat itakda ng server ang Access-Control-Allow-Credentials: true. Gayunpaman, limitahan ang konpigurasyong ito sa mga pinagkakatiwalaang origin at huwag gumamit ng Access-Control-Allow-Origin: *.

 1async function fetchCrossOriginData() {
 2  // Example: cross-origin fetch sending cookies.
 3  // Server must set Access-Control-Allow-Credentials: true
 4  // and a specific trusted origin.
 5  const res = await fetch('https://api.example.com/data', {
 6    credentials: 'include', // send cookies only to trusted domains
 7    method: 'GET'
 8  });
 9  return res;
10}
  • Ang kombinasyon ng CORS at mga cookie ay napakaselan mula sa pananaw ng seguridad. Pamahalaan nang mahigpit ang mga pinahihintulutang origin gamit ang isang whitelist at iwasan ang hindi kinakailangang komunikasyong cross-site. Gayundin, kapag gumagamit ng SameSite=None; Secure, ipatupad ang HTTPS upang maiwasan ang mga pag-atake ng man-in-the-middle.

Halimbawa: secure na mga setting ng session cookie gamit ang Express (TypeScript)

Sa praktika, gumamit ng Express, ang cookie library, express-session, at iba pa. Nasa ibaba ang simpleng halimbawa gamit ang express at cookie-parser. Sa praktika, i-set ang secure sa true at pamahalaan ang secret sa pamamagitan ng environment variables.

 1// Express example using cookie-parser and setting a secure httpOnly cookie.
 2// npm install express cookie-parser @types/express @types/cookie-parser
 3import express from 'express';
 4import cookieParser from 'cookie-parser';
 5
 6const app = express();
 7app.use(cookieParser(process.env.COOKIE_SECRET));
 8
 9app.post('/login', (req, res) => {
10  // authenticate user (omitted)
11  const sessionId = 'generated-session-id';
12  res.cookie('sid', sessionId, {
13    httpOnly: true,
14    secure: true,        // require HTTPS in production
15    sameSite: 'lax',
16    maxAge: 1000 * 60 * 60 // 1 hour
17  });
18  res.json({ ok: true });
19});
20
21app.listen(3000);
  • Sa paggamit ng tampok na secret ng cookieParser, madali mong mapapangasiwaan ang mga signed cookie. Gayunpaman, sa mga totoong aplikasyon, mula sa pananaw ng seguridad at scalability, hindi mo dapat direktang iimbak ang datos sa cookies; sa halip, gumamit ng nakalaang session store.

Mga prefix ng cookie na __Host- at __Secure-

Nagpapatupad ang mga browser ng mga natatanging tuntunin para sa ilang prefix.

  • Ang prefix na __Secure- Kung ang pangalan ng cookie ay nagsisimula sa __Secure-, kinakailangan ang Secure na attribute.
  • Ang prefix na __Host- Kung nagsisimula ito sa __Host-, kinakailangan ang Secure, ang path ay dapat / (root), at hindi dapat i-set ang Domain.

Ang paggamit ng mga ito ay nagpapababa ng maling pagkakaayos at nagpapabuti ng seguridad.

Pinakamahuhusay na gawi para sa cookies

Upang pangasiwaan ang mga Cookie nang ligtas, isaalang-alang ang mga sumusunod na punto.

  • Huwag mag-imbak ng sensitibong impormasyon nang direkta sa cookies. Mas mainam ang server-side na session ID para sa mga access token.
  • I-set ang session cookies na may HttpOnly, Secure, at SameSite=Lax (o Strict).
  • Gamitin ang mga prefix tulad ng __Host- at __Secure-.
  • Isaalang-alang ang mga pirma (HMAC) at encryption upang maiwasan ang pagmanipula at pakikinig.
  • I-enable ang Secure at i-require ang HTTPS.
  • Tiyakin ang pinakamababang pribilehiyo at maiikling expiration.
  • Gumamit ng mga CSRF token.
  • Mag-ingat sa mga pagkakaiba ng asal ng SameSite sa iba't ibang browser, lalo na sa mga luma.

Karaniwang mga maling akala tungkol sa cookies

Tungkol sa cookies, maging maingat sa mga sumusunod na karaniwang maling akala.

  • 'Ang pagdaragdag ng HttpOnly ay nag-aalis sa epekto ng XSS.' Bagaman pinipigilan ng HttpOnly ang mga cookie na ma-access ng JavaScript, maaari pa ring gamitin ang XSS upang magpadala ng mga arbitrayong kahilingan. Dapat mo ring gamitin ang beripikasyon ng CSRF token, CSP (Content Security Policy), at sanitization ng input.
  • 'Hindi kailangan ang Secure para sa lokal na development.' Ang pagsasagawa ng simulasyon ng HTTPS at pagpapatunay ng pag-uugali kahit sa mga lokal na kapaligiran ay nagpapahusay sa katumpakan ng pagsubok. Hindi bababa sa, dapat gamitin ang HTTPS sa mga kapaligirang staging at production.
  • 'Maginhawa ang mahabang panahon ng pag-expire.' Kung magtakda ka ng mahabang buhay para sa mga cookie, humahaba ang panahong maaari silang maabuso kung manakaw. Maaari kang magtakda ng mas maiikling expiration at isama ang pana-panahong muling pagpapatotoo (re-authentication) at pagpapalit (rotation) ng token.

Buod

Bagama't madaling gamitin ang cookies, ang maling paghawak sa mga ito ay maaaring magpakilala ng mga kahinaan sa seguridad. Upang mapangasiwaan ang mga ito nang tama gamit ang TypeScript, mahalagang maunawaan ang mga attribute tulad ng HttpOnly, Secure, at SameSite, at ipatupad ang ligtas na mga setting sa panig ng server. Sa hindi pag-iimbak nang direkta ng sensitibong data at sa pagsasama ng mga pirma at maiikling expiration, makakamit mo ang ligtas at maaasahang pamamahala ng session.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

`Shared Worker` sa TypeScript