Senden von Formulardaten

Client/Server-Architektur

Im Wesentlichen verwendet das Web eine Client/Server-Architektur, die folgendermaßen zusammengefasst werden kann: Ein Client (meistens ein Webbrowser) sendet eine Anfrage an einen Server (meistens ein Webserver wie Apache, Nginx, IIS, Tomcat usw.), unter Verwendung des HTTP Protokolls. Der Server beantwortet die Anfrage mit demselben Protokoll.

Ein HTML-Formular auf einer Webseite ist nichts weiter als eine benutzerfreundliche Möglichkeit, eine HTTP-Anfrage zu konfigurieren, um Daten an einen Server zu senden. Dadurch kann der Benutzer Informationen bereitstellen, die in der HTTP-Anfrage übermittelt werden.

Auf der Client-Seite: Definieren, wie die Daten gesendet werden sollen

Das <form>-Element definiert, wie die Daten gesendet werden. Alle seine Attribute sind darauf ausgelegt, die Anfrage zu konfigurieren, die gesendet wird, wenn ein Benutzer eine Submit-Schaltfläche drückt. Die beiden wichtigsten Attribute sind action und method.

Das action-Attribut

Das action-Attribut definiert, wohin die Daten gesendet werden. Sein Wert muss eine gültige relative oder absolute URL sein. Wenn dieses Attribut nicht angegeben wird, werden die Daten an die URL der Seite gesendet, die das Formular enthält — die aktuelle Seite.

In diesem Beispiel werden die Daten an eine absolute URL gesendet — https://www.example.com:

Hier verwenden wir eine relative URL — die Daten werden an eine andere URL im selben Ursprung gesendet:

Wenn das <form>-Element ohne Attribute angegeben wird, wie unten gezeigt, werden die Daten an dieselbe Seite gesendet, auf der sich das Formular befindet:

Die Namen und Werte der nicht zu Dateityp gehörenden Formular-Controls werden als name=value-Paare, verbunden durch Ampersands, an den Server gesendet. Der action-Wert sollte eine Datei auf dem Server sein, die die eingehenden Daten verarbeiten kann, einschließlich der Sicherstellung der serverseitigen Validierung. Der Server antwortet dann in der Regel, indem er die Daten bearbeitet und die URL lädt, die durch das action-Attribut definiert ist, und so einen neuen Seitenaufruf auslöst (oder ein Aktualisieren der bestehenden Seite, wenn action auf dieselbe Seite zeigt).

Wie die Daten gesendet werden, hängt vom method-Attribut ab.

Das method-Attribut

Das method-Attribut definiert, wie Daten gesendet werden. Das HTTP-Protokoll bietet mehrere Möglichkeiten, eine Anfrage durchzuführen; HTML-Formulardaten können über verschiedene Methoden übertragen werden, wobei die gängigsten die GET-Methode und die POST-Methode sind.

Um den Unterschied zwischen diesen beiden Methoden zu verstehen, lassen Sie uns einen Schritt zurückgehen und betrachten, wie HTTP funktioniert. Jedes Mal, wenn Sie eine Ressource im Web erreichen möchten, sendet der Browser eine Anfrage an eine URL. Eine HTTP-Anfrage besteht aus zwei Teilen: einem Header, der eine Reihe globaler Metadaten über die Fähigkeiten des Browsers enthält, und einem Body, der Informationen enthalten kann, die erforderlich sind, damit der Server die spezifische Anfrage verarbeiten kann.

Die GET-Methode

Die GET-Methode ist die Methode, mit der der Browser den Server auffordert, eine bestimmte Ressource zurückzusenden: "Hey Server, ich möchte diese Ressource erhalten." In diesem Fall sendet der Browser einen leeren Body. Da der Body leer ist, werden die Daten, wenn ein Formular mit dieser Methode gesendet wird, an die URL angehängt.

Betrachten Sie das folgende Formular:

Da die GET-Methode verwendet wurde, sehen Sie die URL https://www.example.com/greet?say=Hi&to=Mom in der Adressleiste des Browsers, wenn Sie das Formular senden.

