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

13 frontend - AngularJs ismétlés

 AngularJS Direktívák és Szintaxisok:

1. ng-app

• Leírás: Az AngularJS alkalmazás kezdőpontját jelöli.
• Példa: <html ng-app="myApp">
• Használat: Meghatározza, hogy az AngularJS alkalmazás melyik HTML elem alatt indul el.

2. ng-controller

• Leírás: Az AngularJS vezérlőt hozzárendeli a HTML elemhez.
• Példa: <body ng-controller="MyController">
• Használat: A vezérlő rendelkezésre bocsátja az $scope-t az alatta lévő HTML elemekhez.

3. ng-model

• Leírás: Kötést biztosít az input elemek és az AngularJS $scope változói között.
• Példa: <input type="text" ng-model="user.name">
• Használat: Az input mező értékét összeköti a $scope egy változójával.

4. ng-if

• Leírás: Az AngularJS direktíva, amely egy kifejezés alapján dönti el, hogy az adott HTML elem megjelenjen-e.
• Példa: <div ng-if="isVisible">Content</div>
• Használat: Ha az isVisible változó igaz, a div elem megjelenik, különben el van rejtve.

5. ng-repeat

• Leírás: Az AngularJS direktíva, amely lehetővé teszi az elemek ismételt létrehozását egy tömb vagy lista alapján.
• Példa: <li ng-repeat="item in items">{{ item }}</li>
• Használat: Minden elem a items tömbből létrehoz egy <li> elemet.

6. ng-submit

• Leírás: Az űrlap elküldésekor végrehajtandó funkciót határozza meg.
• Példa: <form ng-submit="submitForm()">
• Használat: Amikor az űrlapot elküldik, a submitForm függvény hívódik meg.

7. ng-src

• Leírás: Biztosítja, hogy a képek forrása dinamikusan állítható be.
• Példa: <img ng-src="{{ user.profilePicture }}">
• Használat: Az ng-src helyettesíti a képek URL-jét az interpolált értékkel.

8. ng-class

• Leírás: Dinamikusan alkalmaz osztályokat az elemre az AngularJS változók alapján.
• Példa: <div ng-class="{ 'active': isActive }"></div>
• Használat: Az active osztály alkalmazva lesz, ha az isActive változó igaz.

9. ng-show

• Leírás: Az AngularJS direktíva, amely megjeleníti vagy elrejti az elemet az adott kifejezés alapján.
• Példa: <div ng-show="isVisible">Content</div>
• Használat: Ha az isVisible változó igaz, az elem látható lesz.

10. ng-hide

• Leírás: Az AngularJS direktíva, amely elrejti az elemet az adott kifejezés alapján.
• Példa: <div ng-hide="isHidden">Content</div>
• Használat: Ha az isHidden változó igaz, az elem el lesz rejtve.

11. ng-model-options

• Leírás: Beállítja az ng-model viselkedését, például az értékek késleltetett frissítését.
• Példa: <input type="text" ng-model="user.name" ng-model-options="{ debounce: 500 }">
• Használat: Az értékek késleltetett frissítése 500 milliszekundum után történik.

Interpoláció

• {{ expression }} - AngularJS interpolációs szintaxis, amely lehetővé teszi a változók és kifejezések megjelenítését a HTML-ben.
• Példa: <p>Hello, {{ user.name }}!</p>
• Használat: A user.name értéke beillesztésre kerül a HTML tartalmába.

Egy űrlap feldolgozásához a követekző direktívákat használhatjuk fel

• ng-app="formApp": Az AngularJS alkalmazás kezdőpontját jelöli, itt indítja az AngularJS az alkalmazást.
• ng-controller="FormController": Az AngularJS vezérlőt hozzárendeli a <body> elemhez, így a vezérlő elérhető lesz az alatta lévő HTML elemek számára.
• ng-if="!formSubmitted": Az AngularJS direktíva, amely a formSubmitted változó értékétől függően megjeleníti vagy elrejti a HTML elemet.
• ng-model="formData.name": Kötést biztosít a form elemei és az AngularJS $scope objektuma között, itt a formData.name-t használja.
• ng-submit="submitForm()": Az űrlap elküldésekor a submitForm függvény hívódik meg.
• ng-src="{{ submissionResult.photo }}": AngularJS direktíva, amely biztosítja, hogy a kép URL-je helyesen legyen interpolálva és megjelenítve.
• {{ expression }}: AngularJS interpolációs szintaxis, amely lehetővé teszi a változók és kifejezések megjelenítését a HTML-ben.

Ezek a direktívák és szintaxisok segítenek abban, hogy az AngularJS dinamikusan kezeljük a HTML tartalmat és interakciókat a felhasználói felületen.

Angular TODO

 Hozz létre egy Angular alkalmazást, ami lehetővé teszi egy egyszerű teendőlista kezelését.

Készíts egy todo.html fájlt, és hozz létre benne egy Angular alkalmazást nevű "todoApp".

Adj hozzá egy TodoController-t a todoApp alkalmazáshoz.

A TodoController-ben hozz létre egy tömböt, amely tartalmazza az alapvető teendőket, például:

"Bevásárlás"

"Sportolás"

"Olvasás"

Az oldalon jeleníts meg egy címet, például "Teendőlista".

Alatta egy rendezett listában listázd ki a teendők nevét. Formázd meg a rendezetlen listát úgy, hogy a lista jelek ne jelenjenek meg, helyette, mindegyik teendő világosszürke hátteret kapjon.

Adj hozzá egy űrlapot a teendők hozzáadásához. Az űrlap tartalmazzon egy szövegmezőt és egy "Hozzáadás" gombot.

Ha a felhasználó rákattint a "Hozzáadás" gombra, akkor az új teendőt adja hozzá a listához.

Adj hozzá a todo.html fájlhoz stílusokat a listaelemekhez és az űrlaphoz.