methodes securiser input html
|

Comment sécuriser un input html pour protéger les données ?

Une balise input en HTML sert à créer un champ interactif dans un formulaire web, ce dernier étant quasiment omniprésent sur le web, permettant aux utilisateurs de saisir des données et d’interagir avec les sites web. Sans formulaire, vous ne pouvez tout simplement pas établir une communication interactive avec vos visiteurs et encore moins collecter des informations précieuses ou de générer des leads qualifiés.

Toutefois, si les formulaires sont indispensables, ils représentent également des points d’entrée vulnérables pour les attaques si les données saisies ne sont pas correctement sécurisées. Pour éviter cela, vous devez sécuriser votre input html ! Comment ça marche ? Nous vous invitons à le découvrir dans cet article !

Un input HTML, c’est quoi ?

input html formulaire

Les différents types d’input HTML

Il existe une large variété d’inputs HTML, chacun avec sa propre fonction et son utilisation spécifique. Et aucun d’eux n’est intrinsèquement sécurisé par défaut.

Voici quelques exemples courants d’inputs HTML :

Fonction : Permet la saisie de texte libre par l’utilisateur.

<input type="text" name="nom" placeholder="Entrez votre nom">

Fonction : Permet la saisie d’un mot de passe masqué par des points ou autres caractères pour des raisons de sécurité.

<input type="password" name="motdepasse" placeholder="Entrez votre mot de passe">

Fonction : offre la possibilité de saisir une adresse e-mail avec validation du format.

<input type="email" name="email" placeholder="Entrez votre adresse e-mail">

Fonction : Permet la saisie d’un nombre entier ou décimal avec validation du format numérique.

<input type="number" name="prix" placeholder="Entrez le prix">

Fonction : Permet la saisie d’un numéro de téléphone avec validation du format.

<input type="tel" name="telephone" placeholder="Entrez votre numéro de téléphone">

Fonction : Permet la sélection de plusieurs options parmi un ensemble de choix.

<input type="checkbox" name="choix1" value="option1"> Option 1<br>
<input type="checkbox" name="choix2" value="option2"> Option 2
types input html

Fonction : Permet la sélection d’une seule option parmi un ensemble de choix.

<input type="radio" name="choix" value="option1" checked> Option 1<br>
<input type="radio" name="choix" value="option2"> Option 2

Fonction : Permet la sélection d’un ou plusieurs fichiers à télécharger.

<input type="file" name="fichier" multiple> Sélectionner un fichier

Fonction : Permet de soumettre le formulaire une fois rempli.

<input type="submit" value="Envoyer">

Fonction : Permet la sélection d’une valeur sur une plage définie.

<input type="range" name="volume" min="0" max="100">

Fonction : Permet la sélection d’une date au format YYYY-MM-DD.

<input type="date" name="date_naissance" placeholder="Entrez votre date de naissance">

Fonction : Permet la sélection d’une date et d’une heure au format YYYY-MM-DDTHH:MM:SS.

<input type="datetime-local" name="rendez_vous" placeholder="Choisissez une date et une heure">
codeur html
langage html

Fonction : Permet la sélection d’une heure au format HH:MM:SS.

<input type="time" name="heure_arrivee" placeholder="Entrez votre heure d'arrivée">

Fonction : Permet la sélection d’une semaine complète au format YYYY-W##.

<input type="week" name="semaine_conges" placeholder="Sélectionnez votre semaine de congés">

Fonction : Permet la sélection d’un mois au format YYYY-MM.

<input type="month" name="mois_facture" placeholder="Choisissez le mois de la facture">

Fonction : Permet la sélection d’une couleur à l’aide d’un sélecteur de couleurs.

<input type="color" name="couleur_fond" value="#000000">

Fonction : Permet la saisie d’un terme de recherche avec validation du format.

<input type="search" name="recherche" placeholder="Recherchez un produit">

Fonction : Permet la saisie d’une adresse URL avec validation du format.

<input type="url" name="site_web" placeholder="Entrez votre site web">

Fonction : Permet de stocker des données cachées non visibles par l’utilisateur.

<input type="hidden" name="id_utilisateur" value="123">

Fonction : Permet de déclencher une action JavaScript ou de soumettre le formulaire.

<input type="button" value="Cliquez ici">

Fonction : Permet de soumettre le formulaire en cliquant sur une image.

<input type="image" src="image.png" alt="Soumettre">

Fonction : Permet de réinitialiser le formulaire et de ramener les champs à leurs valeurs par défaut.

<input type="reset" value="Réinitialiser">

Les pirates arrivent à bout des champs de saisie HTML (input) en profitant des failles de sécurité des formulaires web. Pour cela, ils utilisent divers techniques comme Injection SQL, l’injection de code JavaScript malveillant, la falsification de requêtes intersites (CSRF) et bien d’autres encore.

Supposons que le hacker utilise l’injection SQL pour hacker le champs de saisie et  voici le scénario :

