info2gestion

Les formulaires html ou web proposent le plus souvent d'envoyer et de recevoir des données d'un serveur de base de données.

L'exemple ci-dessous est une implémentation d'un formulaire web html avec une gestion statique de la saisie avec javascript.

Exemple d'un formulaire

Les éléments web html ci-dessous peuvent être personnalisés avec des librairies externes (bootstrap...).

Pour cet exemple, les éléments html peuvent être gérées avec javascript. Ci dessous, les principales instructions qui permettent d'accéder aux valeurs des éléments html d'un formulaire web en javascript.


<script>
function lecture_chps_formulaire() {

  /* champ Saisie utilisateur */
  const frm_utilisateur = document.getElementById("saisie_txt_id01").value;
  
  /* champ Saisie email */
  const frm_email = document.getElementById("saisie_mail02");
  
  const emailRegExp = /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/;// 1
  const isValid = frm_email.value.length === 0 || 
 emailRegExp.test(frm_email.value);
  if (!isValid){
    frm_email.value = "saisie email invalide";
  }
  
  /* champ Saisie mot de passe */
  const frm_mdp = document.getElementById("saisie_mdp_id03");
  const shaObj = new jsSHA("SHA-256", "TEXT", { encoding: "UTF8" }); // 2
  shaObj.update(frm_mdp.value);
  const hash = shaObj.getHash("HEX");
  //console.log(hash);
  
  /* champ sélection incrémenter/décrémenter nombre 4-20 */
  const frm_nb = document.getElementById("saisie_nb").value;
  
  /* champ sélection unique */
  const frm_btn_radio = AfficherValeurBtnRadio(); // 3
  
  /* champ sélection multiple */
  const frm_btn_cbox = AfficherValeursCheckBoxes(); // 4
  
  /* champ sélection date */
  const frm_date1 = document.getElementById("chp_date_01").value;
  
  /* champ sélection date et heure */
  const frm_date2 = document.getElementById("chp_date_hr_02").value;
  var splitarray = new Array(); // 5
  splitarray= frm_date2.split("T");
  const frm_date2d = splitarray[0];
  const frm_date2t = splitarray[1];
  
  /* champ sélection liste menu déroulant */
  const frm_listd = document.getElementById("chp_ddown01"); // 6
  const frm_listder = frm_listd.options[frm_listd.selectedIndex].text;
  
  /* champ saisie ou valeurs présaisies */
  const frm_presaisie = document.getElementById("chp_saisie_datalist").value;
  
  /* champ saisie sur plusieurs lignes */
  const frm_saisiemlig = document.getElementById("saisie_mlignes").value;
  
}
</script>

1 Validation de la saisie d'une adresse email. Validation simplifiée qui teste la validité de la saisie avec la présence d'un @ (ne devrait pas être utilisé en production).

^ - Début de la chaîne de caractères

[a-z0-9]+ - Lettres entre a et z et 0 et 9 au début de la chaîne de caractère

@ - La chaîne de caractères doit contenir un ‘@’

[a-z]+ - Au moins un caractère entre a et z après ‘@’

\. - doit contenir un point avec des caractères précédant et suivant ‘@’

[a-z]{2,3}$ - doit contenir un ou plusieurs caractères à la fin de la chaîne de caractères. $ représente la fin de la chaîne de caractères.

2 Saisie d'un mot de passe. Utilisation d'une librairie de cryptographie. Sur un serveur non sécurisé avec un certificat SSL, les données sont transférées en clair. Si la connection est interceptée, c'est une vulnérabilité possible s'agissant de données confidentielles.

Des sécurités supplémentaires peuvent s'ajouter au niveau du serveur par exemple avec php et le moteur de base de données sql. Il faudra utiliser la même librairie que celle utilisée par le navigateur pour comparer le mot de passe crypté avec le mot de passe de l'utilisateur et utiliser une librairie de cryptage php pour ne pas stocker le mot de passe en clair dans la base de données.

Cette librairie de cryptographie se retrouve sur github https://github.com/Caligatio/jsSHA. Mes connaissances ne sont pas suffisantes pour qualifier cette librairie en termes de sécurité. A ce jour, les commentaires de la page github ne montrent pas de critiques négatives ou de réserves sur l'utilisation de cette librairie. Des alternatives existent.

Cette technique ne s'applique que pour la partie de la connexion entre le forumulaire web et le serveur. Actuellement un certificat de sécurité SSL est la manière la plus simple et la plus souvent employée pour sécuriser l'envoi des données d'un formulaire web.

L'utilisation d'un VPN peut être considérée comme une mesure de sécurité. Combiner des mesures de sécurité de différents niveaux permet d'éviter des failles de sécurité. Les données personnelles, adresse email, mots de passe, bancaires... sont des données sensibles.

3 Exemple d'une fonction qui extrait la valeur des sélections uniques sur les boutons radio.


function AfficherValeurBtnRadio(){
  const ele = document.getElementsByName('brad01');
  for (let i = 0; i < ele.length; i++) {
    if (ele[i].checked) return ele[i].value;
  }
}

4 Exemple d'une fonction qui extrait les valeurs des sélections multiples sur les cases à côcher.


function AfficherValeursCheckBoxes(){
  var cboxes = '';
  const checkboxes = document.getElementsByName('cbox01');

  for (let i = 0; i < checkboxes.length; i++) {
    if (i < checkboxes.length-1) {
       if (checkboxes[i].checked) {
          cboxes += checkboxes[i].value + ',';
       }
    } else if (i = checkboxes.length-1) {
      cboxes += checkboxes[i].value
    }
  } // for

  return cboxes;
} // function AfficherValeursCheckBoxes



5 Lecture de la saisie date et heure. Cette saisie est séparée en deux (date et heure) pour simplifier une éventuelle requête en base de données.

6 Lecture de la sélection de la liste déroulante. Il faut passer par une instruction intermédiaire pour lire la valeur sélectionnée de ce contrôle.






Ces instructions sont une manière parmi d'autre d'accéder aux valeurs saisies ou sélectionnées d'un formulaire web.