|
Das Thema dieser Seite ist der Upload von Dateien durch beliebige BesucherInnen
einer Webseite. Für den Upload eigener Dateien (Webseiten, Bilder, ..) verwenden sie besser das File Transfer Protokoll (FTP). |
Der Upload ist kein technisches Problem, jedoch ein relativ hohes Sicherheits-Risiko. Der größte Teil des Aufwands betrifft daher Maßnahmen gegen den Upload unerwünschter Dateien. |
PHP
|
PHP Hypertext Processor (File-Input/Output) |
| Wozu Upload ? | Nutzung von Script-Programmen eines Webservers |
| Upload - Senden | HTML-Formular zum Live-Absenden einer Upload-Datei |
Upload - Empfang
|
Programm zum Empfang und Speichern einer Datei |
Download
|
mit einfachen HTML-Hyperlinks |
| Javascript | Upload mit einem Javascript-Programm |
Wozu Upload ? |
|
Script-ProgrammeProgramme in modernen Script-Programmiersprachen (→ Perl, → PHP, Python, ..) bieten fast unbegrenze Möglichkeiten bei minimalem Aufwand.
Ein wesentlicher Vorteil ist die Möglichkeit, das gesamte User-Interface
(Bedienungs-Elemente, Hilfe, Ausgabe) auf Webseiten unterzubringen.
Script-Programme und ganze Pakete solcher Programme sind im Internet verfügbar,
teilweise in professioneller Qualität und in den meisten Fällen kostenlos.
Solche Programme können auf alle Dateien jenes (Server)-PC zugreifen,
auf dem sie laufen.
|
Allerdings sind Browser nicht in der Lage, mit den hier vorgestellten
Script-Programmen und den von ihnen erzeugten Webseiten zu arbeiten. Dazu braucht
man einen
Webserver.Es gibt 2 Methoden, um die Vorteile von Script-Programmen für Dateien des eigenen PC zu nutzen: ● Der Webserver kommt zu den Dateien: Sie installieren einen Webserver am eigenen PC und können damit die Dateien ihres PC auswerten. ● Die Dateien kommen zum Webserver: Sie kopieren Dateien von ihrem PC auf einen Webserver (Upload) und können mit dessen Script-Programmen ihre Daten auswerten. |
Webserver am eigenen PC♥ Die Installation eines → Webservers am eigenen PC ist sehr empfehlenswert.● Der Server und die von ihm verwendeten Script-Programme können auf alle Dateien des eigenen PC zugreifen. ● Andererseits lässt sich der Zugriff auf die erzeugten Webseiten einfach und zuverlässig auf Browser am eigenen PC beschränken. ● Es gibt viele verschiedene Webserver. Standard ist → Apache. Dieser professionelle Server ist kostenlos für alle gängigen Betriebssysteme verfügbar und Bestandteil jeder gängigen Linux-Distribution. ► Diese Variante ist vorteilhaft, wenn sie ihren eigenen PC professionell einsetzen, wenn sie oft Script-Programme verwenden oder wenn sie solche entwickeln. |
UploadAlternativ kann man Dateien des eigenen PC auf einen entfernten Webserver kopieren.Das erfordert zwar einen gewissen Aufwand, ermöglicht jedoch die Nutzung aller Vorteile eines Webservers und seiner Script-Programme für eigenen Dateien. ► Diese Variante ist vorteilhaft, wenn Script-Programme nur selten oder nur zur Verarbeitung kleiner Dateien eingesetzt werden, oder wenn sie Script-Programme für die BesucherInnen ihres Webs anbieten. ► Auf dieser Webseite und auf der dazu passenden Empfangs-Seite wird Live demonstriert, wie man den Datei-Upload organisiert. |
Upload - Absende-Formular |
|
| Hier wird Live demonstriert, wie eine Datei vom lokalen PC auf den Webserver kopiert wird (Upload). | Tragen sie den Pfad zu jener Datei auf ihrem PC ein, die sie auf den Webserver kopieren (uploaden) wollen. |
| Pfad zur Upload-Datei: | |
| Zur Auswahl der Datei und zum Absenden werden Formular-Elemente verwendet. |
Jedes HTML-Formular wird durch ein <form>-Element
erzeugt. Jede Webseite kann beliebig viele Formulare entalten. |
|
Rechts der HTML-Quellcode des verwendeten Formulars. Ein Button zur Eingabe des Datei-Pfades wird vom Browser automatisch erzeugt. Man findet diesen Button nicht im Quelltext ! Durch Klicken des "Upload"-Buttons wird die ausgewählte Datei an das Empfangs-Programm (hier ziel.php ) am Webserver gesendet. |
HTML-Formular zum Datei-Upload:
<form name="fu" enctype="multipart/form-data"
action="ziel.php" method="post">
<input name="upfile" type="file"
maxlength="20000" />
</form>
<input name="submit" type="submit" value="Upload" /> |
Details des Absende-Formulars:● Das Formular-Attribut enctype muss den Wert "multipart/form-data" haben.● Als Methode ist nur method="post" erlaubt. ● Das Attribut action bezeichnet das Empfangs-Programm - Normalerweise eine dynamische Webseite, z.B. mit → Perl oder → PHP programmiert. |
● Das erste <input> Element bezeichnet das Text-Feld, welches den Pfad aufnimmt inkl. (!) des dazugehörenden Such-Buttons. Seine Beschriftung variiert je nach Browser ( "Durchsuchen", "Auswählen"...) ● Dieses Feld muss das Attribut type=file" tragen. ● Das Attribut maxlength gibt die maximale Größe der Upload-Datei in Byte an. ● Das zweite <input> Element erzeugt den Upload-Button. |
Submit-Vorgang● Mit Klick auf den Submit-Button werden die aktuell eingetragenen Formular-Daten an das mit Attribut action angegebene Empfangs-Programm gesendet.● Achten sie auf die name-Attribute der Formular-Elemente: Die Daten werden unter genau diesen Namen transportiert. Selbstverständlich können sie in eigenen Formularen andere Namen verwenden, diese müssen jedoch eindeutig sein. |
● Das Empfangs-Programm (im Quelltext-Beispiel das PHP Script-Programm der Datei ziel.php hat die Aufgabe, die erhaltenen Daten zu prüfen. Das Risiko, am Server unerwünschte Dateien zu erhalten, ist sehr hoch. Daher treibt man relativ viel Aufwand, um den Upload unerwünschter Dateien zu verhindern. ● Nur dann, wenn die Upload-Datei alle Tests bestanden hat, wird sie tatsächlich am Webserver gespeichert. In jedem anderen Fall wird sie gelöscht. |
ManipulationMan kann den Text im Upload-Formular (Pfad zur Upload-Datei) manuell ändern.● Auf diese Weise können auch nicht existierende Pfade eingetragen und abgesendet werden. Alle gängigen Browser senden in diesem Fall eine Leer-Datei der Länge 0 Byte. 
Die Manipulation eines Upload-Formulars ist ein besonders einfacher Weg, um
böswillige Angriffe auf einen Webserver durchzuführen. Dagegen werden im
→ Empfangs-Programm
einige Sicherungen eingebaut.
|
SoftLinks (Alias, Verknüpfungen)Es ist möglich, im Upload-Formular einen SoftLink anzugeben. Alle gängigen Browser interpretieren den SoftLink, d.h. sie senden jene Datei, auf welche der SoftLink zeigt, und nicht den SoftLink selbst (auch das ist ein Datei-Objekt, auf Windows-Systemen z.B. mit der versteckten Erweiterung *.lnk). |
Download |
|
|
Zum Download beliebiger Dateien genügen in einer Webseite einfache HTML
Hyperlinks (<a>-Elemente) mit einem Verweis
(Attribut href ) auf die Datei. ● Allerdings versucht jedes Browser-Programm, bestimmte Dateien selbst zu öffnen, z.B. Webseiten *.htm ♣ Tipp: Ein Verweis kann auch eine Web-Adresse (URI) enthalten (letztes Beispiel rechts). |
Hyperlinks zum Download verschiedener Dateien: |
Browser-MaßnahmenJeder Browser bietet die Möglichkeit, das Öffnen eines HTML-Hyperlinks zu unterdrücken, und die Datei ohne Verarbeitung am eigenen PC zu speichern: |
● Rechtsklicken sie einen beliebigen Hyperlink und verwenden sie einen Befehl wie , |
Dateitype & ProviderManche Webspace-Provider erlauben nur genz bestimmte Dateien zum Upload und damit auch zum nachfolgenden Download.Die Begrenzung auf eine bestimmte Datei-Größe ist verständlich. Die Begrenzung auf wenige Datei-Typen wie z.B. *.htm,*.txt und Grafik-Dateien soll unerlaubten Datenklau und unerwünschten Traffic verhindern. Es gibt einige Tricks, um trotzdem beliebige Dateien auf den eigenen Webspace zu laden und dort für den Download zur Verfügung zu stellen: • Datei in ein Archiv (*.zip) verpacken. Der Upload von Archiven ist meistens erlaubt. • Übergroße Dateien lassen sich mit Archiv-Programmen in mehrere kleine Teile zerlegen. • Als letzte Maßnahme ist es möglich, jede beliebige Datei mit einem erlaubten Namen wie *.gif, *.pdf,... zu benennen, allenfalls zusätzlich in ein Archiv zu packen. In diesem Fall muss man allerdings einen Hinweis anbringen, wie das Link-Ziel zu laden, auszupacken und mit einem anderen Namen zu versehen ist. |
Die gleichen Tricks können nicht nur zum Umgehen von
Provider-Beschränkungen sondern auch zur Tarnung gefährlicher Programme
verwendet werden. |
Javascript |
|
|
Javascript wird häufig zusammen mit HTML-Formularen verwendet,
insbesondere auf professionellen Webseiten.
Upload-Formulare stellen eine Ausnahme dar: Die Möglichkeiten von
→
Javascript (und →
CSS) sind in diesem Fall auf ein Minimum beschränkt. Das Verhalten ist
je nach Browser und Version etwas unterschiedlich überdies kaum dokumentiert.
|
●
Man kann immer den Inhalt eines Upload-Feldes (d.h. den Datei-Pfad) mit Javascript
lesen. ● Man kann nur in speziellen Fällen ein ausgefülltes Upload-Formular mit einem Javascript-Programm absenden. ● Es ist schlechter Stil, meist aber sinnlos oder (mit M$IE Browser) unmöglich, ein Upload-Formular mit Javascript auszufüllen. |
|
Validierung bedeutet die Überprüfung aller
eingetragenen Formular-Daten: Manche Felder müssen
eingetragen werden, andere dürfen nur bestimmte Daten
enthalten, usw. Javascript wird sinnvoll dazu eingesetzt, Formular-Daten vor dem Absenden zu Validieren: Das geht viel rascher und erfordert weniger aufwand als die (immer zusätzlich notwendige) Validierung am Server. |
Ein Upload-Formular stellt eine Ausnahme dar: Man kann mit Javascript lediglich
den Inhalt des Pfad-Feldes lesen, d.h. prüfen, ob überhaupt ein Pfad
eingetragen wurde. Der M$IE Browser erlaubt Javascript keine Änderung des Pfades - Das wäre ohnehin sinnlos, da Javascript keinen Zugriff auf das Dateisystem ihres PC hat, und daher nicht überprüfen kann, ob die angegebene Datei überhaupt existiert. |
|
Rechts das Beispiel für ein
→
Javascript-Programm, welches die erwähnte minimale Validierung und den
Upload durchführt: • Wenn kein Pfad eingetragen wurde, dann erfolgt eine Warnung. • Wenn das Pfad Feld irgend einen Inhalt hat, dann wird mit der Anweisung submit() der Upload ausgelöst. |
Javascript-Programm für Mini-Validierung und Upload:
function upload() {
var v=document.fu.upfile.value;
}
if(v.length) { document.fu.submit(); } else { alert("Fehler !"); } |
|
Wenn der Upload mit Javascript ausgeführt wird, dann braucht man
keinen <input>-Button im Formular. An einer beliebigen Stelle der Webseite wird ein <button>-Element oder zumindest ein Link zum Start des Javascript-Programms angebracht. |
Alternative Möglichkeiten zum Start des Javascript-Programms mit einem
HTML <button> oder mit einem Hyperlink:
So sieht der beschriebene <button> aus: |
> Entwicklung
> PHP
> Input/Output
> Upload & Download
|
Sicherheit