Votre site web a un formulaire de connexion simple avec deux champs : nom d’utilisateur et mot de passe. Le formulaire soumet les données à un script PHP qui exécute une requête SQL pour vérifier si les informations d’identification sont correctes.

Un pirate saisit le nom d’utilisateur « ‘ OR 1=1; — » et un mot de passe quelconque dans le formulaire. La requête SQL générée ressemble à ceci :

SELECT * FROM users WHERE username = '' OR 1=1; --' AND password = 'mot_de_passe'
hacker htlml input

Le code SQL malveillant « ‘ OR 1=1; — » force la connexion de l’utilisateur, car la condition « 1=1 » est toujours vraie. Le pirate peut ensuite accéder à tous les comptes du site web.

Vous l’aurez compris, la menace est bien réelle. Toutefois, si vous sécurisez votre input html, votre champ de saisie html restera imprenable à tout type d’attaque.

Comment sécuriser un input HTML pour protéger les données ?

Voici quelques techniques et bonnes pratiques à adopter si vous voulez sécuriser vos inputs HTML :

L’échappement des caractères est une technique qui consiste à convertir certains caractères en séquences de caractères spéciaux afin d’éviter qu’ils ne soient interprétés comme du code par l’analyseur HTML ou le moteur de script. Cela permet de protéger le champ html contre les attaques par injection de code malveillant.

Comment faire ? Il existe différentes manières d’échapper les caractères en HTML, selon le langage de programmation côté serveur que vous utilisez. Voici quelques exemples :

En PHP : utilisez la fonction htmlspecialchars()

En JavaScript : utilisez la fonction escape()

En Python : utilisez la fonction html.escape()

Exemple de code :

<p>Nom d'utilisateur : <?= htmlspecialchars($_POST['nom_utilisateur']) ?></p>

Ce code affiche le nom d’utilisateur saisi par l’utilisateur dans un paragraphe HTML tout en le sécurisant contre les attaques par injection de code.

 

La validation des données côté client consiste à utiliser des scripts JavaScript pour vérifier que les données saisies par l’utilisateur sont valides avant de les soumettre au serveur. Cela est nécessaire pour réduire la charge sur le serveur et d’améliorer l’expérience utilisateur en fournissant des messages d’erreur immédiats.

La validation des données côté client s’effectue à l’aide d’expressions régulières, d’attributs HTML5 et d’API JavaScript.

Voici un exemple de code html :

<input type="text" id="nom_utilisateur" required pattern="[A-Za-z0-9_]+">
<script>
  const nomUtilisateur = document.getElementById('nom_utilisateur');
  nomUtilisateur.addEventListener('input', function() {
	if (!nomUtilisateur.value.match(/^[A-Za-z0-9_]+$/)) {
  	alert('Le nom d\'utilisateur doit contenir uniquement des lettres, des chiffres et des underscores.');
	}
  });
</script>

Lire aussi : Solutions pour détecter un hack japanese keyword : outil et méthodes pertinents !

La validation et le nettoyage des données côté serveur consistent à utiliser le langage de programmation côté serveur pour vérifier et nettoyer davantage les données saisies par l’utilisateur avant de les traiter ou de les stocker. En faisant cela, vous vous assurez que les données sont sécurisées et conformes aux attentes de l’application.

La validation et le nettoyage des données côté serveur inclut notamment la vérification du format des données, la suppression des caractères dangereux, le filtrage des entrées incorrectes et la correction des erreurs courantes.

Exemple de code (PHP) :

<?php
$nomUtilisateur = filter_input(INPUT_POST, 'nom_utilisateur', FILTER_SANITIZE_STRING);
if (strlen($nomUtilisateur) < 3 || strlen($nomUtilisateur) > 20) {
  echo "Le nom d'utilisateur doit avoir une longueur comprise entre 3 et 20 caractères.";
  exit;
}
// ... traitement supplémentaire des données ...
?>

 

comment sécuriser input html

L’utilisation du filtre FILTER_SANITIZE_STRING permet de supprimer les caractères potentiellement dangereux du nom d’utilisateur, réduisant ainsi le risque d’injections de code ou d’autres attaques.

La vérification de la longueur du nom d’utilisateur empêche l’utilisation de noms trop courts ou trop longs, ce qui peut améliorer la sécurité et l’expérience utilisateur.

Et si le nom d’utilisateur ne respecte pas les critères de longueur, le script s’arrête immédiatement, empêchant le traitement ultérieur des données potentiellement compromises.

Lire aussi : Web scraping avec proxy et Beautiful Soup sous Python – le guide complet !

Les attributs maxlength et minlength servent à définir le nombre maximum et minimum de caractères autorisés dans un champ de saisie HTML.

Exemple de code :

<input type="text" name="nom_utilisateur" maxlength="20" minlength="3">

