Senden von Formulardaten

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 mit demselben Protokoll.

Ein HTML-Formular auf einer Webseite ist nichts weiter als eine benutzerfreundliche Methode, um 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.

Das <form>-Element definiert, wie die Daten gesendet werden. Alle seine Attribute sind so gestaltet, dass Sie die Anfrage konfigurieren können, die gesendet wird, wenn ein Benutzer auf einen Absende-Button klickt. Die beiden wichtigsten Attribute sind action und method.

Das action-Attribut definiert, wohin die Daten gesendet werden. Sein Wert muss eine gültige relative oder absolute URL sein. Wird dieses Attribut nicht angegeben, 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://example.com:

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

Hier verwenden wir eine relative URL – die Daten werden an eine andere URL am selben Ursprung gesendet:

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

Wenn es ohne Attribute angegeben wird, wie unten gezeigt, werden die Daten des <form>-Elements an dieselbe Seite gesendet, auf der das Formular vorhanden ist:

<form>…</form>

Die Namen und Werte der nicht-dateibasierten Formularsteuerelemente werden an den Server als name=value-Paare gesendet, die mit Ampersands verbunden sind. Der action-Wert sollte eine Datei auf dem Server sein, die die eingehenden Daten verarbeiten kann, einschließlich der Sicherstellung serverseitiger Validierung. Der Server antwortet dann, indem er die Daten verarbeitet und die durch das action-Attribut definierte URL lädt, was einen neuen Seitenaufruf (oder eine Aktualisierung der vorhandenen Seite, wenn das action auf dieselbe Seite zeigt) verursacht.

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

Das method-Attribut definiert, wie Daten gesendet werden. Das HTTP-Protokoll bietet verschiedene Möglichkeiten, eine Anfrage zu tätigen; HTML-Formulardaten können über eine Reihe verschiedener Methoden übertragen werden, die am häufigsten verwendeten sind die GET- und POST-Methoden.

Um den Unterschied zwischen diesen beiden Methoden zu verstehen, lassen Sie uns einen Schritt zurückgehen 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 allgemeiner Metadaten über die Browserfähigkeiten enthält, und einem Body, der Informationen enthalten kann, die der Server benötigt, um die spezifische Anfrage zu verarbeiten.

Die GET-Methode

Die GET-Methode ist die Methode, die der Browser verwendet, um den Server zu bitten, 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, wenn ein Formular mit dieser Methode gesendet wird, werden die Daten, die an den Server gesendet werden, an die URL angehängt.

Betrachten Sie das folgende Formular:

<form action="http://www.foo.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, sehen Sie die URL www.foo.com/?say=Hi&to=Mom in der Browser-Adressleiste, wenn Sie das Formular absenden.

Die Daten werden als eine Reihe von Name/Wert-Paaren an die URL angehängt. Nachdem die URL-Webadresse beendet ist, fügen wir ein Fragezeichen (?) gefolgt von den Name/Wert-Paaren hinzu, wobei jedes mit einem 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 so aus:

GET /?say=Hi&to=Mom HTTP/2.0
Host: foo.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 Body der HTTP-Anfrage 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 Body der HTTP-Anfrage angehängt.

Schauen wir uns ein Beispiel an – dies ist dasselbe Formular, das wir im Abschnitt GET angesehen haben, jedoch mit dem method-Attribut, das auf POST gesetzt ist.

<form action="http://www.foo.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 abgesendet wird, sehen Sie keine Daten an die URL angehängt, und die HTTP-Anfrage sieht so aus, wobei die Daten stattdessen im Anfragetext enthalten sind:

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

say=Hi&to=Mom

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

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). Ihr Formulardaten werden nach dem Absenden des Formulars im Chrome-Tab "Netzwerk" wie folgt angezeigt:

1. Öffnen Sie die Entwicklertools.
2. Wählen Sie "Netzwerk"
3. Wählen Sie "Alle"
4. Wählen Sie "foo.com" im "Name"-Tab
5. Wählen Sie "Request" (Firefox) oder "Payload" (Chrome/Edge)

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

Das einzige, was dem Benutzer angezeigt wird, ist die aufgerufene URL. Wie wir oben erwähnt haben, sieht der Benutzer bei einer GET-Anfrage die Daten in der 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 oder riskieren Sie, es in der URL-Leiste anzuzeigen, was sehr unsicher wäre.
2. Wenn Sie eine große Datenmenge senden müssen, wird die POST-Methode bevorzugt, da einige Browser die Größe von URLs begrenzen. Darüber hinaus begrenzen viele Server die Länge der URLs, die sie akzeptieren.

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. Der Zugriff auf diese Liste hängt von der Entwicklungsplattform ab, die Sie verwenden und von spezifischen Frameworks, die Sie möglicherweise damit verwenden.

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

<?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 Aktion in unserem Beispiel php-example.html Datei sehen – die dasselbe Beispielformular wie vorher enthält, 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 oben gesehenen PHP-Code enthält. Wenn dieser Code ausgeführt wird, ist die Ausgabe im Browser Hi Mom.

Dieses Beispiel zeigt, wie Sie mit Python dasselbe tun würden – die eingereichten Daten auf einer Webseite anzeigen. Dies verwendet das Flask-Framework zum Rendern der Vorlagen, zur Behandlung des Formulardaten-Submissions 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 in den obigen 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, wenn Sie das Beispiel selbst ausführen):

