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 ?
Avant de parler des différents moyens, mesures et techniques pour sécuriser un input html, prenons d’abord le temps de comprendre ce qu’est un input HTML.
Appelé aussi élément d’entrée, il s’agit d’un composant fondamental des formulaires web qui permet aux utilisateurs de saisir et de soumettre des informations. Ces éléments sont définis par la balise <input> et possèdent divers attributs qui déterminent leur type, leur comportement et leur apparence.
Les inputs HTML jouent un rôle important dans l’interaction entre les utilisateurs et les sites web. Ils permettent de collecter des données variées, telles que des noms, des adresses e-mail, des mots de passe, des numéros de téléphone, des fichiers, etc.
Ces données sont ensuite traitées par le serveur web pour alimenter les fonctionnalités du site, effectuer des inscriptions, traiter des paiements ou encore personnaliser l’expérience utilisateur.
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 :
1. Input type texte
Fonction : Permet la saisie de texte libre par l’utilisateur.
<input type="text" name="nom" placeholder="Entrez votre nom">
2. Input type Password
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">
3. Input type Email
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">
4. Input type Number
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">
5. Input type Tel
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">
6. Input type Checkbox
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
7. Input type Radio
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
8. Input type File
Fonction : Permet la sélection d’un ou plusieurs fichiers à télécharger.
<input type="file" name="fichier" multiple> Sélectionner un fichier
9. Input type Submit
Fonction : Permet de soumettre le formulaire une fois rempli.
<input type="submit" value="Envoyer">
10. Input type Range
Fonction : Permet la sélection d’une valeur sur une plage définie.
<input type="range" name="volume" min="0" max="100">
11. Input type Date
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">
12. Input type Datetime-local
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">
13. Input type Time
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">
14. Input type Week
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">
15. Input type Month
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">
16. Input type Color
Fonction : Permet la sélection d’une couleur à l’aide d’un sélecteur de couleurs.
<input type="color" name="couleur_fond" value="#000000">
17. Input type Search
Fonction : Permet la saisie d’un terme de recherche avec validation du format.
<input type="search" name="recherche" placeholder="Recherchez un produit">
18. Input type URL
Fonction : Permet la saisie d’une adresse URL avec validation du format.
<input type="url" name="site_web" placeholder="Entrez votre site web">
19. Input type Hidden
Fonction : Permet de stocker des données cachées non visibles par l’utilisateur.
<input type="hidden" name="id_utilisateur" value="123">
20. Input type Button
Fonction : Permet de déclencher une action JavaScript ou de soumettre le formulaire.
<input type="button" value="Cliquez ici">
21. Input type Image
Fonction : Permet de soumettre le formulaire en cliquant sur une image.
<input type="image" src="image.png" alt="Soumettre">
22. Input type Reset
Fonction : Permet de réinitialiser le formulaire et de ramener les champs à leurs valeurs par défaut.
<input type="reset" value="Réinitialiser">
Comment les pirates hackent les champs de saisie html (input) ?
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'
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.
📢 Lire aussi : Comment localiser une adresse IP avec python ?
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 :
1. Échapper les caractères
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.
2. Valider les données côté client
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>
3. Valider et nettoyer les données côté serveur
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 ...
?>
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 !
4. Utiliser les attributs “maxlength” et “minlength”
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.
5. Utiliser des jetons CSRF
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));
}
$
6. Utiliser HTTPS et installer un certificat SSL
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.
7. Implémenter des CSP pour réduire les risques de XSS
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.
8. Utiliser l’attribut « autocomplete »
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
En suivant les bonnes pratiques, notamment de validation et d’échappement, présentées dans ce guide, vous avez acquis les clés pour sécuriser efficacement les inputs HTML de votre site web. Vous avez ainsi dressé une barrière solide contre les intrusions malveillantes et protégé les données sensibles de vos utilisateurs.
N’oubliez pas que la sécurisation des inputs HTML ne s’arrête pas là. Pour une protection complète, il est crucial de mettre en place des mesures de sécurité supplémentaires, telles que :
- 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.