En limitant le nombre de caractères autorisés, vous empêchez tout tentative d’injection de code malveillant dans le formulaire ou sur le serveur. En limitant la longueur, on réduit ce risque.

 

Les jetons CSRF (Cross-Site Request Forgery) désignent des jetons générés par le serveur et inclus dans chaque requête HTTP. Ils permettent de s’assurer que la requête provient d’un utilisateur authentifié et non d’une attaque par injection de requête croisée.

Le serveur génère un jeton CSRF unique pour chaque utilisateur connecté. Ce jeton est ensuite inclus dans un champ caché dans le formulaire HTML. Lorsque l’utilisateur soumet le formulaire, le jeton CSRF est envoyé au serveur. Le serveur vérifie que le jeton est valide et correspond à l’utilisateur connecté. Si le jeton est invalide, la requête est rejetée.

Exemple de code (PHP) :

<?php
session_start();
if (!isset($_SESSION['csrf_token'])) {
  $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
$

HTTPS (Hypertext Transfer Protocol Secure) est un protocole de communication sécurisé qui utilise le chiffrement SSL/TLS pour protéger les données échangées entre un navigateur web et un serveur web. L’installation d’un certificat SSL sur votre serveur permet d’authentifier votre site web et de crypter les données, ce qui empêche les pirates d’intercepter et de lire les informations sensibles, telles que les mots de passe et les données de carte de crédit.

Lorsque vous visitez un site web HTTPS, votre navigateur établit une connexion sécurisée avec le serveur en utilisant le protocole SSL/TLS. Cette connexion chiffre toutes les données échangées, ce qui signifie que même si un pirate parvient à intercepter le trafic, il ne pourra pas lire les données.

Comment sécuriser un input html pour protéger les données ?

 

CSP (Content Security Policy) est une mesure de sécurité web offrant aux propriétaires de sites web la possibilité de définir une liste de sources autorisées pour le chargement de ressources telles que le JavaScript, les feuilles de style et les images. Vous réduisez ainsi le risque d’attaques par injection de script (XSS), qui peuvent être utilisées pour exécuter du code malveillant sur le site web d’un utilisateur.

Comment ça marche ? Une politique CSP est définie dans un en-tête HTTP Content-Security-Policy. Cette politique spécifie les sources autorisées pour chaque type de ressource. Par exemple, vous pouvez autoriser le chargement de JavaScript uniquement à partir de votre propre domaine et d’un CDN de confiance. Si un navigateur reçoit une demande de chargement d’une ressource à partir d’une source non autorisée, la ressource sera bloquée.

Exemple de code :

Content-Security-Policy: default-src 'self'; script-src 'self' https://trustedcdn.com; img-src 'self' data:

Ce code définit un en-tête de Content-Security-Policy (CSP) qui restreint les sources de chargement des ressources au sein de votre page web. Il ne sécurise pas directement les saisies des utilisateurs dans les formulaires HTML, mais il aide à atténuer certaines vulnérabilités pouvant être exploitées via des données soumises par l’utilisateur.

L’attribut autocomplete sert à contrôler les suggestions de saisie automatique fournies par le navigateur web pour les champs de saisie HTML.

Cet attribut peut prendre différentes valeurs, telles que on, off et name. La valeur on indique au navigateur de proposer des suggestions de saisie automatique pour le champ de saisie. La valeur off indique au navigateur de ne pas proposer de suggestions de saisie automatique pour le champ de saisie. La valeur name indique au navigateur de stocker les données saisies dans le champ de saisie pour une utilisation ultérieure dans d’autres champs de saisie portant le même nom.

 

Exemple de code HTML :

<input type="password" name="mot_de_passe" autocomplete="off">

autocomplete= »off » : Cet attribut contrôle si le navigateur doit suggérer automatiquement des entrées précédentes pour ce champ. Le paramètre « off » indique au navigateur de ne pas mémoriser et pré-remplir le champ du mot de passe, ce qui contribue à protéger la confidentialité du mot de passe de l’utilisateur.

Conclusion

  • L’utilisation du protocole HTTPS pour garantir le chiffrement des données lors de leur transmission.
  • La mise à jour régulière de votre CMS et de vos extensions afin de corriger les failles de sécurité identifiées.
  • L’implémentation d’un pare-feu web pour bloquer les tentatives d’intrusions.

La sensibilisation de vos utilisateurs aux bonnes pratiques de sécurité afin qu’ils adoptent des comportements responsables.

Auteur/autrice

  • Freddy Andrianasolo

    Je suis Freddy N, webmestre et développeur 👨‍💻  passionné par la création de sites web dynamiques et engageants. Depuis 2020, j'ai le plaisir de mettre mes compétences au service de l’agence web Qelios, où je contribue à la conception, au développement et à la maintenance des sites web de nos clients. Contactez moi si vous voulez nous proposer du contenu dans les thématiques suivantes : webmastering, developpement web...

    Voir toutes les publications

Publications similaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.