• 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 enthält, der in geschweiften Klammern läuft. url_for('hello') bedeutet im Grunde "leite zu /hello weiter, wenn das Formular abgesendet wird".
• greeting.html: Diese Vorlage enthält nur eine Zeile, die die beiden an sie übergebenen Daten rendert, wenn sie gerendert wird. Dies erfolgt über die oben gesehene hello()-Funktion, die ausgeführt wird, wenn die /hello URL aufgerufen wird.

Es gibt viele andere serverseitige Technologien, die Sie zur Formularbearbeitung verwenden können, einschließlich Perl, Java, .Net, Ruby usw. Wählen Sie einfach die aus, die Ihnen am besten gefällt. Es ist jedoch zu beachten, dass es sehr unüblich ist, diese Technologien direkt zu verwenden, da dies schwierig sein kann. Es ist viel üblicher, eines der vielen hochwertigen Frameworks zu verwenden, die die Bearbeitung von Formularen erleichtern, wie zum Beispiel:

• Python
  • Django
  • Flask
  • web2py (am einfachsten zum Einstieg)
  • py4web (vom selben Entwickler wie web2py, hat eine Django-ähnlichere Einrichtung)
• 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 zu beachten, dass die Arbeit mit Formularen selbst unter Verwendung dieser Frameworks nicht unbedingt einfach ist. Aber es ist viel einfacher, als alle Funktionalitäten selbst von Grund auf zu schreiben, und wird Ihnen viel Zeit sparen.

Das Senden von Dateien mit HTML-Formularen ist ein Sonderfall. Dateien sind Binärdaten – oder werden als solche angesehen – während alle anderen Daten Textdaten sind. Da HTTP ein Textprotokoll ist, gibt es spezielle Anforderungen für die Handhabung von Binärdaten.

Dieses Attribut ermöglicht es Ihnen, den Wert des Content-Type HTTP-Headers festzulegen, der in der Anfrage enthalten ist, die generiert wird, wenn das Formular abgesendet wird. Dieser Header ist sehr wichtig, da er dem Server mitteilt, welche Art von Daten gesendet werden. Standardmäßig ist dessen 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 der Dateiinhalts nicht innerhalb von URL-Parametern eingegeben werden kann.
• 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 Formularkörper enthalten sind (wenn auch Text in das Formular eingegeben wird).
• Fügen Sie ein oder mehrere <input type="file">-Steuerelemente hinzu, um Ihren Benutzern zu ermöglichen, die Datei(en) auszuwählen, die hochgeladen werden sollen.

Zum Beispiel:

<form method="post" action="https://www.foo.com" 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>

Jedes Mal, wenn Sie Daten an einen Server senden, müssen Sie die Sicherheit berücksichtigen. HTML-Formulare sind bei weitem die häufigsten Angriffspunkte (Orte, an denen Angriffe passieren können). Die Probleme kommen nie von den HTML-Formularen selbst – sie kommen von der Art und Weise, wie der Server die Daten behandelt.

Der Artikel Website-Sicherheit unseres serverseitigen Lernbereichs erörtert mehrere häufige Angriffe und mögliche Abwehrmaßnahmen gegen sie im Detail. Sie sollten diesen Artikel besuchen, um eine Vorstellung davon zu bekommen, was möglich ist.

Wie bekämpfen Sie 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, einschließlich sich selbst; sogar ein vertrauenswürdiger Benutzer könnte gehackt worden sein.

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

• Entkommen Sie potenziell gefährlichen Zeichen. Die spezifischen Zeichen, mit denen Sie vorsichtig sein sollten, variieren je nach dem Kontext, in dem die Daten verwendet werden, und der Serverplattform, die Sie verwenden, aber alle serverseitigen Sprachen haben Funktionen dafür. Zu beobachtende Elemente sind Zeichenfolgen, die wie auszuführender Code aussehen (wie JavaScript oder SQL-Befehle).
• Begrenzen Sie die eingehende Datenmenge, um nur das Notwendige zuzulassen.
• Sandkasten 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/meisten Probleme vermeiden können, 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 potenziellen Probleme gesehen haben.

Wie wir oben angedeutet haben, ist das Senden von Formulardaten einfach, aber das Sichern einer Anwendung kann schwierig sein. Denken Sie einfach daran, dass ein Frontend-Entwickler nicht die Person sein sollte, die das Sicherheitsmodell der Daten definiert. Es ist möglich, clientseitige Formularvalidierung durchzuführen, aber der Server kann dieser Validierung nicht vertrauen, da er keine Möglichkeit hat, wirklich zu wissen, was auf der Clientseite tatsächlich passiert ist.

Wenn Sie diese Tutorials in der Reihe durchgearbeitet haben, wissen Sie jetzt, wie Sie ein Formular markieren und gestalten, eine clientseitige Validierung durchführen und haben eine Vorstellung davon, wie Sie ein Formular übermitteln.

Wenn Sie mehr über die Sicherung einer Webanwendung erfahren möchten, können Sie in diese Ressourcen eintauchen:

• Erste Schritte mit serverseitiger Website-Programmierung
• Das Open Web Application Security Project (OWASP)
• Web-Sicherheit von Mozilla

• Zurück
• Übersicht: Webformulare

• Anleitung zum Erstellen benutzerdefinierter Formular-Steuerelemente
• Formulare über JavaScript senden