9.1. fejezet

A fejezet anyaga

Sütik

Az előző fejezetben kimondtuk, hogy egy modern webalkalmazásnak képesnek kell lennie a felhasználó tevékenységeinek nyomonkövetésére. Megismerkedtünk a sessionnel, ami egy szerveroldali technológia volt a menetkövetés megvalósítására. Ebben a részben megnézünk egy kliensoldali megoldást is, a böngészősütik (angolul: cookie-k) használatát.

Valószínűleg mindenki találkozott már azzal az érdekes jelenséggel, hogy amikor nem első alkalommal látogatunk meg egy weboldalt, akkor egy korábbi látogatásunkkal kapcsolatos információk jelenhetnek meg előttünk.

Egy hétköznapi példa - Rendeljünk pizzát!

Tegyük fel, hogy éhesek vagyunk, ezért a kedvenc pizzázónk weboldalán rendelünk magunknak egy pizzát. Pár nappal később szintén elhatározzuk, hogy pizzát szeretnénk rendelni ugyaninnen.

A pizzázó weboldalára visszatérve a következőket tapasztalhatjuk:

• a főoldalon az ajánlatok között megjelenik a pizza, amit korábban rendeltünk, illetve néhány ahhoz hasonló pizza is felajánlásra kerül
• a kiszállítással és számlázással kapcsolatos űrlapon nem kell minden adatot újból megadni, a rendszer "emlékszik" a korábbi rendelésünk során megadott információkra
• a legutóbbi látogatásunk során eszközölt felhasználói beállításainkat (pl. világos helyett sötét téma kiválasztását) szintén eltárolta a weboldal.

Felmerülhet bennünk a kérdés, hogy hogyan is emlékszik a korábbi látogatásunk tevékenységeire a weboldal. Ennek egyszerű magyarázata, hogy a webalkalmazás böngészősütiket használ, amelyek segítségével eltárolja egy korábbi látogatás adatait, műveleteit.

A böngészősütik segítségével kliensoldalon, a böngészőben tárolhatunk el kis mennyiségű adatot, így azt nem kell újból megadni a weboldal egy későbbi felkeresése során.

Mivel a sütik kliensoldalon tárolódnak, ezért a felhasználók egyszerűen elérhetik és manipulálhatják őket. Emiatt fontos, hogy a sütiket NEM SZABAD bizalmas adatok (pl. jelszavak) tárolására használni!

Egy másik fontos probléma, amit érdemes észben tartani, hogy a felhasználó letilthatja a weboldalunkon a sütik használatát. Emiatt a sütik használata mellett célszerű lehet egy alternatív megoldást is kidolgozni.

Sütik működése

Az alábbiakban részletesen is megnézzük, hogy hogyan működnek a böngészősütik.

A süti technológia négy komponensből áll:

1. egy süti fejléc sorból a HTTP válasz üzenetben
2. egy süti fejléc sorból a HTTP kérés üzenetben
3. egy süti fájlból a felhasználó rendszerében, amelyet a böngésző menedzsel
4. egy szerveroldali adatbázisból.

A teljes folyamat a következőképpen zajlik:

• a kliens egy hagyományos HTTP kérést küld, amit a szerver fogad
• a szerver készít egy egyedi azonosítót a felhasználónak, és egy, az azonosítóval ellátott belépési pontot az adatbázisban
• a szerver egy HTTP válasszal reagál egy kérésre, amely ezúttal tartalmaz egy Set-cookie: <azonosító> fejléc sort is
• a böngésző megkapja a választ, és a rendszerünkben található süti fájlt kiegészíti egy új sorral, amely tartalmazza a szerver címét és a fejléc sorban található azonosítót
• ezt követően, ha ugyanezen szerver felé indítunk HTTP kérést, akkor a kérésüzenetben megjelenik egy Cookie: <azonosító> fejléc sor, aminek köszönhetően a szerver követni tudja a felhasználó aktivitását a weboldalon.

A fent leírt folyamatot az alábbi ábra szemlélteti.

Sütik kezelése PHP-ban

Süti létrehozása, elérése

PHP-ban a setcookie() függvénnyel hozhatunk létre böngészősütit. Ennek a fejléce a következőképpen néz ki:

<?php
  setcookie(string $name, string $value="", int $expires=0, string $path="", string $domain="", bool $secure=FALSE, bool $httponly=FALSE);
?>

A paraméterek rendre:

• $name: a süti neve
• $value: a süti értéke
• $expires: a lejárati idő, ami után a süti törlésre kerül
  • értékéül általában UNIX időbélyeget adunk meg
  • jellemzően a time() függvény visszatérési értékéhez (az 1970.01.01. óta eltelt másodpercek számához) hozzáadott másodpercek számával adjuk meg
• $path: a süti elérési útvonala a szerveren
• $domain: a tartománynév, amin belül a süti elérhető
• $secure: csak a biztonságos HTTPS protokollon keresztül legyen-e továbbítható a süti
• $httponly: csak a HTTP protokollon keresztül legyen-e elérhető a süti
  • ennek köszönhetően a szkriptek (pl. JavaScript) nem férnek hozzá.

A fenti paraméterek közül csak az első, $name paraméter értékét kötelező megadni, a többi paraméter opcionális. Ha egy meglévő sütit módosítani szeretnénk, akkor ezt a setcookie() függvény újbóli meghívásával tehetjük meg egyszerűen.

