HTML hidden: valores enviados, alterações com JavaScript e limites de segurança

input type="hidden" inclui um nome e valor em um formulário sem exibir uma caixa de entrada. name é o nome do campo enviado e value é seu valor. Os usuários podem inspecionar ou alterar isso, então não use para proteger senhas, permissões, preços ou outras decisões sensíveis.

Quando você deve usar inputs ocultos?

Use-o para enviar o ID da postagem de destino com um formulário de edição, ou para levar condições de pesquisa para a próxima solicitação. Ele passa valores que o usuário não precisa digitar, enquanto o servidor continua sendo responsável por decidir se eles são válidos.

Receber um ID de postagem não concede permissão para editar essa postagem. O servidor deve identificar o usuário por meio da sessão autenticada e verificar o acesso à postagem. Não confie apenas nos detalhes da conta ou nas informações de IP do cliente porque o cliente os enviou em campos ocultos.

id pode localizar um elemento em um script, mas não substitui seu nome enviado. Uma entrada oculta sem nome não é incluída como uma entrada nome/valor no envio comum do formulário. Mesmo com required, entradas ocultas não participam da validação de restrição do navegador.

Verifique se os valores invisíveis são enviados

Salve este código completo como hidden.html e abra-o em um navegador. Nenhum servidor é necessário. A submissão exibe os nomes/valores construídos com FormData em vez de fazer uma requisição de rede.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Conferir valores ocultos</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>Escolher cores</h1>
  <form id="demo">
    <label><input type="checkbox" name="color" value="blue" checked> Azul</label>
    <label><input type="checkbox" name="color" value="red"> Vermelho</label>
    <input type="hidden" id="size" name="size" value="big">
    <input type="hidden" name="excluded" value="not-sent" disabled>
    <button type="submit">Mostrar valores enviados</button>
    <button type="button" id="change">Alterar o valor oculto para small</button>
    <button type="button" id="restore">Restaurar o valor oculto para big</button>
  </form>
  <p id="status" aria-live="polite">O valor oculto inicial é 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 = `Valor oculto atual: ${value}. Mostre novamente os valores enviados.`;
    }
    document.querySelector('#change').addEventListener('click', () => setSize('small'));
    document.querySelector('#restore').addEventListener('click', () => setSize('big'));
  </script>
</body>
</html>

1. Submeta inicialmente: color=blue e size=big aparecem. Não há caixa de tamanho visível, mas seu valor é incluído. excluded é omitido porque está desabilitado.
2. Selecione Vermelho e submeta novamente para obter azul e vermelho sob o nome de cor repetido. Limpe ambos os checkboxes e apenas o tamanho permanece.
3. Pressione o botão que altera o valor oculto para small e submeta novamente: size=small aparece. Valores ocultos também podem ser alterados através do JavaScript.
4. Restaure big com o botão correspondente e envie novamente. O botão de alteração serve para observar o exemplo, não sendo necessário em todo serviço real.

Envie o formulário para um servidor real

Para um serviço real, defina a action para uma rota de processamento existente e escolha um método suportado como method="post". O manipulador de envio do exemplo bloqueia solicitações; remova-o ou substitua-o por código de solicitação ao servidor para enviar dados. Os recursos de processamento de formulário do servidor recebem campos ocultos como campos de texto comuns.

Ao receber várias caixas de seleção com o mesmo nome, verifique as regras de array e valores múltiplos do framework do servidor. Alguns analisadores leem apenas o último valor repetido. A saída do JavaScript preserva nomes repetidos para que você possa observar a diferença.

Não confunda ocultar com segurança

Valores ocultos são visíveis no código-fonte HTML, nas ferramentas de desenvolvedor e em requisições de rede. HTTPS não oculta o valor do usuário que o envia. Ao receber um ID de produto, consulte o produto e o preço no servidor e valide os valores de tamanho permitidos com base nas informações confiáveis do servidor.

Um campo oculto pode carregar um token CSRF (Cross-Site Request Forgery). A proteção vem da emissão e validação correta do token no lado do servidor. Colocar uma string fixa arbitrária em um input oculto não previne, por si só, requisições forjadas.

A referência ao input oculto MDN explica seu comportamento e exclusão da validação.