Webtechnologien - Versionsgeschichte

Drlue: /* Beispiel Funktionen */

2021-11-30T19:06:09Z

Beispiel Funktionen

← Nächstältere Version		Version vom 30. November 2021, 19:06 Uhr
Zeile 149:		Zeile 149:

	//Sie können auch inline geschrieben werden		//Sie können auch inline geschrieben werden
	let showDialog3 = (text) -> { window.alert(text) };		let showDialog3 = (text) => { window.alert(text) };
	showDialog3("Sehr gut!");		showDialog3("Sehr gut!");
	}}		}}

Drlue: /* Beispiel Funktionen */

2021-11-30T19:05:47Z

Beispiel Funktionen

← Nächstältere Version		Version vom 30. November 2021, 19:05 Uhr
Zeile 136:		Zeile 136:

	==== Beispiel Funktionen ====		==== Beispiel Funktionen ====
	Funktionen ~~können in Variablen gespeichert werden~~:		Beispiele für Funktionen:
	{{JSML\|code=		{{JSML\|code=
			//Einfache Funktion
	function showDialog(text) {		function showDialog(text) {
	window.alert(text);		window.alert(text);
Zeile 146:		Zeile 147:
	let showDialog2 = showDialog;		let showDialog2 = showDialog;
	showDialog2("Hallo");		showDialog2("Hallo");

			//Sie können auch inline geschrieben werden
			let showDialog3 = (text) -> { window.alert(text) };
			showDialog3("Sehr gut!");
	}}		}}

Drlue: /* Sehr flexibel */

2021-11-30T19:04:23Z

Sehr flexibel

← Nächstältere Version		Version vom 30. November 2021, 19:04 Uhr
Zeile 135:		Zeile 135:
	Weiters handelt es sich bei '''Javascript''' um eine '''Interpretersprache''', dies bedeutet der Quellcode wird '''nicht''' zu ausführbarem Maschinencode '''kompiliert''', welcher direkt vom Betriebssystem ausgeführt werden kann. Um '''Javascript''' auszuführen benötigt es einen '''Interpreter'''. Mittlerweile hat fast jeder (eigentlich jeder?) Browser einen '''Javascript Interpreter'''. Im Anwendungsbereich wie z.B. bei '''Node.js''' kommt die Chrome V8 Engine als Interpreter zum Einsatz<ref>https://nodejs.dev/learn/the-v8-javascript-engine</ref>.		Weiters handelt es sich bei '''Javascript''' um eine '''Interpretersprache''', dies bedeutet der Quellcode wird '''nicht''' zu ausführbarem Maschinencode '''kompiliert''', welcher direkt vom Betriebssystem ausgeführt werden kann. Um '''Javascript''' auszuführen benötigt es einen '''Interpreter'''. Mittlerweile hat fast jeder (eigentlich jeder?) Browser einen '''Javascript Interpreter'''. Im Anwendungsbereich wie z.B. bei '''Node.js''' kommt die Chrome V8 Engine als Interpreter zum Einsatz<ref>https://nodejs.dev/learn/the-v8-javascript-engine</ref>.

	==== ~~Sehr flexibel~~ ====		==== Beispiel Funktionen ====
	Funktionen können in Variablen gespeichert werden:		Funktionen können in Variablen gespeichert werden:
	{{JSML\|code=		{{JSML\|code=
	function ~~fun1~~() {		function showDialog(text) {
	window.alert(~~"hallo"~~);		window.alert(text);
	}		}
			showDialog("Wie gehts?");

	let ~~storedFun~~ = ~~fun1~~;		//Funktionen können auch in Variablen gespeichert werden
			let showDialog2 = showDialog;
	~~storedFun~~();		showDialog2("Hallo");
	}}		}}

Drlue: /* Sehr flexibel */

2021-11-30T19:03:08Z

Sehr flexibel

← Nächstältere Version		Version vom 30. November 2021, 19:03 Uhr
Zeile 137:		Zeile 137:
	==== Sehr flexibel ====		==== Sehr flexibel ====
	Funktionen können in Variablen gespeichert werden:		Funktionen können in Variablen gespeichert werden:
	{{JSML\|code		{{JSML\|code=
	function fun1() {		function fun1() {
	window.alert("hallo");		window.alert("hallo");

Drlue: /* Javascript */

2021-11-30T19:03:01Z

Javascript

@@ Zeile 134: / Zeile 134: @@
 ==== Interpreter-, Scriptsprache ====
 Weiters handelt es sich bei '''Javascript''' um eine '''Interpretersprache''', dies bedeutet der Quellcode wird '''nicht''' zu ausführbarem Maschinencode '''kompiliert''', welcher direkt vom Betriebssystem ausgeführt werden kann. Um '''Javascript''' auszuführen benötigt es einen '''Interpreter'''. Mittlerweile hat fast jeder (eigentlich jeder?) Browser einen '''Javascript Interpreter'''. Im Anwendungsbereich wie z.B. bei '''Node.js''' kommt die Chrome V8 Engine als Interpreter zum Einsatz<ref>https://nodejs.dev/learn/the-v8-javascript-engine</ref>.
 == CSS ==

Drlue: /* XSS */

2021-02-13T08:35:04Z

XSS

← Nächstältere Version		Version vom 13. Februar 2021, 08:35 Uhr
Zeile 359:		Zeile 359:

	=== XSS ===		=== XSS ===
	'''X'''/Cross '''S'''ite '''S'''cripting, ist eine Variante von '''CSRF''' welche ebenfalls erfordert, dass der Benutzer auf einer Webseite angemeldet ist. Die ~~Unerwünschten~~ Requests werden jedoch auf einem anderen Weg an den User gebracht. Besteht auf einer Webseite die Möglichkeit für den Benutzer eigenen '''HTML''' oder '''Javascript''' Code hochzuladen, so können ~~Schadhafte~~ Requests bei anderen Benutzern ausgeführt werden. Diese Möglichkeit kann auch durch mangelhafte Absicherung von Benutzereingaben auftreten. Der ~~Schadhafte~~ Code wird als Teil der Webseite an den Browser anderere Benutzer gesendet, sämtliche Requests sind hier möglich. Weder ein '''Same Site Cookie''' noch ein '''CSRF''' Token schaffen hier abhilfe, da die bösartigen Requests von der Seite selbst ~~kommen~~.		'''X'''/Cross '''S'''ite '''S'''cripting, ist eine Variante von '''CSRF''' welche ebenfalls erfordert, dass der Benutzer auf einer Webseite angemeldet ist. Die unerwünschten '''Requests''' werden jedoch auf einem anderen Weg an den User gebracht. Besteht auf einer Webseite die Möglichkeit für den Benutzer eigenen '''HTML''' oder '''Javascript''' Code hochzuladen, so können '''schadhafte Requests''' bei anderen Benutzern ausgeführt werden. Diese Möglichkeit kann auch durch mangelhafte Absicherung von Benutzereingaben auftreten. Der '''schadhafte Code''' wird als Teil der Webseite an den Browser anderere Benutzer gesendet, sämtliche '''Requests''' sind hier möglich. Weder ein '''Same Site Cookie''' noch ein '''CSRF''' Token schaffen hier abhilfe, da die bösartigen Requests von der Seite selbst stammen.

	==== Beispiel ====		==== Beispiel ====
Zeile 390:		Zeile 390:
	}}		}}

	Versuche doch die XSS Attacke mit unserem Webservice Beispiel! Du wirst sehen, Anfangs funktioniert es nicht, da das '''Mustache''' Template, '''HTML/Javascript''' '''escaped''' {{HTMLSL\|<html>}} wird zu {{HTMLSL\|<html>}}, d.h. es nimmt ~~ihm die~~ Bedeutung<ref>https://mustache.github.io/mustache.5.html</ref>. Ändere den Platzhalter von '''{{ }}''', nach '''{{{ }}}''' und '''HTML/Javascript''' wird nicht mehr '''escaped'''. Mit dem '''React''' ~~Frontend~~, wird es wahrscheinlich nicht klappen.		Versuche doch die XSS Attacke mit unserem Webservice Beispiel! Du wirst sehen, Anfangs funktioniert es nicht, da das '''Mustache''' Template, '''HTML/Javascript''' '''escaped''' {{HTMLSL\|<html>}} wird zu {{HTMLSL\|<html>}}, d.h. es nimmt den Zeichen ihre Bedeutung<ref>https://mustache.github.io/mustache.5.html</ref>. Ändere den Platzhalter von '''{{ }}''', nach '''{{{ }}}''' und '''HTML/Javascript''' wird nicht mehr '''escaped'''. Mit dem '''React Frontend''', wird es wahrscheinlich nicht klappen.
	Für unseren Webservice wäre dies hier interessant:		Für unseren Webservice wäre dies hier interessant:
	{{JSML\|code=		{{JSML\|code=
Zeile 408:		Zeile 408:

	==== Lösung ====		==== Lösung ====
	Eine Möglichkeit um diese Sicherheitslücke zu ~~umgehen~~ ist ein Filtern der Eingabe des Benutzers, oder ein '''escapen''' von ~~Benutzerdefinierten Texten~~, sodass diese nicht als '''HTML''' oder '''Javascript''' interpretiert werden.		Eine Möglichkeit diese Sicherheitslücke zu schließen ist ein Filtern der Eingabe des Benutzers, oder ein '''escapen''' von benutzerdefinierten Eingaben, sodass diese nicht als '''HTML''' oder '''Javascript''' vom Browser des Clients interpretiert werden.

	=== Weitere Quellen ===		=== Weitere Quellen ===

Drlue: /* CSRF */

2021-02-13T08:32:34Z

CSRF

← Nächstältere Version		Version vom 13. Februar 2021, 08:32 Uhr
Zeile 328:		Zeile 328:
	Im folgenden werden ausgewählte Sicherheitsrisiken im Zusammenhang mit Webseiten erläutert.		Im folgenden werden ausgewählte Sicherheitsrisiken im Zusammenhang mit Webseiten erläutert.
	== CSRF ==		== CSRF ==
	'''C'''ross '''S'''ite '''R'''equest '''F'''orgery, ist eine Angriffsmethode bei dem die gespeicherten Anmeldedaten des Benutzers verwendet werden um Requests durchzuführen, die ohne die Zustimmung des Benutzers erfolgen.<br>		'''C'''ross '''S'''ite '''R'''equest '''F'''orgery, ist eine Angriffsmethode bei dem die gespeicherten Anmeldedaten des Benutzers verwendet werden, um Requests durchzuführen, die ohne die Zustimmung des Benutzers erfolgen.<br>
	=== Unterschieben der URL ===		=== Unterschieben der URL ===
	Ist ein Benutzer bei einer Webseite '''A''' angemeldet, so wird diese Anmeldeinformation als '''Cookie''' im Browser gespeichert. Bei jedem Request an Webseite '''A''' wird das Cookie vom Browser mitgesendet, und der Server verwendet es um den Benutzer zu authentifizieren. Das '''Cookie''' wird auch mitgesendet wenn die Anfrage nicht von Webseite '''A''' selbst, sondern von einer anderen Webseite '''B''' stammt. Somit können schadhafte Requests von einer beliebigen Webseite ausgeführt werden, wenn der Server keine '''CSRF''' Schutzmechanismen implementiert hat.<br>		Ist ein Benutzer bei einer Webseite '''A''' angemeldet, so wird diese '''Anmeldeinformation''' als '''Cookie''' im Browser gespeichert. Bei jedem '''Request''' an Webseite '''A''' wird das '''Cookie''' vom Browser mitgesendet, und der Server verwendet es um den Benutzer zu authentifizieren. Das '''Cookie''' wird auch mitgesendet wenn die Anfrage nicht von Webseite '''A''' selbst, sondern von einer anderen Webseite '''B''' stammt. Somit können schadhafte '''Requests''' von einer beliebigen Webseite ausgeführt werden, wenn der Server keine '''CSRF''' Schutzmechanismen implementiert hat.<br>
	Ein auslesen von Daten durch eine bösartige Webseite ist hierbei jedoch nicht möglich. Moderne Browser senden zwar die Anfrage an den Server, die Antwort jedoch, wird durch den Browser nicht an das '''Javascript''' der Schadseite weitergeleitet. Der Grund hierfür ist die [[Webtechnologien#CORS\|Same-Site-Policy]], oder restriktionen von [[Webtechnologien#CORS\|CORS]].		Ein auslesen von Daten durch eine bösartige Webseite ist hierbei jedoch nicht möglich. Moderne Browser senden zwar die Anfrage an den Server, die Antwort jedoch, wird durch den Browser nicht an das '''Javascript''' der Schadseite weitergeleitet. Der Grund hierfür ist die [[Webtechnologien#CORS\|Same-Site-Policy]], oder restriktionen von [[Webtechnologien#CORS\|CORS]].
	==== Beispiel ====		==== Beispiel ====
	Angenommen der Benutzer ist auf der Webseite '''https://vol.at''' angemeldet. Um einen Kommentar für einen Artikel zu erstellen, erfolgt ein '''POST Request''' auf '''https://vol.at/14512/'''.<br>		Angenommen der Benutzer ist auf der Webseite '''https://vol.at''' angemeldet. Um einen Kommentar für einen Artikel zu erstellen, erfolgt ein '''POST Request''' auf '''https://vol.at/14512/'''.<br>
	Der Angreifer bringt auf irgendeine Weise (z.B.: Phishing Mail) den Benutzer dazu, auf seine eigene Webseite zu navigieren.		Der Angreifer bringt auf irgendeine Weise (z.B.: Phishing Mail) den Benutzer dazu, auf seine eigene Webseite zu navigieren.
	Beim Aufruf dieser bösen Webseite kann nun direkt über '''Javascript''' ein '''POST Request''' auf '''https://vol.at/14512/''' mit einem unangebrachten Kommentar ausgeführt werden.~~<br>~~		Beim Aufruf dieser bösen Webseite kann nun direkt über '''Javascript''' ein '''POST Request''' auf '''https://vol.at/14512/''' mit einem unangebrachten Kommentar ausgeführt werden. Diese bösartige Webseite könnte wie folgt aussehen:
	~~Eine~~ bösartige Webseite könnte wie folgt aussehen:
	{{HTMLML\|code=		{{HTMLML\|code=
	Sie werden in kürze gehackt.		Sie werden in kürze gehackt.
Zeile 355:		Zeile 354:

	==== Lösungen ====		==== Lösungen ====
	Generell verliert diese Art der '''CSRF''' Attacke an ~~Vedeutung~~. Es gibt mehrere Möglichkeiten eine Webseite dagegen abzusichern.		Generell verliert diese Art der '''CSRF''' Attacke an Bedeutung. Es gibt mehrere Möglichkeiten eine Webseite dagegen abzusichern.
	* '''Same Site Cookie Attribut<ref>https://web.dev/samesite-cookies-explained/</ref>''' - Beschränkt das senden von Cookies wenn der Request nicht von der ursprünglichen Webseite, welche auch das Cookie gesendet hat, kommt.		* '''Same Site Cookie Attribut<ref>https://web.dev/samesite-cookies-explained/</ref>''' - Beschränkt das senden von '''Cookies''' wenn der '''Request''' nicht von der ursprünglichen Webseite, welche auch das '''Cookie''' gesendet hat, kommt.
	* '''CSRF Token''' - Wird ein '''POST Request''' gemacht, so muss zuerst ein '''CSRF Token''' geholt werden, dieser wird beim '''POST Request''' mitgesendet und validiert. Wie bereits erwähnt, können Requests von einer bösartigen zwar gesendet, die Responses aber nicht verarbeitet werden. Somit kann der '''CSRF Token''' nicht geholt und dem ungewünschten Request ~~angehängt~~ werden.		* '''CSRF Token''' - Wird ein '''POST Request''' gemacht, so muss zuerst ein '''CSRF Token''' geholt werden, dieser wird beim '''POST Request''' mitgesendet und validiert. Wie bereits erwähnt, können '''Requests''' von einer bösartigen Webseite zwar gesendet, die '''Responses''' aber nicht verarbeitet werden, dies verhindert der Browser. Somit kann der '''CSRF Token''' nicht geholt und dem ungewünschten '''Request''' hinzugefügt werden.

	=== XSS ===		=== XSS ===

Drlue: /* Anwendungsstate speichern */

2021-02-13T08:29:04Z

Anwendungsstate speichern

← Nächstältere Version		Version vom 13. Februar 2021, 08:29 Uhr
Zeile 301:		Zeile 301:

	== Anwendungsstate speichern ==		== Anwendungsstate speichern ==
	Um den Zustand einer Webseite zu speichern, egal ob '''traditionell''' oder '''SPA''' kann die '''localstorage API<ref>https://developer.mozilla.org/de/docs/Web/API/Window/localStorage</ref>''' des Browsers verwendet werden. Diese Programmierschnittstelle, ermöglicht über '''Javascript''' '''Key Value Pairs''' wie beim [[Algorithmen_und_Datenstrukturen#Assoziativer_Speicher\|Assoziativen Speicher]] zu speichern. Im '''Localstorage''' kann z.B.: gespeichert werden, in welchem ~~Punkt in~~ der Webseite sich der Benutzer zuletzt befunden hat, oder ähnliches. Natürlich könnte dies auch Serverseitig gespeichert werden, doch wenn dies nicht nötig ist, ist es eine gute und effiziente Alternative.		Um den Zustand einer Webseite zu speichern, egal ob '''traditionell''' oder '''SPA''', kann die '''localstorage API<ref>https://developer.mozilla.org/de/docs/Web/API/Window/localStorage</ref>''' des Browsers verwendet werden. Diese '''Programmierschnittstelle''', ermöglicht über '''Javascript''' '''Key Value Pairs''' wie beim [[Algorithmen_und_Datenstrukturen#Assoziativer_Speicher\|Assoziativen Speicher]] zu speichern. Im '''Localstorage''' kann z.B.: gespeichert werden, in welchem Menüpunkt der Webseite sich der Benutzer zuletzt befunden hat, oder ähnliches. Natürlich könnte dies auch Serverseitig gespeichert werden, doch wenn dies nicht nötig ist, ist es eine gute und effiziente Alternative. Es wird kein Useraccount oder ähnliches benötigt.

	==== Beispiel ====		==== Beispiel ====
	Folgende Webseite ~~speicher~~ einfach den Zustand, wie oft sie ~~denn~~ geöffnet wurde. ~~Gerne~~ selbst ~~ausprobieren~~:		Folgende Webseite speichert einfach den Zustand, wie oft sie geöffnet wurde. Dies kann gerne selbst probiert werden:
	{{HTMLML\|code=		{{HTMLML\|code=
	<html>		<html>
Zeile 322:		Zeile 322:

	=== Risiken der Localstorage API ===		=== Risiken der Localstorage API ===
	Werte im '''Localstorage''' können über '''Javascript''' nur von der selben Quelle ('''Origin''') abgerufen werden. Somit kann '''Javascript''' nicht auf den '''Localstorage''' anderer Webseiten zugreifen. Das klingt schon sehr sicher. Warum sollte man dann die '''Localstorage API''' nicht auch zum speichern von Zugangstoken wie z.B dem [[Webservices_und_Client_Server_Konzepte#Token_basierte_Authentifizierung\|JWT Token]] verwenden?<br>		Werte im '''Localstorage''' können über '''Javascript''' nur von der selben Quelle ('''Origin''') abgerufen werden. Somit kann '''Javascript''' nicht auf den '''Localstorage''' anderer Webseiten zugreifen. Das klingt schon sehr sicher. Warum sollte man dann die '''Localstorage API''' nicht auch zum speichern von '''Zugangstoken''' wie z.B dem [[Webservices_und_Client_Server_Konzepte#Token_basierte_Authentifizierung\|JWT Token]] verwenden?<br>
	Das Problem liegt darin, dass sämtliches '''Javascript''' welches in der Webseite geladen wird, ~~zugriff~~ auf die Daten im '''Localstorage''' hat. Wenn keine '''3rd Party Javascript ~~Bibliothek~~''' verwendet ~~wird~~, ist dies kein Problem~~, jedoch~~ ist das ~~heutzutage~~ in den allermeisten Fällen, nicht der Fall. Für alle möglichen Dinge werden '''Javascript''' Bibliotheken verwendet, bei Einsatz eines '''SPA Frameworks/Bibliothek''' umso mehr. Wäre eine dieser Bibliotheken kompromitiert, so könnte Sie mit Leichtigkeit, das '''Token''' aus dem '''Localstorage''' holen und an einen anderen Server senden.		Das Problem liegt darin, dass sämtliches '''Javascript''' welches in der Webseite geladen wird, Zugriff auf die Daten im '''Localstorage''' hat. Wenn keine '''3rd Party Javascript Bibliotheken''' verwendet werden, ist dies kein Problem. Jedoch ist das Heutzutage in den allermeisten Fällen nicht der Fall. Für alle möglichen Dinge werden '''Javascript''' '''Bibliotheken''' verwendet, bei Einsatz eines '''SPA Frameworks/Bibliothek''' umso mehr. Wäre eine dieser Bibliotheken '''kompromitiert''' (enthält Schadcode), so könnte Sie mit Leichtigkeit das '''Token''' aus dem '''Localstorage''' holen und an einen anderen Server senden.

	= Sicherheitsrisiken =		= Sicherheitsrisiken =

Drlue: /* React */

2021-02-13T08:25:51Z

React

← Nächstältere Version		Version vom 13. Februar 2021, 08:25 Uhr
Zeile 268:		Zeile 268:

	=== React ===		=== React ===
	Das '''SPA''' Framework '''React''' wurde von '''Facebook''' entwickelt. Programmiert wird in '''Javascript''' oder '''Typescript''' (Javascript mit ~~typisierung~~)~~, das~~ React Framework, erstellt aus allen Quelldateien ein optimiertes '''Javascript''' Programm inklusive '''HTML'''.<br>		Das '''SPA''' Framework '''React''' wurde von '''Facebook''' entwickelt. Programmiert wird in '''Javascript''' oder '''Typescript''' (Javascript mit Typisierung). Das '''React Framework''' erstellt aus allen Quelldateien ein optimiertes '''Javascript''' Programm inklusive '''HTML'''.<br>
	Eine '''React''' Anwendung besteht aus Komponenten (Components), die ineinander verschachtelt werden können. Eine '''Objektorientierte''' Vorgangsweise mit '''Klassen''' und '''Vererbung''', wie z.B.: in '''Java''', ist möglich, wird jedoch weitesgehend durch den Einsatz von '''Functional Components''' ersetzt.<br>		Eine '''React''' Anwendung besteht aus '''Komponenten''' (Components), die ineinander verschachtelt werden können. Eine '''Objektorientierte''' Vorgangsweise mit '''Klassen''' und '''Vererbung''', wie z.B.: in '''Java''', ist möglich, wird jedoch weitesgehend durch den Einsatz von '''Functional Components''' ersetzt.<br>
	Veränderung von Komponenten erfolgt über die Veränderung des '''States'''. Wird der '''State''' verändert, so wird die Komponente neu gerendert. Dies soll an folgendem Beispiel illustriert werden, eine einfache '''Cookie Clicker ~~Komponente~~''':		Veränderung von Komponenten erfolgt über die Veränderung des '''States'''. Wird der '''State''' verändert, so wird die Komponente neu gerendert. Dies soll an folgendem Beispiel illustriert werden, eine einfache '''Cookie Clicker Component''':
	{{JSML\|code=		{{JSML\|code=
	import React, { useState } from 'react';		import React, { useState } from 'react';
Zeile 296:		Zeile 296:
	export default CookieClicker;		export default CookieClicker;
	}}		}}
	Die '''Komponente''' besteht lediglich aus einer '''Funktion''', ~~welcher~~ optional '''Properties''' (Übergabeparameter) ~~übergeben~~ werden ~~können~~. Dies können Beispielsweise '''Callbacks''' oder '''Parameter''' die für die Initialisierung benötigt werden sein.<br>		Die '''Komponente''' besteht lediglich aus einer '''Funktion''', dieser können optional '''Properties''' {{JSSL\|props}} (Übergabeparameter) mitgegeben werden. Dies können Beispielsweise '''Callbacks''' oder '''Parameter''' die für die Initialisierung benötigt werden sein.<br>
	Die '''Funktion''' hat als Rückgabewert '''JSX'''. '''JSX''' ist eine Templatesprache, welche es ~~erlaubt~~ '''Komponententen''', '''Javascript''' ~~Code~~ und '''HTML/CSS''' zu kombinieren. Wird im Template auf '''Javascript''' zugegriffen ''(Zeile 10 und 18)'', so wird dies in '''{ ... }''' gefasst.<br>		Die '''Funktion''' hat als Rückgabewert '''JSX'''. '''JSX''' ist eine Templatesprache, welche es in '''Komponententen''' erlaubt '''Javascript Code''' und '''HTML/CSS''' zu kombinieren. Wird im Template auf '''Javascript''' zugegriffen ''(Zeile 16 und 18)'', so wird dies in '''{ ... }''' gefasst. Für die '''State Variable''' gibt es keinen '''getter''', hier wird einfach direkt die Variable verwendet ''(Zeile 16)''<br>
	Weiters ~~sehen wir~~ sehen wir im Beispiel ''(Zeile ~~123~~ )'', wie eine '''State Variable''' initialisiert wird. Der Funktion {{JSSL\|useState(...)}} wird ein Initialwert mitgegeben. Zusätzlich wird der Name der '''State Variable''' und ein '''setter''' definiert. Wird die '''State Variable''' über den '''setter''' modifiziert, so erfolgt ein erneutes ~~rendern~~ der '''Komponente'''.		Weiters sehen wir im Beispiel ''(Zeile 4)'', wie eine '''State Variable''' initialisiert wird. Der Funktion {{JSSL\|useState(...)}} wird ein Initialwert mitgegeben. Zusätzlich wird der Name der '''State Variable''' und ein '''setter''' definiert. Wird die '''State Variable''' über den '''setter''' modifiziert ''(Zeile 16 und Zeile 18)'', so erfolgt ein erneutes Rendern der '''Komponente'''.

	== Anwendungsstate speichern ==		== Anwendungsstate speichern ==

Drlue: /* SPA Frameworks */

2021-02-13T08:19:53Z

SPA Frameworks

← Nächstältere Version		Version vom 13. Februar 2021, 08:19 Uhr
Zeile 260:		Zeile 260:

	== SPA Frameworks ==		== SPA Frameworks ==
	Für den '''SPA''' Ansatz gibt es eine vielzahl von Frameworks. Einige sehr ~~Populäre~~ Frameworks sind:		Für den '''SPA''' Ansatz gibt es eine vielzahl von Frameworks. Einige sehr populäre Frameworks sind:
	* '''React''' (Wird eigentlich nur als Bibliothek bezeichnet, da dem Entwickler sehr viel Freiheit in der Umsetzung geboten wird)		* '''React''' (Wird eigentlich nur als Bibliothek bezeichnet, da dem Entwickler sehr viel Freiheit in der Umsetzung geboten wird)
	* '''Vue.js'''		* '''Vue.js'''
	* '''Angular'''		* '''Angular'''
	Weiters soll hier '''Flutter''' erwähnt werden. Dies ist ein '''Cross Platform Framework''', mit dem ebenfalls Webseiten erstellt werden können. Ein großer Unterschied ist, dass bei '''Flutter''' keine '''DOM''' ~~manipulation~~ erfolgt, die Webseite wird auf ein '''Canvas''' gezeichnet.		Weiters soll hier '''Flutter''' erwähnt werden. Dies ist ein '''Cross Platform Framework''', mit dem ebenfalls Webseiten erstellt werden können. Ein großer Unterschied ist, dass bei '''Flutter''' keine '''DOM''' Manipulation erfolgt, die Webseite wird auf ein '''Canvas''' gezeichnet, also gerendert, wie ein Spiel.
	'''Flutter''' ~~war am Anfang~~ als '''nativ anfühlende Alternative''' für '''iOS''' und '''Android''' Apps ~~geplant~~, mittlerweile ist es möglich, Webseiten sowie Desktop Apps für Linux, Windows und MacOS zu erstellen.		'''Flutter''' wurde als '''nativ anfühlende Alternative''' für '''iOS''' und '''Android''' Apps gestartet, mittlerweile ist es möglich, Webseiten sowie Desktop Apps für Linux, Windows und MacOS zu erstellen.

	=== React ===		=== React ===