Attributo HTML accept

L'attributo HTML accept indica al browser quali tipi di file un controllo <input type="file"> dovrebbe suggerire nel selettore file del sistema operativo. È un suggerimento per l'interfaccia utente, non una funzione di sicurezza o validazione: rende più facile trovare i file giusti quando l'utente fa clic sul pulsante di caricamento.

Questa pagina tratta i valori che accept può assumere (tipi MIME, estensioni di file e caratteri jolly), come combinarli, come si comporta il valore nei vari browser, come accept si abbina all'attributo multiple e alla codifica del form, e perché è comunque necessario validare i caricamenti sul server.

È possibile utilizzare accept solo sull'elemento <input>, e solo quando il suo type è file. Su qualsiasi altro tipo di input viene ignorato.

Come il browser usa il valore

Quando un utente apre il selettore file, il browser utilizza accept per pre-filtrare i file mostrati o selezionabili. Il comportamento esatto dipende da ciascun browser e sistema operativo:

• Chrome / Edge aggiungono una voce nel menu a discesa del tipo di file che corrisponde al tuo elenco accept e la selezionano per impostazione predefinita, consentendo comunque all'utente di passare a "Tutti i file".
• Firefox filtra l'elenco in modo simile e su alcune piattaforme offre anche un'alternativa "Tutti i file".
• Safari rispetta il valore, ma la formulazione e il rigore del filtro differiscono da Chrome.

In ogni browser l'utente può ignorare il filtro e scegliere un file che non corrisponde. Il valore accept non blocca mai l'invio del form e non viene mai applicato in modo vincolante. Trattalo esclusivamente come una comodità.

Sintassi

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

Il valore è un elenco separato da virgole di uno o più specificatori di tipo file. (Nelle tabelle di riferimento più vecchie le opzioni sono talvolta mostrate con un | tra loro — quel carattere pipe significa "scegli tra questi tipi di valore", non è valido nell'attributo stesso.) Ogni specificatore è uno dei seguenti:

È possibile combinare questi tipi in un unico elenco, separati da virgole.

Esempi

Accettare qualsiasi immagine

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

Accettare tipi MIME specifici

Usa un elenco separato da virgole per consentire solo determinati formati — qui PNG e JPEG, ma non GIF o WebP:

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

Accettare per estensione di file

Le estensioni sono utili per i formati il cui tipo MIME è prolisso o incoerente tra i sistemi, come i documenti di office:

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

Accettare file audio o video

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

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

Combinare tipi MIME con estensioni

Un unico elenco accept può contenere entrambe le forme contemporaneamente. Questo è utile quando un carattere jolly è troppo ampio ma alcuni tipi di file sono più facili da esprimere come estensione:

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

Utilizzo con multiple e la codifica del form

accept viene quasi sempre usato insieme ad altre due funzionalità degli input file:

• L'attributo multiple consente all'utente di selezionare più di un file alla volta dal selettore. Funziona allo stesso modo con accept: il filtro viene applicato a ogni file aggiunto dall'utente.
• enctype="multipart/form-data" è obbligatorio sull'elemento <form> affinché i file vengano effettivamente inviati. Una normale codifica del form trasmette solo il nome del file, non i suoi byte.

<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>

Per ulteriori informazioni sulla creazione di form di caricamento, consulta il tag HTML <form>, il tag HTML <input> e la guida ai form HTML.

Sicurezza: non fidarsi mai di accept

L'attributo accept non è un meccanismo di validazione. Affidarsi a esso per la sicurezza è pericoloso per due motivi:

• Falsificazione dell'estensione. Il nome di un file (e quindi la sua estensione) non dice nulla sul suo contenuto reale. Chiunque può rinominare malware.exe in photo.png. Il filtro accept esamina solo l'estensione e il tipo MIME dichiarato, entrambi controllabili dal client.
• Rilevamento del tipo MIME. Il tipo MIME che il browser riporta per un file caricato viene derivato dal nome del file o dal sistema operativo e può essere falsificato. Il server deve ispezionare i byte effettivi del file per sapere cosa contiene davvero.

Poiché l'utente può aggirare completamente il filtro del selettore, ogni caricamento deve essere validato sul server: verifica il tipo di file reale dal suo contenuto (non dal suo nome), applica un limite di dimensione, archivialo fuori dalla web root o in un percorso sicuro, e non eseguire mai i file caricati. Usa accept solo per migliorare l'esperienza dell'utente, mai come controllo di sicurezza.

Esercitazione