Senden von Formulardaten

Client/Server-Architektur

Im einfachsten Fall verwendet das Web eine Client/Server-Architektur, die wie folgt zusammengefasst werden kann: Ein Client (normalerweise 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 unter Verwendung desselben Protokolls.

Ein HTML-Formular auf einer Webseite ist nichts anderes als eine bequeme benutzerfreundliche Möglichkeit, eine HTTP-Anfrage zu konfigurieren, um Daten an einen Server zu senden. Dies ermöglicht es dem Benutzer, Informationen bereitzustellen, die in der HTTP-Anfrage übermittelt werden sollen.

Auf der Clientseite: Definieren, wie die Daten gesendet werden

Das <form>-Element definiert, wie die Daten gesendet werden. Alle seine Attribute sind darauf ausgelegt, die Konfiguration der Anfrage festzulegen, die gesendet wird, wenn ein Benutzer auf einen Submit-Button klickt. 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 ist, werden die Daten zur URL der Seite gesendet, die das Formular enthält — also zur aktuellen Seite.

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

<form action="https://www.example.com">…</form>

Hier verwenden wir eine relative URL — die Daten werden an eine andere URL innerhalb des gleichen Ursprungs gesendet:

<form action="/somewhere_else">…</form>

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

<form>…</form>

Die Namen und Werte der Nicht-Datei-Formularsteuerungen werden als Paare name=value an den Server gesendet, die durch kaufmännische Unds (&) verbunden sind. Der action-Wert sollte eine Datei auf dem Server sein, die die eingehenden Daten verarbeiten kann, einschließlich serverseitiger Validierung. Der Server antwortet dann, indem er die Daten verarbeitet und die URL lädt, die durch das action-Attribut definiert ist, was zu einem neuen Seitenaufruf führt (oder zu einer Aktualisierung der vorhandenen Seite, wenn action auf dieselbe Seite verweist).

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 mehrere verschiedene Methoden übertragen werden, wobei GET und POST die gebräuchlichsten sind.

Um den Unterschied zwischen diesen beiden Methoden zu verstehen, gehen wir einen Schritt zurück und untersuchen, 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 von globalen Metadaten über die Fähigkeiten des Browsers enthält, und einem Körper, der Informationen enthalten kann, die für den Server notwendig sind, um die spezifische Anfrage zu bearbeiten.

Die GET-Methode

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

Betrachten Sie das folgende Formular:

<form action="https://www.example.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi" />
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom" />
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
</form>

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

Die Daten werden als eine Reihe von name/value-Paaren an die URL angehängt. Nachdem die URL-Webadresse beendet ist, fügen wir ein Fragezeichen (?) ein, gefolgt von den name/value-Paaren, die jeweils durch ein kaufmännisches Und (&) getrennt sind. In diesem Fall übermitteln 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:

GET /?say=Hi&to=Mom HTTP/2.0
Host: example.com

Die POST-Methode

Die POST-Methode ist ein wenig anders. Es ist die Methode, die der Browser verwendet, um mit dem Server zu sprechen, wenn er um eine Antwort bittet, die die im HTTP-Anfragekörper bereitgestellten Daten berücksichtigt: "Hey Server, schau dir diese Daten an und sende mir ein entsprechendes Ergebnis zurück." Wenn ein Formular mit dieser Methode gesendet wird, werden die Daten an den Körper der HTTP-Anfrage angehängt.

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

<form action="https://www.example.com" method="POST">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi" />
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom" />
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
</form>

Wenn das Formular mit der POST-Methode gesendet wird, werden keine Daten an die URL angehängt, und die HTTP-Anfrage sieht folgendermaßen aus, wobei die Daten im Anfragekörper enthalten sind:

POST / HTTP/2.0
Host: example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom

Der Content-Length-Header gibt die Größe des Körpers an, und der Content-Type-Header gibt den Typ der an den Server gesendeten Ressource an. Wir werden diese Header später noch einmal besprechen.

HTTP-Anfragen ansehen

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

1. Öffnen Sie die Entwicklertools.
2. Wählen Sie "Netzwerk"
3. Wählen Sie "Alle"
4. Wählen Sie "example.com" im "Name"-Tab
5. Wählen Sie "Anfrage" (Firefox) oder "Payload" (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 bereits erwähnt, sieht der Benutzer bei einer GET-Anfrage die Daten in seiner URL-Leiste, bei einer POST-Anfrage jedoch nicht. Dies kann aus zwei Gründen sehr wichtig sein:

1. Wenn Sie ein Passwort (oder ein anderes sensibles Datenstück) senden müssen, verwenden Sie niemals die GET-Methode, da Sie sonst riskieren, dass es in der URL-Leiste angezeigt wird, was sehr unsicher wäre.
2. Wenn Sie eine große Menge an Daten senden müssen, wird die POST-Methode bevorzugt, da einige Browser die Größe von URLs begrenzen. Außerdem begrenzen viele Server die Länge der URLs, die sie akzeptieren.

Auf der Serverseite: Abrufen der Daten

Welches HTTP-Verfahren Sie auch wählen, der Server erhält einen String, der analysiert wird, um die Daten als Liste von Schlüssel/Wert-Paaren zu erhalten. Wie Sie auf diese Liste zugreifen, hängt von der von Ihnen verwendeten Entwicklungsplattform und von spezifischen Frameworks ab, die Sie möglicherweise verwenden.

Beispiel: Rohes PHP

PHP bietet einige globale Objekte zum Zugriff auf die Daten. Angenommen, Sie haben die POST-Methode verwendet, dann nimmt das folgende Beispiel einfach die Daten und zeigt sie dem Benutzer an. Natürlich liegt es an Ihnen, was Sie mit den Daten machen. Möglicherweise zeigen Sie sie an, speichern Sie in einer Datenbank, senden Sie per E-Mail oder verarbeiten Sie auf andere Weise.

<?php
  // The global $_POST variable allows you to access the data sent with the POST method by name
  // To access the data sent with the GET method, you can use $_GET
  $say = htmlspecialchars($_POST["say"]);
  $to  = htmlspecialchars($_POST["to"]);

  echo  $say, " ", $to;
?>

Dieses Beispiel zeigt eine Seite mit den gesendeten Daten. Sie können dies in unserem Beispiel php-example.html sehen — das enthält dasselbe Beispielformular wie oben gesehen, mit der method POST und einer action von php-example.php. Wenn es übermittelt wird, sendet es die Formulardaten an php-example.php, das den obigen PHP-Code enthält. Wenn dieser Code ausgeführt wird, lautet die Ausgabe im Browser Hi Mom.

Beispiel: Python

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

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def form():
    return render_template('form.html')

@app.route('/hello', methods=['GET', 'POST'])
def hello():
    return render_template('greeting.html', say=request.form['say'], to=request.form['to'])

if __name__ == "__main__":
    app.run()

Die beiden oben im Code referenzierten Vorlagen sind wie folgt (diese müssen sich in einem Unterverzeichnis namens templates im selben Verzeichnis wie die python-example.py-Datei befinden, falls Sie das Beispiel selbst ausführen möchten):

• form.html: Dasselbe Formular, das wir im Abschnitt Die POST-Methode gesehen haben, aber mit action auf {{ url_for('hello') }}. Dies ist eine Jinja-Vorlage, die im Grunde HTML ist, aber Aufrufe an den Python-Code enthalten kann, der auf dem in geschweiften Klammern geschriebenen Webserver läuft. url_for('hello') bedeutet im Grunde "Umleitung zu /hello, wenn das Formular übermittelt wird".
• greeting.html: Diese Vorlage enthält nur eine Zeile, die die beiden Datenstücke rendert, die ihm beim Rendern übergeben werden. Dies geschieht über die hello()-Funktion wie oben gesehen, die ausgeführt wird, wenn die /hello-URL navigiert wird.

Andere Sprachen und Frameworks

Es gibt viele andere serverseitige Technologien, die Sie zur Formularbehandlung verwenden können, darunter Perl, Java, .Net, Ruby usw. Wählen Sie einfach diejenige, die Ihnen am besten gefällt. Es ist jedoch zu beachten, dass es sehr selten ist, diese Technologien direkt zu verwenden, da dies schwierig sein kann. Es ist üblicher, eines der vielen hochwertigen Frameworks zu verwenden, die den Umgang mit Formularen erleichtern, wie zum Beispiel:

• Python
  • Django
  • Flask
  • web2py (am einfachsten zu starten)
  • 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 (früher Zend Framework)
  • Symfony
• Ruby
  • Ruby On Rails
• Java
  • Spring Boot

Es ist zu beachten, dass der Umgang mit Formularen selbst unter Verwendung dieser Frameworks nicht unbedingt einfach ist. Aber es ist viel einfacher, als alle Funktionalitäten komplett selbst von Grund auf zu schreiben, und wird Ihnen viel Zeit sparen.

Ein besonderer Fall: Senden von Dateien

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 besondere Anforderungen für die Handhabung von Binärdaten.

Das enctype-Attribut

Mit diesem Attribut können Sie den Wert des HTTP-Headers Content-Type festlegen, der in der beim Absenden des Formulars generierten Anfrage enthalten ist. Dieser Header ist sehr wichtig, da er dem Server mitteilt, welche Art von Daten gesendet werden. Standardmäßig ist sein 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. Ein Teil für jede Datei plus einen für die im Formularkörper enthaltenen Textdaten (falls der Text auch in das Formular eingegeben wird).
• Fügen Sie eine oder mehrere <input type="file">-Steuerelemente hinzu, damit Ihre Benutzer die Dateien auswählen können, die hochgeladen werden sollen.

Zum Beispiel:

<form
  method="post"
  action="https://example.com/upload"
  enctype="multipart/form-data">
  <div>
    <label for="file">Choose a file</label>
    <input type="file" id="file" name="myFile" />
  </div>
  <div>
    <button>Send the file</button>
  </div>
</form>

Sicherheitsfragen

Jedes Mal, wenn Sie Daten an einen Server senden, müssen Sie die Sicherheit berücksichtigen. HTML-Formulare sind mit Abstand die häufigsten Angriffspunkte für Server. Die Probleme kommen nie von den HTML-Formularen selbst — sie kommen davon, wie der Server die Daten behandelt.

Der Artikel Website-Sicherheit unseres Server-seitigen Lernprogramms behandelt mehrere gängige Angriffe und mögliche Abwehrmaßnahmen im Detail. Sie sollten diesen Artikel lesen, um eine Vorstellung davon zu bekommen, was möglich ist.

Seien Sie paranoid: Vertrauen Sie niemals Ihren Nutzern

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 im Hinterkopf behalten sollten. Die wichtigste Regel ist: Vertrauen Sie niemals Ihren Nutzern, einschließlich sich selbst; selbst ein vertrauenswürdiger Benutzer könnte gehackt worden sein.

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

• Entfernen Sie potenziell gefährliche Zeichen. Die spezifischen Zeichen, bei denen Sie vorsichtig sein sollten, variieren je nach Kontext, in dem die Daten verwendet werden, und je nach der von Ihnen eingesetzten Serverplattform. Alle serverseitigen Sprachen verfügen jedoch über Funktionen dafür. Achten Sie auf Zeichenfolgen, die wie ausführbarer Code aussehen (wie JavaScript oder SQL-Befehle).
• Beschränken Sie die eingehende Datenmenge, um nur das zuzulassen, was notwendig ist.
• Beschränken 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 in der Lage sein, viele/außergewöhnlichste Probleme zu vermeiden, aber es ist immer eine gute Idee, eine Sicherheitsüberprüfung durch eine kompetente dritte 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 das Sicherstellen einer Anwendung kann knifflig sein. Denken Sie daran, dass ein Frontend-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 auf der Clientseite passiert ist.

Wenn Sie diese Tutorials in Reihenfolge durchgearbeitet haben, wissen Sie jetzt, wie man ein Formular markiert und gestaltet, wie man eine client-seitige Validierung durchführt und haben eine Vorstellung davon, wie man ein Formular absendet.

Siehe auch

Wenn Sie mehr darüber lernen möchten, wie Sie eine Webanwendung sichern können, könnten Ihnen diese Ressourcen helfen:

• Erste Schritte in der serverseitigen Website-Programmierung
• Das Open Web Application Security Project (OWASP)
• Web-Sicherheit von Mozilla

• Zurück
• Übersicht: Webformulare