Die Daten werden als eine Reihe von Name/Wert-Paaren an die URL angehängt. Nachdem die URL-Webadresse geendet hat, fügen wir ein Fragezeichen (?) hinzu, gefolgt von den Name/Wert-Paaren, von denen jedes durch ein Ampersand (&) getrennt ist. In diesem Fall übergeben wir zwei Datenstücke an den Server:

• say, das den Wert Hi hat
• to, das den Wert Mom hat

Die HTTP-Anfrage sieht folgendermaßen aus:

Die POST-Methode

Die POST-Methode ist etwas anders. Es ist die Methode, die der Browser verwendet, um mit dem Server zu kommunizieren, wenn eine Antwort erforderlich ist, die die im Body der HTTP-Anfrage übermittelten Daten berücksichtigt: "Hey Server, schaue dir diese Daten an und sende mir ein entsprechendes Ergebnis zurück." Wenn ein Formular mit dieser Methode gesendet wird, werden die Daten in den Body der HTTP-Anfrage eingefügt.

Schauen wir uns ein Beispiel an — dies ist dasselbe Formular, das wir im GET-Abschnitt oben betrachtet haben, aber mit dem method-Attribut auf POST gesetzt.

Wenn das Formular mit der POST-Methode gesendet wird, erhalten Sie keine Daten, die an die URL angehängt sind, und die HTTP-Anfrage sieht so aus, wobei die Daten stattdessen im Anfrage-Body enthalten sind:

Der Content-Length-Header gibt die Größe des Bodys an, und der Content-Type-Header gibt den Typ der Ressource an, die an den Server gesendet wird. Wir werden diese Header später besprechen.

Anzeigen von HTTP-Anfragen

HTTP-Anfragen werden dem Benutzer nie angezeigt (wenn Sie sie sehen möchten, müssen Sie Tools wie den Firefox Network Monitor oder die Chrome Developer Tools verwenden). Als Beispiel wird Ihre Formulardaten im Chrome-Netzwerk-Tab wie folgt angezeigt. Nach dem Absenden des Formulars:

1. Öffnen Sie die Entwicklerwerkzeuge.
2. Wählen Sie "Netzwerk"
3. Wählen Sie "Alles"
4. Wählen Sie "example.com" im "Name"-Tab
5. Wählen Sie "Anfrage" (Firefox) oder "Nutzlast" (Chrome/Edge)

Sie können dann die Formulardaten abrufen, wie im folgenden Bild gezeigt.

Das einzige, was dem Benutzer angezeigt wird, ist die aufgerufene URL. Wie oben erwähnt, wird bei einer GET-Anfrage der Benutzer die Daten in ihrer Adressleiste sehen, bei einer POST-Anfrage jedoch nicht. Dies kann aus zwei Gründen sehr wichtig sein:

1. Wenn Sie ein Passwort (oder andere sensible Daten) senden müssen, verwenden Sie niemals die GET-Methode, sonst riskieren Sie, es in der Adressleiste anzuzeigen, was sehr unsicher wäre.
2. Wenn Sie eine große Menge an Daten senden müssen, ist die POST-Methode vorzuziehen, da einige Browser die Größe von URLs einschränken. Darüber hinaus begrenzen viele Server die Länge von URLs, die sie akzeptieren.

Auf der Server-Seite: Abrufen der Daten

Unabhängig davon, welche HTTP-Methode Sie wählen, empfängt der Server eine Zeichenkette, die geparst wird, um die Daten als Liste von Schlüssel/Wert-Paaren zu erhalten. Die Art und Weise, wie Sie auf diese Liste zugreifen, hängt von der Entwicklungsplattform ab, die Sie verwenden, und von speziellen Frameworks, die Sie möglicherweise damit verwenden.

Beispiel: Raw PHP

PHP bietet einige globale Objekte zum Zugriff auf die Daten. Angenommen, Sie haben die POST-Methode verwendet, zeigt das folgende Beispiel einfach die Daten dem Benutzer an. Natürlich liegt es an Ihnen, was Sie mit den Daten tun. Sie können sie anzeigen lassen, in einer Datenbank speichern, per E-Mail versenden oder auf eine andere Weise verarbeiten.

