Une balise input en HTML est utilisée pour créer un champ interactif dans un formulaire web, où les utilisateurs peuvent entrer des données. L’utilisation et la sécurisation des input html (entrées HTML) sont cruciales pour développer des applications web sécurisées.
Les informations entrées peuvent être des noms, des adresses email, des choix parmi des options, et bien d’autres.
Types d’input
L’élément <input> est très polyvalent grâce à son attribut type, qui peut prendre diverses valeurs pour créer différents types de champs :
- text : Pour du texte simple.
- password : Pour un champ de mot de passe où les caractères sont masqués.
- checkbox : Pour une case à cocher.
- radio : Pour des boutons radio permettant de sélectionner une option parmi plusieurs.
- email : Pour des adresses email, avec validation intégrée.
- date, time : Pour la saisie de dates et d’heures.
- Et bien d’autres (number, file, hidden, etc.).
Interaction utilisateur
Les champs <input> permettent aux utilisateurs d’interagir avec le site, par exemple en remplissant des formulaires d’inscription, en saisissant des critères de recherche, ou en configurant des options.
Intégration avec d’autres technologies
Les données recueillies via des éléments <input> peuvent être traitées et stockées avec des technologies côté serveur comme PHP, Python, Java, ou des bases de données, ou utilisées côté client avec JavaScript pour des réponses interactives immédiates.
Validation et contrôle
Les champs <input> peuvent être configurés pour accepter uniquement certaines formes de données, utilisant des attributs comme pattern pour les expressions régulières, ou required pour rendre un champ obligatoire, aidant ainsi à la validation des données côté client avant leur envoi au serveur.
En résumé, l’élément <input> est essentiel pour la création de formulaires interactifs sur le web, permettant aux utilisateurs de soumettre des informations qui peuvent ensuite être traitées par des applications web.
Sécuriser les input html
Pour sécuriser les entrées des formulaires HTML, quel que soit le type d’input, il est crucial de mettre en œuvre des mesures de sécurité à la fois côté client et côté serveur. Voici des recommandations détaillées pour chaque aspect de la sécurité des données entrantes :
Validation côté client
Validation HTML5 :
Utilisez les attributs de validation intégrés d’HTML5 tels que required, min, max, maxlength, pattern et type pour contrôler les entrées en fonction de leur type (comme email, number, etc.). Ces validations aident à empêcher les entrées incorrectes ou malformatées dès l’interface utilisateur.
<form action="/submit-form" method="post">
<!-- Champ de texte requis -->
<input type="text" name="username" required placeholder="Votre nom d'utilisateur" minlength="3" maxlength="20">
<!-- Adresse email avec validation de format -->
<input type="email" name="email" required placeholder="Votre email">
<!-- Nombre avec valeurs min et max -->
<input type="number" name="age" min="18" max="99" required placeholder="Votre âge">
<!-- Mot de passe avec pattern pour exiger des lettres et des chiffres -->
<input type="password" name="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Doit contenir au moins 8 caractères, dont une majuscule, une minuscule, et un chiffre">
<!-- Soumission du formulaire -->
<button type="submit">Envoyer</button>
</form>JavaScript :
Implémentez des scripts JavaScript pour des validations plus complexes qui ne peuvent pas être couvertes par les attributs HTML5 seuls. Cela peut inclure des vérifications de cohérence, des calculs en temps réel, ou des validations croisées entre différents champs de formulaire.
Exemple de formulaire sécurisé avec du javascript :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Validation de Formulaire en JavaScript</title>
<script>
function validateForm() {
var username = document.forms["myForm"]["username"].value;
var email = document.forms["myForm"]["email"].value;
var password = document.forms["myForm"]["password"].value;
var age = document.forms["myForm"]["age"].value;
// Validation du nom d'utilisateur
if(username.length < 3 || username.length > 20) {
alert("Le nom d'utilisateur doit contenir entre 3 et 20 caractères.");
return false;
}
// Validation de l'email
var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
alert("L'adresse email n'est pas valide.");
return false;
}
// Validation du mot de passe
var passwordPattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
if (!passwordPattern.test(password)) {
alert("Le mot de passe doit contenir au moins 8 caractères, dont une majuscule, une minuscule, et un chiffre.");
return false;
}
// Validation de l'âge
if (isNaN(age) || age < 18 || age > 99) {
alert("L'âge doit être un nombre entre 18 et 99 ans.");
return false;
}
return true; // Les validations sont passées
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()" method="post">
Nom d'utilisateur: <input type="text" name="username" required><br>
Email: <input type="email" name="email" required><br>
Mot de passe: <input type="password" name="password" required><br>
Âge: <input type="number" name="age" required><br>
<input type="submit" value="Soumettre">
</form>
</body>
</html>
Sécurisation Côté Serveur
- Validation des Entrées : Ne faites jamais confiance aux données du client. Révalidez toutes les entrées côté serveur pour vérifier qu’elles respectent les critères attendus (type de données, format, longueur, etc.). Utilisez des expressions régulières et des fonctions de validation spécifiques à votre langage de programmation.
- Nettoyage des Entrées : Échappez toutes les entrées pour prévenir les injections SQL et les attaques XSS. Pour les injections SQL, utilisez des requêtes préparées ou des ORM qui échappent automatiquement les entrées. Pour le XSS, échappez les caractères spéciaux dans les entrées qui seront réaffichées sur la page web (comme avec
htmlspecialcharsen PHP). - Utilisation de HTTPS : Assurez-vous que toutes les données sensibles envoyées entre le client et le serveur le sont via HTTPS pour prévenir l’interception par des parties non autorisées.
Exemple de sécurisation :
<?php
// Validation des données
$username = filter_input(INPUT_POST, 'username', FILTER_SANITIZE_STRING);
$email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
$age = filter_input(INPUT_POST, 'age', FILTER_VALIDATE_INT, [
'options' => ['min_range' => 18, 'max_range' => 99]
]);
$password = $_POST['password']; // À hacher avant stockage, pas à afficher ou échapper pour DB ici
if (!$email) {
die('Adresse email invalide.');
}
// Exemple de hachage de mot de passe
$hashed_password = password_hash($password, PASSWORD_DEFAULT);
// Enregistrement dans une base de données (exemple fictif)
// $stmt = $db->prepare("INSERT INTO users (username, email, age, password) VALUES (?, ?, ?, ?)");
// $stmt->bind_param("ssis", $username, $email, $age, $hashed_password);
// $stmt->execute();
?>
Mesures Générales de Sécurité
Politiques de Sécurité de Contenu (CSP) :
Implémentez des CSP pour réduire les risques de XSS en spécifiant les sources de scripts autorisées. Cela aide à contrôler les ressources que votre page peut charger et exécuter.
Exemple d’en-tête CSP :
Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.example.com; img-src 'self' https://images.example.com; style-src 'self' 'unsafe-inline';
Tokens Anti-CSRF
Protégez vos formulaires contre les attaques de type Cross-Site Request Forgery (CSRF) en ajoutant un token unique à chaque session de formulaire. Ce token doit être vérifié à chaque soumission du formulaire pour s’assurer qu’il n’a pas été initié par un tiers.
Exemple Anti-CSRF :
<?php
// Générer un token CSRF
session_start();
if (empty($_SESSION['csrf_token'])) {
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
?>
<form action="/submit-form" method="post">
<!-- Champ caché pour le token CSRF -->
<input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']; ?>">
<!-- Autres champs de formulaire ici -->
<input type="text" name="details" required placeholder="Plus d'infos">
<button type="submit">Envoyer</button>
</form>
<?php
// Vérifier le token CSRF lors de la réception des données du formulaire
if ($_POST) {
if (!hash_equals($_SESSION['csrf_token'], $_POST['csrf_token'])) {
die('Erreur de validation CSRF.');
}
// Traiter les données sécurisées ici
}
?>
Contrôle d’accès et authentification : Assurez-vous que seuls les utilisateurs autorisés peuvent accéder aux fonctions critiques et soumettre des données sensibles. Mettez en place une authentification forte et vérifiez les droits d’accès avant de traiter les entrées des utilisateurs.
Stockage sécurisé des données : Pour les informations sensibles comme les mots de passe, utilisez des techniques de hachage robustes (telles que bcrypt, Argon2) avant de les stocker en base de données. Ne stockez jamais de mots de passe ou d’informations sensibles en clair.
Surveillance et logs : Mettez en place une surveillance de l’intégrité des données et des logs détaillés des accès et modifications pour détecter et réagir rapidement à toute activité suspecte.
En suivant ces pratiques, vous pouvez améliorer la sécurité de votre application web, minimiser les vulnérabilités et protéger les données des utilisateurs contre les exploitations malveillantes.
Pour finir, voici un exemple de formulaire avec des input html sécurisés :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Formulaire Sécurisé</title>
<script>
// Validation JavaScript simple pour le formulaire
function validateForm() {
var username = document.forms["secureForm"]["username"].value;
var email = document.forms["secureForm"]["email"].value;
var password = document.forms["secureForm"]["password"].value;
if(username.length < 3 || username.length > 20) {
alert("Le nom d'utilisateur doit contenir entre 3 et 20 caractères.");
return false;
}
var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
alert("L'adresse email n'est pas valide.");
return false;
}
var passwordPattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
if (!passwordPattern.test(password)) {
alert("Le mot de passe doit contenir au moins 8 caractères, dont une majuscule, une minuscule, et un chiffre.");
return false;
}
return true; // Toutes les validations sont passées
}
</script>
</head>
<body>
<!-- Formulaire avec token CSRF -->
<form name="secureForm" onsubmit="return validateForm()" action="/submit-form" method="post">
<!-- Champ caché pour le token CSRF -->
<input type="hidden" name="csrf_token" value="VotreTokenCSRFUniqueGénéréCôtéServeur">
Nom d'utilisateur: <input type="text" name="username" required><br>
Email: <input type="email" name="email" required><br>
Mot de passe: <input type="password" name="password" required><br>
<input type="submit" value="Soumettre">
</form>
</body>
</html>