Javascript Girl
  1. Javascript Girl
  3. Le but original de <input type = "hidden">?
Intereting Posts
IE 11 – console.log affiche undefined pour les propriétés de l'objet Limiter la requête Ajax Cross Domain Envoyer une réponse à tous les clients sauf l'expéditeur Comment recadrer l'image côté client en utilisant jcrop et la télécharger? Application des coins arrondis aux chemins / polygones Le modèle compile toujours avec l'ancienne valeur de la portée dans la directive Définir une chaîne de style entier à un élément de javascript (pas de paramètres de style individuel) La boîte de dialogue de confirmation de Javascript sur href-link? Node.js comment améliorer les messages d'erreur pour les tests asynchrones à l'aide de moka JS Orientation Exif du côté client: faire pivoter et miroir des images JPEG Meteor Collection Transform: est-ce fait sur le serveur ou sur le client? Ou cela dépend Comment analyser de manière robuste un document pour toutes les rubriques et construire un <ul> arbre de ces rubriques Document.write en chargeant les scripts dynamiquement Mécanisez Javascript Angular2: Composant de clonage / élément HTML et sa fonctionnalité

Le but original de <input type = "hidden">?

Je suis curieux du but initial de la <input type="hidden"> .

De nos jours, il est souvent utilisé avec JavaScript pour stocker des variables qui sont envoyées au serveur et des choses comme ça.

  • HTML 2.0 a été publié en novembre 1995 , contenant déjà la spécification pour le type d'entrée = "caché"
  • JavaScript a été publié en mars 1996

Par conséquent, <input type="hidden"> existait avant JavaScript, alors quel était son but original? Je peux seulement imaginer d'envoyer une valeur du serveur au client qui est (inchangé) renvoyé pour maintenir un type d'état. Ou est-ce que je reçois quelque chose de mal dans l'histoire et <input type="hidden"> a toujours été supposé être utilisé avec JavaScript?

Si possible, veuillez également donner des références dans vos réponses.

Je peux seulement imaginer d'envoyer une valeur du serveur au client qui est (inchangé) renvoyé pour maintenir un type d'état.

Précisément. En fait, il est toujours utilisé à cette fin aujourd'hui car HTTP tel que nous le connaissons aujourd'hui est encore, au moins fondamentalement, un protocole sans état.

Ce cas d'utilisation a d'abord été décrit en HTML 3.2 (je suis surpris que HTML 2.0 n'ait pas inclus une telle description):

type=hidden
Ces champs ne doivent pas être rendus et fournir un moyen pour les serveurs de stocker des informations d'état avec un formulaire. Cela sera transmis au serveur lorsque le formulaire sera soumis, en utilisant la paire nom / valeur définie par les attributs correspondants. Il s'agit d'un travail pour l'apatridie de HTTP. Une autre approche est d'utiliser HTTP "Cookies". 

 <input type=hidden name=customerid value="c2415-345-8563">

Bien qu'il vaut la peine de mentionner que HTML 3.2 est devenu une recommandation du W3C seulement après la version initiale de JavaScript, il est sûr de supposer que les champs cachés ont presque toujours servi dans le même but.

Je vais fournir un exemple de serveur réel de serveur unique ici, disons si les enregistrements sont en boucle et chaque enregistrement a un formulaire avec un bouton de suppression et vous devez supprimer un enregistrement spécifique, alors voici le champ hidden en action, sinon vous avez gagné Pour obtenir la référence du dossier à supprimer dans ce cas, il sera id

Par exemple 

 <?php if(isset($_POST['delete_action'])) { mysqli_query($connection, "DELETE FROM table_name WHERE record_id = ".$_POST['row_to_be_deleted']); //Here is where hidden field value is used } while(condition) { ?> <span><?php echo 'Looped Record Name'; ?> <form method="post"> <input type="hidden" name="row_to_be_deleted" value="<?php echo $record_id; ?>" /> <input type="submit" name="delete_action" /> </form> <?php } ?>

En bref, l'objectif initial était de créer un champ qui sera soumis avec le formulaire de soumission. Parfois, il était nécessaire de stocker des informations dans un champ caché (par exemple, un identifiant d'utilisateur) et de le soumettre avec le formulaire de soumission.

From HTML 22 septembre 1995 spécification

Un élément INPUT avec `TYPE = HIDDEN 'représente un champ caché. L'utilisateur n'interagit pas avec ce champ; À la place, l'attribut VALUE spécifie la valeur du champ. Les attributs NAME et VALUE sont requis.

Les valeurs des éléments de formulaire incluant type = 'hidden' sont soumises au serveur lorsque le formulaire est affiché. Type d'entrée = les valeurs "cachées" ne sont pas visibles dans la page. Le maintien d'identifiants utilisateur dans des champs cachés, par exemple, est l'une des nombreuses utilisations.

SO utilise un champ caché pour le clic upvote. 

 <input value="16293741" name="postId" type="hidden">

En utilisant cette valeur, le script côté serveur peut stocker le upvote.

Essentiellement les champs cachés seront plus utiles et des avantages à utiliser avec une forme multi-étapes. Nous pouvons utiliser des champs cachés pour transmettre une étape d'information à l'étape suivante en utilisant caché et continuer à transmettre jusqu'à la fin de l'étape.

  1. Fichiers CSRF.

La falsification de la demande entre sites ( http: //en.wikipedia.org/wiki/Cro … ) est une vulnérabilité de site Web très courante. L'exigence d'un secret, un jeton spécifique à l'utilisateur dans toutes les soumissions de formulaire empêchera les attaques CSRF puisque les sites d'attaque ne peuvent pas deviner quel est le jeton approprié et toutes les soumissions de formulaires qu'ils effectuent au nom de l'utilisateur échoueront toujours.

  1. Enregistrer l'état dans les formulaires multi-page.

Si vous devez stocker quelle étape dans un formulaire multi-page, l'utilisateur est actuellement activé, utilisez des champs de saisie cachés. L'utilisateur n'a pas besoin de voir cette information, alors cachez-le dans un champ de saisie caché.

Règle générale: utilisez le champ pour stocker tout ce que l'utilisateur n'a pas besoin de voir, mais que vous souhaitez envoyer au serveur lors de la soumission du formulaire.