Dieses Beispiel zeigt eine Seite mit den Daten, die wir gesendet haben. Sie können dies in unserem Beispiel php-example.html Datei in Aktion sehen — die dasselbe Beispielformular enthält, das wir zuvor gesehen haben, mit einer method von POST und einer action von php-example.php. Wenn es abgesendet wird, sendet es die Formulardaten an php-example.php, das den obigen PHP-Codeblock enthält. Wenn dieser Code ausgeführt wird, ist die Ausgabe im Browser Hi Mom.

Beispiel: Python

Dieses Beispiel zeigt, wie Sie mit Python dasselbe tun würden — die gesendeten Daten auf einer Webseite anzeigen. Dies verwendet das Flask-Framework zur Darstellung der Vorlagen, Behandlung der Formular-Datenübermittlung usw. (siehe python-example.py).

Die beiden Vorlagen, auf die im obigen Code verwiesen wird, sind folgende (diese müssen sich in einem Unterverzeichnis namens templates im selben Verzeichnis wie die python-example.py Datei befinden, wenn Sie das Beispiel selbst ausprobieren möchten):

• form.html: Dasselbe Formular, das wir oben im Abschnitt Die POST-Methode gesehen haben, jedoch mit action auf {{ url_for('hello') }} gesetzt. Dies ist eine Jinja Vorlage, die im Grunde HTML ist, aber Aufrufe an den Python-Code enthalten kann, der den Webserver in geschweiften Klammern enthält. url_for('hello') bedeutet im Wesentlichen "weiterleiten zu /hello, wenn das Formular übermittelt wird".
• greeting.html: Diese Vorlage enthält nur eine Zeile, die die beiden Datenelemente rendert, die ihr beim Rendern übergeben wurden. Dies geschieht über die oben gesehene Funktion hello(), die ausgeführt wird, wenn die URL /hello aufgerufen wird.

Andere Sprachen und Frameworks

Es gibt viele andere serverseitige Technologien, die Sie für die Formularbearbeitung verwenden können, darunter Perl, Java, .Net, Ruby usw. Wählen Sie einfach die, die Ihnen am besten gefällt. Es ist jedoch erwähnenswert, dass es sehr ungewöhnlich ist, diese Technologien direkt zu verwenden, da dies kompliziert sein kann. Es ist häufiger, eines der vielen hochwertigen Frameworks zu verwenden, die das Arbeiten mit Formularen erleichtern, wie zum Beispiel:

• Python
  • Django
  • Flask
  • web2py (am einfachsten zu beginnen)
  • py4web (geschrieben von denselben Entwicklern wie web2py, hat ein mehr Django-ähnliches Setup)
• Node.js
  • Express
  • Next.js (für React-Apps)
  • Nuxt (für Vue-Apps)
  • Remix
• PHP
  • Laravel
  • Laminas (ehemals Zend Framework)
  • Symfony
• Ruby
  • Ruby On Rails
• Java
  • Spring Boot

Es ist erwähnenswert, dass selbst mit diesen Frameworks die Arbeit mit Formularen nicht unbedingt einfach ist. Aber es ist viel einfacher, als zu versuchen, alle Funktionen selbst von Grund auf zu schreiben, und es wird Ihnen viel Zeit sparen.

Ein spezieller Fall: Dateien senden

Das Senden von Dateien mit HTML-Formularen ist ein besonderer Fall. Dateien sind Binärdaten — oder werden als solche betrachtet —, während alle anderen Daten Textdaten sind. Da HTTP ein Textprotokoll ist, gibt es spezielle Anforderungen für den Umgang mit Binärdaten.

Das enctype-Attribut

Dieses Attribut ermöglicht es Ihnen, den Wert des Content-Type HTTP-Headers anzugeben, der in der Anfrage enthalten ist, die beim Senden des Formulars generiert wird. Dieser Header ist sehr wichtig, da er dem Server mitteilt, welche Art von Daten gesendet werden. Standardmäßig hat er den Wert application/x-www-form-urlencoded. In menschlichen Begriffen bedeutet dies: "Dies sind Formulardaten, die in URL-Parameter kodiert wurden."

Wenn Sie Dateien senden möchten, müssen Sie drei zusätzliche Schritte unternehmen:

