HTML accept-Attribut

Das HTML-Attribut accept teilt dem Browser mit, welche Dateitypen ein <input type="file">-Steuerelement im Dateiauswahldialog des Betriebssystems vorschlagen soll. Es ist ein Hinweis für die Benutzeroberfläche, kein Sicherheits- oder Validierungsmechanismus: Es erleichtert das Auffinden der richtigen Dateien, wenn ein Benutzer auf die Upload-Schaltfläche klickt.

Diese Seite erläutert, welche Werte accept annimmt (MIME-Typen, Dateiendungen und Wildcards), wie man sie kombiniert, wie sich der Wert in verschiedenen Browsern verhält, wie accept mit dem Attribut multiple und der Formular-Kodierung zusammenwirkt, und warum Uploads auf dem Server weiterhin validiert werden müssen.

accept kann nur beim Element <input> verwendet werden, und nur wenn dessen type gleich file ist. Bei jedem anderen Input-Typ wird es ignoriert.

Wie der Browser den Wert verwendet

Wenn ein Benutzer den Dateiauswahldialog öffnet, nutzt der Browser accept, um die angezeigten oder auswählbaren Dateien vorzufiltern. Das genaue Verhalten hängt vom jeweiligen Browser und Betriebssystem ab:

• Chrome / Edge fügen dem Dateityp-Dropdown einen Eintrag hinzu, der Ihrer accept-Liste entspricht, und wählen ihn standardmäßig aus, lassen den Benutzer aber dennoch zu „Alle Dateien" wechseln.
• Firefox filtert die Liste ähnlich und bietet auf manchen Plattformen ebenfalls einen „Alle Dateien"-Fallback an.
• Safari berücksichtigt den Wert, aber Wortlaut und Strenge des Filters unterscheiden sich von Chrome.

In jedem Browser kann der Benutzer den Filter übergehen und eine Datei auswählen, die nicht übereinstimmt. Der accept-Wert blockiert niemals das Absenden eines Formulars und wird nie erzwungen. Betrachten Sie ihn ausschließlich als Komfortfunktion.

Syntax

<input type="file" accept="value">

Der Wert ist eine kommagetrennte Liste aus einem oder mehreren Dateityp-Bezeichnern. (Ältere Referenztabellen zeigen die Optionen manchmal mit einem | dazwischen — dieses Pipe-Zeichen bedeutet „wählen Sie aus diesen Wertarten", es ist im Attribut selbst nicht gültig.) Jeder Bezeichner ist eines der Folgenden:

Sie können beliebige dieser Angaben in einer durch Kommas getrennten Liste kombinieren.

Beispiele

Beliebiges Bild akzeptieren

<form action="/form/submit" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar" accept="image/*" />
  <input type="submit" value="Upload" />
</form>

Bestimmte MIME-Typen akzeptieren

Verwenden Sie eine kommagetrennte Liste, um nur bestimmte Formate zuzulassen — hier PNG und JPEG, aber nicht GIF oder WebP:

<input type="file" name="photo" accept="image/png,image/jpeg" />

Akzeptieren anhand der Dateiendung

Dateiendungen eignen sich gut für Formate, deren MIME-Typ ausführlich oder systemübergreifend inkonsistent ist, wie etwa Office-Dokumente:

<input type="file" name="document" accept=".pdf,.doc,.docx" />

Audio oder Video akzeptieren

<!-- any audio file -->
<input type="file" name="track" accept="audio/*" />

<!-- any video file -->
<input type="file" name="clip" accept="video/*" />

MIME-Typen mit Dateiendungen kombinieren

Eine einzelne accept-Liste kann beide Formen gleichzeitig enthalten. Das ist nützlich, wenn eine Wildcard zu weit gefasst ist, aber manche Dateitypen einfacher als Endung ausgedrückt werden können:

<input type="file" name="upload" accept="image/png,image/jpeg,.pdf,.docx" />

Zusammenarbeit mit multiple und Formular-Kodierung

accept wird fast immer zusammen mit zwei weiteren Eigenschaften von Datei-Eingabefeldern verwendet:

• Das Attribut multiple ermöglicht es dem Benutzer, mehr als eine Datei gleichzeitig im Auswahldialog auszuwählen. Es funktioniert genauso mit accept: Der Filter gilt für jede Datei, die der Benutzer hinzufügt.
• enctype="multipart/form-data" ist beim Element <form> erforderlich, damit die Dateien tatsächlich übertragen werden. Eine normale Formular-Kodierung überträgt nur den Dateinamen, nicht dessen Inhalt.

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="gallery">Choose images:</label>
  <input type="file" id="gallery" name="gallery" accept="image/*" multiple />
  <input type="submit" value="Upload" />
</form>

Weitere Informationen zum Erstellen von Upload-Formularen finden Sie unter HTML <form>-Tag, HTML <input>-Tag und im Leitfaden HTML-Formulare.

Sicherheit: accept niemals vertrauen

Das Attribut accept ist kein Validierungsmechanismus. Sich für die Sicherheit darauf zu verlassen ist aus zwei Gründen unsicher:

• Erweiterungs-Spoofing. Der Name einer Datei (und damit ihre Endung) sagt nichts über ihren tatsächlichen Inhalt aus. Jeder kann malware.exe in photo.png umbenennen. Der accept-Filter betrachtet nur die Endung und den gemeldeten MIME-Typ, die beide vom Client kontrolliert werden.
• MIME-Type-Sniffing. Der MIME-Typ, den der Browser für eine hochgeladene Datei meldet, wird aus dem Dateinamen oder dem Betriebssystem abgeleitet und kann gefälscht werden. Der Server muss die tatsächlichen Bytes der Datei untersuchen, um zu wissen, was sie wirklich ist.

Da der Benutzer den Picker-Filter vollständig umgehen kann, muss jeder Upload auf dem Server validiert werden: Prüfen Sie den tatsächlichen Dateityp anhand des Inhalts (nicht des Namens), erzwingen Sie eine Größenbeschränkung, speichern Sie die Datei außerhalb des Web-Roots oder unter einem sicheren Pfad, und führen Sie hochgeladene Dateien niemals aus. Verwenden Sie accept ausschließlich zur Verbesserung der Benutzererfahrung, niemals als Sicherheitsschranke.

Übungsaufgaben