Kuidas seadistada küpsiseid brauseris?

Sõrmuste seadistamine brauseris on võimalik mitmel viisil.

1. HTTP päise Set-Cookie kaudu serveris. See on peamine meetod küpsise seadistamiseks, mis toimub serveri poolt. Server saadab brauserile päise Set-Cookie, mis instructrib brauserit salvestama teatud võtme-väärtuse paari.

   Näide serveri HTTP vastusest:

   HTTP/1.1 200 OK
   Content-Type: text/html
   Set-Cookie: username=johndoe; Expires=Thu, 21 Dec 2023 12:00:00 GMT; Path=/; Secure; HttpOnly
   Set-Cookie: settings=theme=dark&lang=en; Path=/
   

   Set-Cookie päise parameetrid:

   • name=value: küpsise nimi ja väärtus. Kohustuslik parameeter.
   • Expires=<kuupäev>: kuupäev ja aeg, millal küpsis aegub. Kui see pole määratud, on küpsis sessiooni ja kustutatakse brauseri sulgemisel. Kuupäeva formaat - RFC 1123.
   • Max-Age=<sekundid>: küpsise eluea maksimaalne aeg sekundites. On prioriteet Expires ees.
   • Domain=<domeen>: domeen, mille jaoks küpsis on saadaval. Tavaliselt - praegune domeen (aga mitte alamdomeenid).
   • Path=<tee>: tee serveris, mille jaoks küpsis on saadaval. Tavaliselt - juurtee /.
   • Secure: märk, mis näitab, et küpsis peab saatma ainult HTTPS-i kaudu.
   • HttpOnly: märk, mis näitab, et küpsis ei ole JavaScripti document.cookie kaudu kättesaadav. Kaitseb XSS rünnakute eest.
   • SameSite=<režiim>: kontrollib küpsise saatmist ristveebipäringutes. Võimalikud väärtused: Strict, Lax (vaikimisi), None.

2. JavaScripti kasutamine kliendi poolel. document.cookie objektiga saab lugeda, kirjutada ja kustutada küpsiseid.

   Küpsise kirjutamine:

   // Lihtsa küpsise seadistamine
   document.cookie = "username=johndoe";
   
   // Küpsise seadistamine koos expires, path, secure ja SameSite=Lax
   const expiryDate = new Date();
   expiryDate.setTime(expiryDate.getTime() + (30 * 24 * 60 * 60 * 1000)); // 30 päeva
   document.cookie = `token=abcdef123456; expires=${expiryDate.toUTCString()}; path=/; secure; SameSite=Lax`;
   

   Küpsise lugemine:

   // document.cookie tagastab kõigi saadaolevate küpsiste stringi kujul "key1=value1; key2=value2; ..."
   console.log(document.cookie);
   

   Küpsise kustutamine: Küpsise kustutamiseks tuleb see määrata vananenud kuupäevaga.

   document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; // määrata expires minevikku
   

   Oluline on kustutamisel märkida samad path ja domain parameetrid (kui need olid määratud), nagu ka loomisel. SameSite väärtus peab samuti sobima, et kustutamine oleks korrektne.

3. Kolmanda osapooga JavaScripti teekide kasutamine. On teeke, mis lihtsustavad küpsistega töötamist (näiteks js-cookie). Need pakuvad mugavamat API-d küpsiste seadistamiseks, saamiseks ja kustutamiseks.

   Näide js-cookie-ga:

   // Teegi lisamine
   // <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
   
   // Küpsise seadistamine
   Cookies.set('username', 'johndoe');
   
   // Küpsise seadistamine valikutega
   Cookies.set('token', 'abcdef123456', { expires: 30, path: '/', secure: true, sameSite: 'Lax' }); // expires päevades
   
   // Küpsise saamine
   const username = Cookies.get('username'); // Tagastab 'johndoe' või undefined
   const allCookies = Cookies.get(); // Tagastab objekti kõigi küpsistega
   
   // Küpsise kustutamine
   Cookies.remove('username');
   Cookies.remove('token', { path: '/' }); // Määrata tee, kui see oli määratud