• Setzen Sie das method-Attribut auf POST, da Dateiinhalte nicht in URL-Parameter eingefügt werden können.
• Setzen Sie den Wert von enctype auf multipart/form-data, da die Daten in mehrere Teile aufgeteilt werden, einen für jede Datei plus einen für die Textdaten, die im Formular-Body enthalten sind (falls auch Text in das Formular eingegeben wird).
• Schließen Sie ein oder mehrere <input type="file">-Controls ein, um Ihren Benutzern das Auswählen der Datei(en) zu ermöglichen, die hochgeladen werden.

Zum Beispiel:

Sicherheitsfragen

Jedes Mal, wenn Sie Daten an einen Server senden, müssen Sie an Sicherheit denken. HTML-Formulare sind bei weitem die häufigsten Angriffspunkte für Server (Stellen, an denen Angriffe erfolgen können). Die Probleme kommen nie von den HTML-Formularen selbst — sie kommen davon, wie der Server Daten verarbeitet.

Der Artikel Website-Sicherheit unseres serverseitigen Lernleitfadens behandelt mehrere gängige Angriffe und potenzielle Abwehrmaßnahmen dagegen ausführlich. Sie sollten sich diesen Artikel ansehen, um eine Vorstellung davon zu bekommen, was möglich ist.

Seien Sie paranoid: Vertrauen Sie nie Ihren Benutzern

Wie bekämpfen Sie also diese Bedrohungen? Dies ist ein Thema, das weit über diesen Leitfaden hinausgeht, aber es gibt ein paar Regeln, die Sie beachten sollten. Die wichtigste Regel lautet: Vertrauen Sie niemals Ihren Benutzern, das umfasst auch Sie selbst; selbst ein vertrauenswürdiger Benutzer könnte gekapert worden sein.

Alle Daten, die zu Ihrem Server gelangen, müssen überprüft und bereinigt werden. Immer. Keine Ausnahme.

• Entfernen Sie potenziell gefährliche Zeichen. Die spezifischen Zeichen, die Sie vorsichtig behandeln sollten, variieren je nach dem Kontext, in dem die Daten verwendet werden, und der Serverplattform, die Sie verwenden, aber alle serverseitigen Sprachen haben Funktionen hierfür. Dinge, auf die Sie achten sollten, sind Zeichenfolgen, die wie ausführbarer Code aussehen (wie JavaScript oder SQL-Befehle).
• Begrenzen Sie die eingehende Datenmenge, um nur das zuzulassen, was erforderlich ist.
• Isolieren Sie hochgeladene Dateien. Speichern Sie sie auf einem anderen Server und erlauben Sie den Zugriff auf die Datei nur über eine andere Subdomain oder noch besser über eine völlig andere Domain.

Wenn Sie diese drei Regeln befolgen, sollten Sie viele/alle Probleme vermeiden können, aber es ist immer eine gute Idee, eine Sicherheitsüberprüfung von einer kompetenten dritten Partei durchführen zu lassen. Gehen Sie nicht davon aus, dass Sie alle möglichen Probleme gesehen haben.

Zusammenfassung

Wie oben angedeutet, ist das Senden von Formulardaten einfach, aber die Sicherung einer Anwendung kann schwierig sein. Denken Sie einfach daran, dass ein Front-End-Entwickler nicht derjenige sein sollte, der das Sicherheitsmodell der Daten definiert. Es ist möglich, eine client-seitige Formularvalidierung durchzuführen, aber der Server kann dieser Validierung nicht vertrauen, da er keine Möglichkeit hat, wirklich zu wissen, was client-seitig tatsächlich passiert ist.

Wenn Sie diese Tutorials in der richtigen Reihenfolge durchgearbeitet haben, wissen Sie nun, wie man ein Formular mit Markup und Stil versieht, eine client-seitige Validierung durchführt und haben eine Vorstellung davon, wie ein Formular eingereicht wird.

Siehe auch

Wenn Sie mehr darüber erfahren möchten, wie Sie eine Webanwendung sichern können, können Sie sich diese Ressourcen genauer ansehen:

• Server-seitige Website-Programmierung: Erste Schritte
• Das Open Web Application Security Project (OWASP)
• Web-Sicherheit von Mozilla

• Zurück
• Übersicht: Webformulare