HTML hidden: valori inviati, modifiche JavaScript e limiti di sicurezza

input type="hidden" include un nome e un valore in un modulo senza mostrare una casella di input. name è il nome del campo inviato e value è il suo valore. Gli utenti possono ispezionarlo o modificarlo, quindi non usarlo per proteggere password, permessi, prezzi o altre decisioni sensibili.

Quando dovresti usare gli input nascosti?

Usalo per inviare l'ID del post di destinazione con un modulo di modifica, oppure per trasportare le condizioni di ricerca nella richiesta successiva. Passa valori che l'utente non deve digitare, mentre il server rimane responsabile di decidere se sono validi.

Ricevere un ID di post non concede il permesso di modificare quel post. Il server deve identificare l'utente tramite la sessione autenticata e controllare l'accesso al post. Non fidarti dei dettagli dell'account o delle informazioni sull'IP del client solo perché il client le ha inviate in campi nascosti.

id può individuare un elemento in uno script ma non sostituisce il suo nome inviato. Un input nascosto senza nome non è incluso come entry nome/valore nell'invio ordinario del modulo. Anche con required, gli input nascosti non partecipano alla validazione dei vincoli del browser.

Verifica che i valori invisibili vengano inviati

Salva questo codice completo come hidden.html e aprilo in un browser. Non è necessario alcun server. L’invio mostra le voci nome/valore costruite con FormData invece di effettuare una richiesta di rete.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Controllare i valori nascosti</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin: 12px 0; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Scegli i colori</h1>
  <form id="demo">
    <label><input type="checkbox" name="color" value="blue" checked> Blu</label>
    <label><input type="checkbox" name="color" value="red"> Rosso</label>
    <input type="hidden" id="size" name="size" value="big">
    <input type="hidden" name="excluded" value="not-sent" disabled>
    <button type="submit">Mostra valori inviati</button>
    <button type="button" id="change">Cambia il valore nascosto in small</button>
    <button type="button" id="restore">Ripristina il valore nascosto a big</button>
  </form>
  <p id="status" aria-live="polite">Il valore nascosto iniziale è big.</p>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const size = document.querySelector('#size');
    const result = document.querySelector('#result');
    const status = document.querySelector('#status');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    function setSize(value) {
      size.value = value;
      status.textContent = `Valore nascosto attuale: ${value}. Mostra nuovamente i valori inviati.`;
    }
    document.querySelector('#change').addEventListener('click', () => setSize('small'));
    document.querySelector('#restore').addEventListener('click', () => setSize('big'));
  </script>
</body>
</html>

1. Invia inizialmente: color=blue e size=big appaiono. Non c'è una casella di dimensioni visibile, ma il suo valore è incluso. excluded è omesso perché è disabilitato.
2. Seleziona Rosso e invia di nuovo per ottenere blu e rosso sotto lo stesso nome colore ripetuto. Deseleziona entrambe le caselle e rimane solo la dimensione.
3. Premi il pulsante che cambia il valore nascosto in small e invia di nuovo: size=small appare. I valori nascosti possono essere cambiati anche tramite JavaScript.
4. Ripristina big con il pulsante apposito e invia di nuovo. Il pulsante di modifica serve a osservare l’esempio e non è necessario in ogni servizio reale.

Invia il modulo a un server reale

Per un servizio reale, imposta l'action a una rotta di elaborazione esistente e scegli un metodo supportato come method="post". Il gestore di invio dell'esempio blocca le richieste; rimuovilo o sostituiscilo con codice di richiesta al server per inviare i dati. Le funzionalità di elaborazione del modulo del server ricevono campi nascosti come normali campi di testo.

Quando si ricevono diversi checkbox con lo stesso nome, verifica le regole dell’array e dei valori multipli nel framework del server. Alcuni parser leggono solo l'ultimo valore ripetuto. Il risultato JavaScript preserva i nomi ripetuti in modo da poter osservare la differenza.

Non confondere nascondere con sicurezza

I valori nascosti sono visibili nel codice sorgente HTML, negli strumenti per sviluppatori e nelle richieste di rete. HTTPS non nasconde il valore dall'utente che lo invia. Quando si riceve un ID prodotto, cerca il prodotto e il prezzo sul server e convalida i valori di misura consentiti rispetto alle informazioni attendibili del server.

Un campo nascosto può contenere un token CSRF (Cross-Site Request Forgery). La protezione deriva dalla corretta emissione e convalida del token lato server. Inserire una stringa fissa arbitraria in un input nascosto di per sé non previene richieste contraffatte.

Il riferimento dell'input nascosto MDN spiega il suo comportamento e l'esclusione dalla convalida.