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. :-)