2024. október 7., hétfő

12 B - Titkosírás hack avagy hogyan használju a Base64 Kódolási és Dekódolási Függvényeket



Gondolkoztam, hogyan dobhatnám fel egy kicsit az unalmas függvény gyakorlást, ekkor jutott eszembe, hogy általánosban mindig igyekeztünk titkosírást kitalálni. Utána néztem, hogyan lehetne ezt valamiféle függvénnyel megoldani. A következőtre leltem:

A Base64 egy kódolási eljárás, amelyet általában bináris adat (például képek, fájlok) szöveges formátumba való átalakítására használnak. A Base64 kódolás során az adatok biztonságosabban továbbíthatók olyan protokollokon keresztül, amelyek nem kezelnek jól bináris adatokat, például e-mail vagy URL-ek.

JavaScriptben két beépített függvényt használhatunk a Base64 kódolásra és dekódolásra:

1.     btoa() – "Binary to ASCII":

    • Ez a függvény a szöveges adatot Base64 formátumba kódolja.
    • Csak karakterláncokat fogad el, és a kódolt formátum egy ASCII-karakterlánc lesz.

2.     atob() – "ASCII to Binary":

    • Ez a függvény a Base64 kódolt szöveget visszakódolja az eredeti formátumába.
    • Ez is karakterláncot fogad el, és karakterláncot ad vissza.

btoa() Függvény – Kódolás

A btoa() függvény egy szöveget Base64 formátumba kódol. Fontos megjegyezni, hogy a kódolandó szövegnek ASCII karakterekből kell állnia, mivel a btoa() nem tud Unicode karaktereket közvetlenül kezelni.

Szintaxis:

let encodedData = btoa(string);

Példa:

let originalText = "Hello, World!";
let encodedText = btoa(originalText);
console.log(encodedText); // "SGVsbG8sIFdvcmxkIQ=="
  • Magyarázat: A "Hello, World!" szöveget Base64 formátumba kódoljuk, amelynek eredménye: SGVsbG8sIFdvcmxkIQ==.

Unicode kezelés:

A btoa() függvény alapértelmezetten nem támogatja a Unicode karaktereket, mivel azok nem ASCII karakterek. Ha Unicode karakterekkel dolgozol, előbb megfelelően kell őket átalakítani.

Unicode karakterek kódolásához:

function utf8_to_b64(str) {
    return btoa(unescape(encodeURIComponent(str)));
}
 
let unicodeText = "Üzenet";
let encodedUnicodeText = utf8_to_b64(unicodeText);
console.log(encodedUnicodeText); // "w5Z6ZW5ldA=="

atob() Függvény – Dekódolás

Az atob() függvény a Base64 formátumban kódolt szöveget visszaalakítja az eredeti formátumba.

Szintaxis:

let decodedData = atob(base64String);

Példa:

let encodedText = "SGVsbG8sIFdvcmxkIQ==";
let decodedText = atob(encodedText);
console.log(decodedText); // "Hello, World!"
  • Magyarázat: A Base64 formátumban kódolt szöveget visszaalakítjuk az eredeti "Hello, World!" szöveggé.

Unicode kezelés:

Ha az eredeti szöveg Unicode karaktereket tartalmaz, az atob() alapértelmezetten nem tudja visszaalakítani azokat helyesen. Ebben az esetben az alábbi módon kell eljárni:

Unicode karakterek dekódolásához:

function b64_to_utf8(str) {
    return decodeURIComponent(escape(atob(str)));
}
 
let encodedUnicodeText = "w5Z6ZW5ldA==";
let decodedUnicodeText = b64_to_utf8(encodedUnicodeText);
console.log(decodedUnicodeText); // "Üzenet"

Base64 használati esetek

1.     Adatok biztonságos továbbítása: Base64 kódolást gyakran használnak e-mailben vagy URL-ben történő adatátvitelhez, mivel ezek a protokollok nem tudnak kezelni bináris adatokat.

2.     Képek és fájlok beágyazása: HTML oldalon képeket és más fájlokat is Base64 formátumban tárolhatunk és közvetlenül beágyazhatunk az oldalba, így nem kell külön fájlokat külső forrásból letölteni.

Példa egy Base64-kódolt kép megjelenítésére:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Base64 Image">