Mivel a sütik a HTTP üzenetek fejlécében közlekednek, ezért itt is fontos, hogy a setcookie() függvényt bármilyen kimenet (pl. HTML tagek, üres sorok, PHP által generált output) elküldése előtt hívjuk meg, hiszen utólag már nincs lehetőség a fejlécek megadására!

PHP-ban a sütiket a $_COOKIE szuperglobális tömb segítségével érhetjük el.

Példa: Egy süti segítségével megszámoljuk, hogy egy felhasználó hányszor látogatta meg a weboldalunkat

<?php
  $latogatasok = 1;                         // hányszor látogattuk meg a weboldalt eddig

  // ha már van egy, az eddigi látogatások számát tároló sütink, akkor betöltjük annak az értékét
  if (isset($_COOKIE["visits"])) {
    $latogatasok = $_COOKIE["visits"] + 1;  // az eddigi látogatások számát megnöveljük 1-gyel
  }

  // egy "visits" nevű süti a látogatásszám tárolására, amelynek élettartama 30 nap
  setcookie("visits", $latogatasok, time() + (60*60*24*30), "/");
?>
<!DOCTYPE>
<html lang="hu">
  <head>
    <title>Sütik</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <?php
      if ($latogatasok > 1) {     // ha már korábban járt a felhasználó a weboldalunkon...
        echo "Üdvözöllek ismét! Ez a(z) $latogatasok. látogatásod.";
      } else {                    // ha első alkalommal látogatja meg a weboldalunkat...
        echo "Üdvözöllek a weboldalamon! Ez az 1. látogatásod.";
      }
    ?>
  </body>
</html>

Miután megtekintjük a fenti kód kimenetét a böngészőben, minden egyes böngészőablak frissítés után 1-gyel megnő a látogatás számláló értéke.

A böngészőkben lehetőségünk van a weboldal által használt sütik információinak megtekintésére. Például a Google Chrome böngészőben az F12 billentyűvel megnyithatjuk a fejlesztői konzolt, majd az Application (Alkalmazás) fülre kattintva a Storage (Tárhely) menüpont alatti Cookies (Sütik) opciót kiválasztva megtekinthetjük az oldal által használt böngészősütik adatait.

Süti törlése

Ha PHP-ban egy meglévő böngészősütit törölni szeretnénk, akkor a setcookie() függvény meghívásakor a lejárati időt (3. paraméter) egy múltbeli dátumra állítjuk.

Példa: Egy meglévő süti törlése

<?php
  setcookie("visits", "", time() - 3600);   // a lejárati időt 1 órával ezelőttre állítjuk
  echo "A 'visits' böngészősüti sikeresen törölve!";
?>

Gyakorló feladat

Feladat

Írj egy egyszerű, 2 lapból álló weboldalt a következő szempontok szerint:

• A home.php fájlban hozz létre egy űrlapot, amelyen a felhasználó egy lenyíló lista segítségével kiválaszthatja a weboldal nyelvét! Az űrlap feldolgozásakor a kiválasztott nyelvet tárold el egy lang nevű, 1 napos lejárati idővel rendelkező böngészősütiben! Az űrlap alatt jeleníts meg egy szöveget a sütiben tárolt nyelven (ha a süti nem létezik, akkor alapértelmezett módon angolul)! Ez alá helyezz el egy "Delete cookies" feliratú hivatkozást, amely a delete_lang.php állományra navigálja a felhasználót!
• A delete_lang.php fájlban töröld a lang sütit, majd irányítsd vissza a felhasználót a home.php oldalra!

Egy lehetséges megoldás

A home.php fájl:

<?php
  if (isset($_POST["submit-btn"])) {
    if (isset($_POST["lang"]) && trim($_POST["lang"]) !== "") {
      $lang = $_POST["lang"];                     // az űrlapon megadott nyelv lementése egy változóba
      setcookie("lang", $lang, time() + 86400);   // 1 napos lejárati idővel rendelkező, "lang" nevű süti létrehozása
      header("Location: home.php");               // weboldal újratöltése
    }
  }
?>

<!DOCTYPE html>
<html>
<head>
  <title>Cookies</title>
  <meta charset="UTF-8"/>
</head>
<body>
  <form action="home.php" method="POST">
    <label for="language">Language:</label>
    <select id="language" name="lang">
      <option value="en" <?php if (isset($_COOKIE["lang"]) && $_COOKIE["lang"] === "en") echo "selected"; ?>>English</option>
      <option value="de" <?php if (isset($_COOKIE["lang"]) && $_COOKIE["lang"] === "de") echo "selected"; ?>>Deutsch</option>
      <option value="hu" <?php if (isset($_COOKIE["lang"]) && $_COOKIE["lang"] === "hu") echo "selected"; ?>>Magyar</option>
    </select>
    <input type="submit" name="submit-btn" value="OK">
  </form>

  <?php
    // kiírunk egy szöveget a "lang" süti értékéül beállított nyelven

    if (isset($_COOKIE["lang"]) && $_COOKIE["lang"] === "hu") {
      echo "<h1>Üdvözöllek a weboldalamon!</h1>";
    } elseif (isset($_COOKIE["lang"]) && $_COOKIE["lang"] === "de") {
      echo "<h1>Willkommen auf meiner Seite!</h1>";
    } else {
      echo "<h1>Welcome to my website!</h1>";
    }
  ?>

  <a href="delete_lang.php">Delete cookies</a>
</body>
</html>

A delete_lang.php fájl:

<?php
  setcookie("lang", "", time() - 3600);         // a "lang" nevű süti törlése
  header("Location: home.php");                 // átirányítás a home.php oldalra
?>

---

Utolsó frissítés: 2024-02-10 17:23:02