3.     Alapvető titkosítás: Bár nem biztonságos titkosítási módszer, a Base64-t egyszerű adatvédelmi megoldásokhoz is használják. Fontos azonban megjegyezni, hogy könnyen visszafejthető, tehát nem alkalmas érzékeny adatok védelmére.

Összegzés

  • btoa(): A karakterlánc Base64 formátumba való kódolására szolgál, de csak ASCII karaktereket támogat.
  • atob(): A Base64 formátum visszakódolására használjuk, és szintén csak ASCII karaktereket támogat.

Ha Unicode karakterekkel dolgozol, akkor szükséges az átalakítás a kódolás és dekódolás előtt/után.

Ha bármi hasonlóra lelne valaki, ne tartsátok magatokban, osszátok meg velünk. :-)

12 B - Űrlapfeldolgozás -> email cím ellenőrzése javascripttel

Űrlap létrehozásakor, amikor e-mail címet kérünk be érdemes az <input type="email"> elem-et használni, hiszen ez is végez némi alapvető ellenőrzést a böngészőben, amikor az űrlapot elküldjük. Az alapvető ellenőrzés alatt azt értem, hogy azt vizsgálja, az email cím tartalmazza-e a @ karaktert, és utána van-e valamilyen domain név. Nem ellenőrzi azonban a domain végződés hosszát (mint pl. a .com vagy .org), sem a felhasználónév bonyolultságát. Tehát az olyan egyszerű címeket is elfogadhatja, mint például user@domain (bár a valóságban ez egy érvénytelen email cím lenne).

Ha az űrlapot próbálják elküldeni érvénytelen email cím formátummal, a böngésző automatikusan egy figyelmeztetést jelenít meg, általában egy felugró üzenet formájában (pl. "Kérjük, adjon meg egy érvényes email címet"). Ez a figyelmeztetés a böngésző nyelvének megfelelően jelenik meg, tehát automatikusan lokalizált üzeneteket kapunk.

Az olyan HTML5 attribútumok, mint a required, szintén működnek az email mezőknél. Ha hozzáadod ezt az attribútumot, akkor a böngésző nem engedi az űrlap beküldését, ha az email mező üres vagy nem megfelelő formátumú.

Az olyan attribútumok, mint a pattern és a maxlength, további ellenőrzéseket tesznek lehetővé, ha a beépített validáció nem elegendő.

Az <input type="email"> használata különösen hasznos mobil eszközökön, mivel sok mobilböngésző automatikusan egy olyan virtuális billentyűzetet jelenít meg, amely tartalmazza a @ és a pont karaktert, hogy megkönnyítse az email cím bevitelét.

Mit nem ellenőriz a böngésző:

  • A böngésző nem ellenőrzi, hogy az email cím ténylegesen létezik-e, vagy hogy az adott domain valódi email szolgáltatást biztosít-e.
  • A szabványos email címek egyéb speciális karaktereit sem feltétlenül ellenőrzi szigorúan, tehát például olyan címek, mint "user+test@domain.com", érvényesnek tekinthetők.

Miért hasznos a JavaScriptes ellenőrzés?

Bár a böngésző alapvető ellenőrzést végez, a JavaScriptes validációval pontosabb és testreszabottabb ellenőrzéseket végezhetsz, például:

  • Korlátozhatod az email címeket bizonyos domainre (pl. csak .com végződések engedélyezése).
  • Testreszabhatod a hibaüzeneteket, hogy jobban illeszkedjenek az oldal stílusához.
  • Bonyolultabb mintákat is alkalmazhatsz, ha szükséges (pl. olyan speciális email címek, amelyeket a böngésző nem kezel jól).
Az <input type="email"> használata praktikus, mert alapvető validációt nyújt a böngésző szintjén, de ha összetettebb szabályokat szeretnél alkalmazni, akkor érdemes JavaScript alapú validációt is hozzáadni a pontosabb ellenőrzés érdekében, mint amit itt a példában láthatsz:

A let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; sor egy reguláris kifejezés (regex), amelyet arra használunk, hogy egy email cím formátumát ellenőrizzük. Lássuk részletesen, mit jelent ez a kifejezés:

    1. ^: A kifejezés elején lévő ^ karakter azt jelenti, hogy a minta az adott sor elejéről kezdődik (tehát nem lehet más karakter az elején).

    2. [a-zA-Z0-9._-]+:

      • [a-zA-Z0-9._-]: Ez egy karakterkészlet, amely azt jelzi, hogy az email cím első része (a @ előtti rész) tartalmazhat kis- és nagybetűket (a-z és A-Z), számokat (0-9), valamint a pontot (.), aláhúzást (_), és kötőjelet (-).
      • +: A plusz jel azt jelenti, hogy az előző karakterkészletből legalább egy, de akár több karakter is szerepelhet, tehát az email címnek mindenképpen tartalmaznia kell legalább egy ilyen karaktert.
    3. @: Ez a karakter az email cím kötelező része, amely elválasztja a felhasználónevét és a domain nevet (pl. user@example.com).

    4. [a-zA-Z0-9.-]+:

      • [a-zA-Z0-9.-]: A domain név része a @ utáni rész. Tartalmazhat kis- és nagybetűket, számokat, pontot (.) és kötőjelet (-).
      • +: Ismét azt jelzi, hogy legalább egy karakternek szerepelnie kell a megadott karakterekből (a domain név részben).
    5. \.: A \. egy speciális karaktert jelöl, itt konkrétan a pontot (.), mivel a reguláris kifejezésben a pont önmagában bármely karaktert jelölne. A \ jel használatával szó szerint a pontot keressük.

    6. [a-zA-Z]{2,6}:

      • [a-zA-Z]: A domain végződése csak betűket tartalmazhat (kis- és nagybetűk is elfogadhatók).
      • {2,6}: Ez azt jelenti, hogy a betűk száma minimum 2, maximum 6 lehet, vagyis olyan végződéseket keresünk, mint .com, .hu, .net, .info, stb.
    7. $: A dollárjel azt jelzi, hogy a minta a sor végére ér (nincs más karakter a végén).

    Összefoglalva:

    Ez a reguláris kifejezés egy email címet keres, amely megfelel a következő mintának:

    • Tartalmaz kis- és nagybetűket, számokat, pontot, aláhúzást vagy kötőjelet a @ előtti részben.
    • A @ után következik egy domain név, amely kis- és nagybetűket, számokat, pontot és kötőjelet tartalmazhat.
    • A domain név egy pont után egy 2-6 karakter hosszú végződéssel (például .com vagy .hu) zárul.
    Az így ellenőrzött email-t test() metódussal ellenőrizhetjük.
    pl. : regex.test(string)
  • regex: Ez a reguláris kifejezés, amit létrehoztál (pl. /^[a-zA-Z]+$/).
  • string: Az a szöveg, amit meg akarsz vizsgálni, hogy megfelel-e a reguláris kifejezésnek.

    Visszatérési érték:

    A test() metódus egy logikai értékkel tér vissza:

    • true: Ha a reguláris kifejezés illeszkedik a megadott sztringre.
    • false: Ha a reguláris kifejezés nem illeszkedik a megadott sztringre.
  • Példa:

    let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; 
    let email = "teszt@example.com"; 
      if (emailPattern.test(email)) { 
               console.log("Érvényes email cím."); 
        } else { 
              console.log("Érvénytelen email cím."); 
        }

  • Ebben a példában a test() metódus azt ellenőrzi, hogy a email változó értéke megfelel-e az emailPattern reguláris kifejezésnek.
  • Ha az email cím formátuma megfelelő, akkor a test() true-t ad vissza, és megjelenik a "Érvényes email cím." üzenet.
  • Ha az email cím nem felel meg a mintának, akkor false lesz az eredmény, és a "Érvénytelen email cím." üzenet jelenik meg.
  • 13 B - egyedi számok létrehozása

     A date("U") egy PHP függvény, amely az aktuális dátumot és időt Unix időbélyeg formájában adja vissza.

    Mit jelent a Unix időbélyeg?

    A Unix időbélyeg (más néven Unix timestamp) az az idő, amely a 1970. január 1. 00:00:00 (UTC) időpont óta eltelt másodpercek számát jelenti. Ez egy egyszerű egész szám, amely folyamatosan növekszik minden másodperccel. Például, ha most meghívod a date("U") függvényt, az visszaadja, hogy hány másodperc telt el 1970. január 1. óta.

    Mikor használjuk?

    A Unix időbélyeg nagyon hasznos, amikor egyedi fájlneveket, időbélyegeket vagy időszámításokat kell kezelni. Azért használjuk, mert egy egyedi, egyszerű számot generál, amely jól alkalmazható például fájlok elnevezésénél, hogy elkerüljük az ütközéseket, vagy időszámításokban, amikor másodpercekben kell kifejezni az időt.

    Példa:

    echo date("U"); // Például: 1707158419

    Ez a szám az aktuális másodpercben eltelt idő 1970. január 1. óta.

    A uniqid() is kiválóan alkalmas arra, hogy egyedi fájlneveket hozz létre. A uniqid() függvény egy egyedi azonosítót generál a jelenlegi időpont alapján, ami garantálja, hogy minden híváskor egyedi értéket ad vissza.

    A különbség a date("U") és a uniqid() között:

    • date("U"): Ez egy egyszerű Unix időbélyeg, amely az aktuális időt másodpercekben adja vissza. Ez az érték minden másodpercben ugyanaz marad, így ha ugyanazon a másodpercen belül több fájlt generálsz, azok azonos nevet kaphatnak.

    • uniqid(): Ez egy egyedi azonosító, amely nemcsak az aktuális időn alapszik, hanem nagyobb precizitással működik (mikroszekundumokban mérve). Ezért, ha ugyanabban a másodpercben több fájlt generálsz, azok egyedi neveket fognak kapni.

    Példa uniqid() használatára:

    $unique_name = uniqid(); echo $unique_name; // Például: 652ebe5c7c6db

    Ez a generált érték garantáltan egyedi lesz minden egyes híváskor, még akkor is, ha nagyon gyors egymásutánban hívod meg a függvényt.

    uniqid() előnyei fájlfeltöltéskor:

    • Biztosítja az egyedi fájlneveket: Még akkor is, ha egy másik felhasználó ugyanabban a másodpercben töltene fel egy fájlt, a nevek különbözni fognak.
    • Egyszerű és gyors használat: Nem kell bonyolult beállításokkal vagy paraméterekkel foglalkozni, mivel alapértelmezetten a jelenlegi időt használja a generáláshoz.

    Ha biztosra akarsz menni az egyedi fájlnevek létrehozásában, akkor a uniqid() egy nagyon jó megoldás.

    2024.10.07 -11. heti terv

     


    13 B - Mit jelent a mime típus?

     A MIME-típusok (Multipurpose Internet Mail Extensions) a fájlformátumok azonosítására szolgálnak, különösen, amikor fájlokat küldünk vagy fogadunk a weben keresztül, például amikor egy szerver adatokat küld a böngészőnek vagy fájlt töltünk fel egy szerverre.

    Minden fájlnak van egy MIME-típusa, ami egy kéttagú azonosító, és azt mondja meg, hogy a fájl milyen típusú adatot tartalmaz, illetve hogyan kell kezelni. Ez lehetővé teszi a szerver és a kliens számára, hogy megfelelően kezeljék és értelmezzék a fájlt.

    A MIME-típus két részből áll:

    • Első rész: az adott fájltípus fő kategóriáját jelzi (például "image", "text", "application").
    • Második rész: a fájl pontosabb típusát jelzi (például "jpeg", "png", "html", "pdf").

    Néhány gyakori MIME-típus:

    • Képekhez:
      • image/jpeg: JPEG formátumú kép
      • image/png: PNG formátumú kép
      • image/gif: GIF formátumú kép
    • Szöveges fájlokhoz:
      • text/html: HTML fájl
      • text/plain: Egyszerű szövegfájl
    • Alkalmazásokhoz:
      • application/pdf: PDF fájl
      • application/json: JSON adatfájl

    Miért fontos a MIME-típusok ellenőrzése fájlfeltöltéskor?

    Amikor fájlokat töltünk fel egy szerverre, a MIME-típus ellenőrzésével biztosíthatjuk, hogy csak a megengedett fájltípusokat fogadjuk el. Például, ha a rendszer csak képfájlokat szeretne elfogadni, ellenőrizhetjük, hogy a feltöltött fájl MIME-típusa image/jpeg, image/png vagy más megengedett képformátum. Ez biztonsági szempontból is fontos, mert segít megelőzni, hogy a felhasználók olyan fájlokat töltsenek fel, amelyek kártékonyak lehetnek (például futtatható fájlokat).

    A te kódodban a MIME-típusok ellenőrzése segít abban, hogy csak JPEG, PNG vagy GIF formátumú képeket fogadj el fájlfeltöltéskor.

    13 B - PHP fájlkezelés haladó technikák: Fájlok és könyvtárak manipulálása, jogosultságok kezelése

     A PHP fájlkezelés haladó technikái lehetővé teszik a fájlok és könyvtárak különféle műveleteinek végrehajtását, beleértve a létrehozást, olvasást, írást, törlést és jogosultságok kezelését. A fájlkezelés elengedhetetlen számos alkalmazás számára, például fájlok feltöltésénél, adatnaplózásnál vagy akár teljes fájlrendszer-adminisztrációs feladatok végrehajtásánál.

    1. Fájlok kezelése:

    A fájlkezelés során olyan műveleteket végezhetünk, mint a fájlok létrehozása, olvasása, írása, módosítása és törlése. PHP-ben ezekhez számos beépített függvény áll rendelkezésre.

    a. Fájlok olvasása:

    ·        file_get_contents(): Egy fájl tartalmának egy lépésben történő beolvasására használható, és az eredményt egy stringben adja vissza.

    $fileContent = file_get_contents('path/to/file.txt');
    echo $fileContent;

    ·        fopen() és fread(): Ezek a függvények részletesebb kontrollt biztosítanak a fájlkezelés felett, és lehetővé teszik a fájlok olvasását bájtonként vagy karakterenként.

    $file = fopen('path/to/file.txt', 'r');
    while (!feof($file)) {
        echo fgets($file); // Egy sor beolvasása
    }
    fclose($file);

    b. Fájlok írása:

    ·        file_put_contents(): Lehetővé teszi, hogy egy lépésben adatokat írjunk egy fájlba.

    $data = "Ez egy új fájl tartalma.";
    file_put_contents('path/to/file.txt', $data);

    ·        fwrite(): Több kontrollt biztosít az írás felett, például a fájl megnyitását különböző módokban (pl. írásra, hozzáfűzésre).

    $file = fopen('path/to/file.txt', 'a'); // Hozzáfűzési mód
    fwrite($file, "Új tartalom a fájl végén.");
    fclose($file);

    c. Fájlok törlése:

    • unlink(): Ezzel a függvénnyel fájlokat lehet törölni.
    php
    Kód másolása
    unlink('path/to/file.txt');

    2. Könyvtárak kezelése:

    A fájlok mellett a könyvtárak kezelése is fontos lehet, például amikor fájlokat másolunk, mozgatunk vagy létrehozunk új könyvtárakat.

    a. Könyvtárak létrehozása:

    • mkdir(): Ez a függvény új könyvtárat hoz létre.
    mkdir('path/to/new_directory', 0755, true); // Jogosultságok beállítása (0755), és az összes szükséges szülő könyvtár létrehozása

    b. Könyvtárak olvasása:

    • scandir(): A könyvtár tartalmát listázhatjuk ezzel a függvénnyel.
    php
    Kód másolása
    $files = scandir('path/to/directory');
    foreach ($files as $file) {
        echo $file . "<br>";
    }

    c. Könyvtárak törlése:

    • rmdir(): Ez a függvény egy üres könyvtárat töröl.
    rmdir('path/to/directory');

    Ha a könyvtár nem üres, akkor rekurzívan törölhetjük az összes benne lévő fájlt és könyvtárat egy egyéni funkcióval.

    3. Fájlok és könyvtárak jogosultságainak kezelése:

    A fájlok és könyvtárak jogosultságai kritikusak lehetnek a biztonság szempontjából, különösen olyan webhelyeken, ahol több felhasználó hozzáférhet a rendszerhez.

    a. Jogosultságok beállítása:

    • chmod(): Ezzel a függvénnyel fájlok és könyvtárak jogosultságait módosíthatjuk.
    chmod('path/to/file.txt', 0644); // Fájl jogosultságainak beállítása

    Az értékek bináris alapon értelmezhetők (pl. 0644 jelenti, hogy a tulajdonos olvashatja és írhatja a fájlt, míg a csoport és a többiek csak olvashatják).

    b. Jogosultságok ellenőrzése:

    • fileperms(): Ezzel a függvénnyel lekérdezhetjük egy fájl vagy könyvtár jogosultságait.
    $permissions = fileperms('path/to/file.txt');
    echo decoct($permissions & 0777); // A jogosultságok bináris formátumban

    4. Fájlok feltöltése PHP-ben:

    A fájlfeltöltések gyakoriak a webes alkalmazásokban, például profilképek, dokumentumok vagy más típusú fájlok feltöltésénél. A PHP beépített támogatást nyújt fájlok feltöltésére az űrlapokon keresztül.

    Példa egy fájl feltöltésére PHP-ben:

    HTML űrlap:

    <form action="upload.php" method="POST" enctype="multipart/form-data">
        Válassz fájlt: <input type="file" name="fileToUpload">
        <input type="submit" value="Feltöltés">
    </form>

    PHP feldolgozás:

    <?php
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
    $uploadOk = 1;
     
    // Ellenőrizzük, hogy a fájl már létezik-e
    if (file_exists($target_file)) {
        echo "A fájl már létezik.";
        $uploadOk = 0;
    }
     
    // Fájl feltöltése, ha nincs hiba
    if ($uploadOk == 1) {
        if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
            echo "A fájl feltöltése sikerült: " . basename($_FILES["fileToUpload"]["name"]);
        } else {
            echo "Hiba történt a fájl feltöltésekor.";
        }
    }
    ?>

    5. Haladó fájlműveletek:

    a. Fájlok másolása, mozgatása és átnevezése:

    ·        copy(): Egy fájl másolása egyik helyről a másikra.

    copy('path/to/source.txt', 'path/to/destination.txt');

    ·        rename(): Egy fájl vagy könyvtár átnevezése vagy áthelyezése.

    rename('path/to/old_name.txt', 'path/to/new_name.txt');

    b. Fájlméret és létrehozás dátumának lekérdezése:

    ·        filesize(): Egy fájl méretének lekérdezése bájtokban.

    echo filesize('path/to/file.txt') . " bájt";

    ·        filemtime(): Egy fájl utolsó módosítási időpontjának lekérdezése.

    echo "Utolsó módosítás: " . date("F d Y H:i:s.", filemtime('path/to/file.txt'));

    6. Biztonsági megfontolások:

    A fájlkezelés során különösen fontos a biztonság:

    • Fájlnevek ellenőrzése: Soha ne fogadjuk el közvetlenül a felhasználótól kapott fájlneveket, mindig ellenőrizzük azokat.
    • Könyvtárfeltörés megakadályozása: Használjunk relatív útvonalakat és ellenőrizzük, hogy a felhasználó nem próbál meg könyvtárszintet ugrani (pl. ../ karakterekkel).
    • Fájlméret és típus ellenőrzése: Fájlok feltöltésekor korlátozzuk a fájlok méretét és típusát, hogy elkerüljük a rosszindulatú fájlok feltöltését.

    6. Biztonsági megfontolások:

    ·        Fájlméret és típus ellenőrzése: Amikor fájlokat töltünk fel, mindig érdemes korlátozni a fájlok maximális méretét és ellenőrizni a fájl típusát, hogy csak megengedett típusokat fogadjunk el (például képeket, dokumentumokat). Ezt a következőképpen lehet megvalósítani:

    // Ellenőrizzük a fájlméretet (max 2 MB)
    if ($_FILES['fileToUpload']['size'] > 2000000) {
        echo "A fájl túl nagy.";
        $uploadOk = 0;
    }
     
    // Ellenőrizzük a fájltípust (csak képek)
    $fileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
    if (!in_array($fileType, ['jpg', 'png', 'jpeg', 'gif'])) {
        echo "Csak JPG, JPEG, PNG és GIF fájlok engedélyezettek.";
        $uploadOk = 0;
    }

    ·        Fájlnév szűrése: Mindig biztonságos fájlneveket használjunk, és szűrjük a fájlneveket, hogy elkerüljük a könyvtárszint ugrásokat vagy rosszindulatú fájlok feltöltését. Például, ha a fájl tartalmaz tiltott karaktereket (pl. ../), azt cserélhetjük biztonságos alternatívára.

    ·        Jogosultságok kezelése: Győződj meg arról, hogy a fájlokhoz és könyvtárakhoz megfelelő jogosultságok vannak beállítva, hogy csak az engedélyezett felhasználók férjenek hozzá az adatokhoz. Például a feltöltött fájlokat be lehet állítani, hogy csak olvashatók legyenek a nyilvánosság számára, de ne legyenek írhatók:

    chmod('uploads/somefile.txt', 0644); // Csak olvasható jogosultság a felhasználók számára

    Összefoglalás:

    A PHP fájlkezelés haladó technikái számos eszközt kínálnak a fájlok és könyvtárak kezelésére, beleértve az olvasást, írást, törlést, másolást és áthelyezést. Az ilyen műveletek során különösen fontos a jogosultságok megfelelő kezelése és a biztonságos fájlműveletek végrehajtása, például a fájlok feltöltésekor. A megfelelő biztonsági intézkedések és jogosultságkezelés segít elkerülni a lehetséges támadásokat, mint például a fájlbeillesztési támadások vagy a rosszindulatú fájlok feltöltése.

    Ha egy PHP alapú rendszerben fájlokat és könyvtárakat kezelsz, ezek a technikák segíthetnek a hatékony és biztonságos működés biztosításában.

    13 B - 12. PHP és AJAX: Aszinkron adatküldés és fogadás PHP és JavaScript használatával

     A PHP és AJAX (Asynchronous JavaScript and XML) egy hatékony módszer az aszinkron adatküldésre és -fogadásra, amely lehetővé teszi a weboldalak számára, hogy frissítsék az adatokat anélkül, hogy a teljes oldalt újra kellene tölteni. Ez javítja a felhasználói élményt, mivel a felhasználó valós időben kap visszajelzést, és gyorsabb adatfeldolgozás történik. Az AJAX használatával JavaScript segítségével küldhetsz adatokat egy szerverre (általában PHP-vel), majd a szerver visszaküldi a feldolgozott adatokat anélkül, hogy újratöltené az oldalt.

    1. Az AJAX működése:

    Az AJAX aszinkron adatküldést és fogadást tesz lehetővé a következő lépések szerint:

    1. A JavaScript egy aszinkron kérést indít a szerver felé (pl. PHP script).
    2. A PHP script feldolgozza a kérést (adatok mentése, lekérdezése, stb.), majd válaszol.
    3. A JavaScript fogadja a PHP-től érkező választ, és frissíti a weboldalon az adatokat, anélkül, hogy újratöltődne az oldal.

    2. AJAX használata JavaScript-ben:

    Az AJAX lekérések megvalósítása JavaScript-ben többféle módon történhet. A két legnépszerűbb módszer a XMLHttpRequest objektum és a modern fetch() API használata.

    a. XMLHttpRequest használata:

    Példa egy egyszerű AJAX kérésre XMLHttpRequest-tel:

    // Új XMLHttpRequest objektum létrehozása
    let xhr = new XMLHttpRequest();
     
    // A kérés konfigurálása
    xhr.open('POST', 'backend.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
     
    // A kérés elküldése a szerver felé
    xhr.send('name=John&email=john@example.com');
     
    // A válasz kezelése
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // A válasz sikeresen megérkezett
            document.getElementById('result').innerHTML = xhr.responseText;
        }
    };

    Ebben a példában a JavaScript küld egy POST kérést a backend.php felé, amely adatokat dolgoz fel, majd visszaküldi az eredményt, amely megjelenik az oldalon egy result ID-jú elemen.

    b. fetch() API használata:

    A fetch() API egy modernebb és egyszerűbb módszer az aszinkron kérésekhez.

    // fetch() API használata POST kérés küldéséhez
    fetch('backend.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'name=John&email=john@example.com'
    })
    .then(response => response.text()) // A válasz feldolgozása textként
    .then(data => {
        document.getElementById('result').innerHTML = data;
    })
    .catch(error => console.error('Hiba:', error));

    A fetch() egyszerűbbé és olvashatóbbá teszi az aszinkron kéréseket, és támogatja az ígéretek (promises) használatát is.

    3. PHP oldal kezelése:

    A szerveroldali feldolgozáshoz általában PHP-t használunk. A PHP fogadja a JavaScript által küldött adatokat (GET vagy POST kérés), majd feldolgozza azokat (például adatbázisba mentés, adatlekérdezés), és visszaad egy választ a JavaScript számára.

    Egyszerű PHP script a JavaScript által küldött POST adat fogadásához:

    <?php
    // Adatok fogadása
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        $name = $_POST['name'];
        $email = $_POST['email'];
     
        // Adatfeldolgozás (pl. adatbázisba mentés)
        // ...
     
        // Válasz küldése a kliens felé
        echo "Az Ön neve: $name, email címe: $email";
    }
    ?>

    Ez a PHP kód fogadja a JavaScript által küldött name és email adatokat, majd visszaküldi a feldolgozott eredményt a kliens oldal felé.

    4. Gyakorlati példa PHP és AJAX integrációjára:

    HTML űrlap:

    <form id="ajaxForm">
        <label for="name">Név:</label>
        <input type="text" id="name" name="name" required>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        
        <button type="submit">Beküldés</button>
    </form>
     
    <div id="result"></div>
     
    <script src="app.js"></script>

    JavaScript az űrlap adatok aszinkron küldéséhez:

    document.getElementById('ajaxForm').addEventListener('submit', function(e) {
        e.preventDefault(); // Megakadályozza az űrlap hagyományos elküldését
     
        // Az űrlap adatainak összegyűjtése
        const formData = new FormData(this);
     
        // Aszinkron kérés küldése
        fetch('backend.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.text())
        .then(data => {
            // Az eredmény megjelenítése
            document.getElementById('result').innerHTML = data;
        })
        .catch(error => console.error('Hiba:', error));
    });

    Ez a JavaScript kód megakadályozza az űrlap hagyományos beküldését, majd AJAX kérést küld a PHP szervernek az űrlap adataival, és megjeleníti az eredményt.

    PHP az adatok feldolgozásához:

    <?php
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        $name = htmlspecialchars($_POST['name']);
        $email = htmlspecialchars($_POST['email']);
     
        // Feldolgozás (pl. adatbázisba mentés)
        echo "Beküldött név: $name<br>";
        echo "Beküldött email: $email";
    }
    ?>

    Ebben a példában a PHP fogadja a JavaScript által beküldött adatokat, és megjeleníti azokat a böngészőben.

    5. Hibakezelés AJAX kérések esetén:

    Az AJAX kérések során fontos a hibakezelés is. A PHP hibás válaszai esetén a JavaScript-ben fel kell készülni a hibák kezelésére, és megfelelő üzeneteket kell megjeleníteni a felhasználónak.

    Például a fetch() API-ban a hibák kezelésére használhatjuk a .catch() blokkot, amelyben a hálózati hibákat és más problémákat kezelhetjük:

    fetch('backend.php', { method: 'POST', body: formData })
    .then(response => {
        if (!response.ok) {
            throw new Error('Hálózati hiba történt');
        }
        return response.text();
    })
    .then(data => {
        document.getElementById('result').innerHTML = data;
    })
    .catch(error => {
        console.error('Hiba:', error);
        document.getElementById('result').innerHTML = 'Hiba történt az adatok beküldésekor.';
    });

    6. Biztonság AJAX használatakor:

    Mivel az AJAX lehetővé teszi az adatokat aszinkron módon, ügyelni kell az adatok biztonságos kezelésére:

    • Adat validáció a szerveroldalon: Mindig ellenőrizzük és szűrjük a beérkező adatokat a PHP oldalon, hogy elkerüljük a XSS és SQL injection támadásokat.
    • CSRF védelem: Különösen formok esetében érdemes CSRF tokent használni, hogy megakadályozzuk a jogosulatlan adatküldést.
    • HTTPS használata: Biztosítsuk, hogy a kérés titkosított csatornán (HTTPS) keresztül történjen, így a küldött adatok biztonságban vannak.

    Összefoglalás:

    Az AJAX segítségével könnyen küldhetünk és fogadhatunk adatokat PHP szerverrel anélkül, hogy újratöltenénk az oldalt. Ez a technika javítja a felhasználói élményt és hatékonyabb adatfeldolgozást tesz lehetővé. A modern böngészők támogatják az XMLHttpRequest objektumot és a fetch() API-t is, amelyekkel egyszerűen küldhetünk és fogadhatunk adatokat. Fontos azonban a megfelelő biztonsági intézkedések bevezetése a PHP oldalon.

    PIQPACC keretrendszer azaz ellenőrző lista arra, hogyan használjuk az AI-t kritikus gondolkodással

      P – Purpose / Cél Mit akarok elérni? Pontosan mire kérem az AI-t, és mire nem? I – Information / Információ Milyen adatokra, forrásokra...