Comment créer une page d'authentification de connexion en HTML ou JAVASCRIPT
Je viens d’électronique, alors n’avez pas une bonne connaissance de la conception de pages Web. Je fais un projet ethernet et pour cela, je dois créer une page Web, mais avant cette page Web, je dois également créer une page Web d'authentification de connexion. J'ai réussi à le faire en utilisant HTML JAVASCRIPT mais le problème est que tout le monde peut voir le mot de passe du nom d'utilisateur en affichant la source de la page.
J'ai du mal à faire l'authentification. J'ai des connaissances de base en HTML et JAVASCRIPT, mais je suis prêt à apprendre. Tout ce que je peux trouver sur Google, ce sont des modèles de connexion, mais je ne sais même pas comment les utiliser.
Quelqu'un peut-il me donner un exemple ou m'indiquer de bons liens?.
HTML et Javascript sont interprétés côté client . Pour la connexion, c'est le code côté serveur qui est couramment utilisé pour vérifier les informations d'identification - tout simplement parce que vous le savez déjà - avec une implémentation côté client simple, vous pouvez voir les informations d'identification dans le code source, côté serveur également Il est plus facile de travailler avec, une fois que vous comprenez, il est plus flexible pour le développement ultérieur, il est plus sécurisé et il est vraiment utilisé partout pour cette tâche.
C'est une bonne idée d'utiliser PHP, ASP, Ruby (ou tout autre langage côté serveur ) pour cela. Si vous ne le souhaitez pas, vous devez rendre la tâche difficile pour l'utilisateur de lire les informations d'identification à partir du code source.
Pour ce faire, vous pouvez utiliser différentes méthodes telles que la cryptographie ou obfuscation . La cryptographie est fortement recommandée au lieu d’obscurcir, car elle ajoute assurément plus de sécurité à votre application. Obfusquer signifie fondamentalement que vous modifiez le code source de manière à ce qu'il soit difficile à lire - vous ajoutez des fonctions qui codent des chaînes, de sorte que votre "mot de passe" ne soit pas visible au premier regard. Cependant, l'obfuscation peut toujours être contournée, et généralement assez facilement avec de bons outils de débogage.
Alors, allons avec la cryptographie. Ce que vous recherchez ici utilise des fonctions de hachage one way . Vous avez l'embarras du choix - MD5, SHA1, SHA256, ... chacun offrant un niveau de sécurité différent. SHA256 implémentation en Javascript est un exemple que vous pouvez utiliser. Il existe de nombreuses autres bibliothèques et exemples, utilisez donc simplement Google et trouvez celle qui vous convient.
Maintenant, que faire avec ça? Disons que vous avez la fonction sha256 () qui accepte une chaîne et renvoie son hachage sous forme de chaîne. Pour chaque utilisateur et mot de passe que vous avez, vous pré-comptez le hachage SHA256 de la chaîne "utilisateur + mot de passe".
Dites, vous voulez que votre nom d'utilisateur soit "Pedro" et que le mot de passe pour ce compte soit "MyPassword".
Vous pré-décomptez le hash de "PedroMyPassword" - par exemple. avec avec l'outil de hachage en ligne . Vous pouvez voir le hash SHA256 est
40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21
Ce hash est ce que vous mettez dans votre code Javascript.
Lorsque l'utilisateur entre son utilisateur et son mot de passe, vous appelez votre fonction sha256 sous "nom d'utilisateur + mot de passe" et vous la comparez à votre hachage précompté.
Notez que vous devez sélectionner un mot de passe très fort, sinon certaines attaques (telles que l'attaque par dictionnaire) seraient faciles à utiliser pour casser votre hachage.
Le problème est maintenant que vous ne précisez pas ce que vous voulez faire ensuite. Par exemple, vous voudrez peut-être rediriger les utilisateurs authentifiés vers la page suivante, mais ici, vous rencontrez le même problème: si vous redirigez en Javascript vers "secondpage.html" dans votre code, quelqu'un pourrait simplement ignorer l'authentification et accéder à cette seconde page directement.
Ce que vous pouvez faire dans ce cas, c’est que vous nommez votre deuxième page comme suit:
40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21.html
c'est-à-dire le hachage de votre chaîne utilisateur + passe. Dans cette variante, vous ne mettez pas du tout le hachage dans le code. Le serveur Web renverra simplement l'erreur 404 pour tous les utilisateurs qui ne parviennent pas à s'authentifier. Par exemple, si quelqu'un tente d'utiliser "Pedro" avec "123456" comme mot de passe, le SHA256 sera
3bac31720fdd4619ebe2e8865ccc0dc87eb744f3f05f08c628bb9217a77e4517
et si vous les redirigez vers
3bac31720fdd4619ebe2e8865ccc0dc87eb744f3f05f08c628bb9217a77e4517.html
il n'existera pas, car votre deuxième fichier de page s'appelle
40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21.html
Vous devrez créer ces deuxièmes pages pour chaque combinaison utilisateur/passe. Vous pouvez ensuite mettre un simple code de redirection vers la deuxième page réelle.
Mais assurez-vous que vous utilisez le protocole HTTPS, sinon, les deuxièmes pages passeraient par le fil non crypté ...
Tout cela fonctionnera, mais néanmoins, je suggère fortement que vous envisagiez le côté serveur.
Vous ne pouvez pas vraiment avoir un système d'authentification sécurisé utilisant JavaScript et HTML seul.
Je suggérerais plutôt Authentification HTTP de base sur votre serveur, car il est beaucoup plus sécurisé (ce n’est pas parfait du tout, mais au moins, il utilise une méthode standard de contrôle d’accès côté serveur).
Si vous devez implémenter quelque chose en JavaScript, vous pouvez créer un schéma comportant uniquement un mot de passe basé sur le nom d'un répertoire caché. Quelque chose comme ce qui suit (notez que ceci n’a pas été testé et qu’il faudra quelques ajustements):
(Code emprunté et adapté de cette question )
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
var url = "some_url";
$.ajax(url,
{
if (statusCode == 200) {
document.location.href = url;
}
else {
alert('Incorrect password')
}
}
});
});
</script>
<input type="password" /><a href="javascript:void(0)">Login</a>
Le code doit être terminé pour que la fonction soit appelée lorsque le bouton est cliqué. Ainsi, si le mot de passe est foo, vous définissez un répertoire sur votre site Web appelé foo, et si JavaScript JQuery détecte que le mot de passe entré correspond à un nom de répertoire (par exemple, /foo/), l'utilisateur y est redirigé. Par conséquent, vous créez un /foo/index.html afin de prendre en charge la session connectée de l'utilisateur.
Notez que c’est la chose la plus sûre que vous puissiez faire avec JavaScript et HTML seul et qu’il présente les vulnérabilités suivantes.
- L'URL doit rester secrète, même si l'en-tête du référent, l'historique du navigateur et les journaux du serveur/proxy peuvent laisser filtrer cette adresse.
- Une fois qu'un utilisateur est connecté, il est toujours connecté (il peut mettre en signet les pages connectées)
- Il n'y a pas de moyen facile de révoquer un mot de passe.
- Il n'y a qu'un seul mot de passe.
- Toute personne ayant accès à l'affichage des fichiers sur le serveur peut afficher la structure de répertoires et apprendre le mot de passe.
- L'URL peut être divulgué par des outils d'analyse.
- Suppose que la navigation dans le répertoire sur votre serveur est désactivée (ou qu’il existe une page par défaut dans le répertoire parent de la page privée).
Dans tous les cas, protégez toujours votre serveur avec TLS/SSL. Ma recommandation est de créer correctement un système d'authentification d'utilisateur en suivant les conseils de OWASP . Ce qui précède ne montre que ce qui est réalisable en HTML de base (pas grand chose). Toutefois, il est préférable d’exposer le mot de passe dans les fichiers côté client.
Dans ma réponse précédente, j’utilisais des technologies côté client, c’est pourquoi le nom d’utilisateur et le mot de passe n’étaient ni sécurisés ni masqués si nous vérifions la source de la page.
Nous allons maintenant utiliser la technologie côté serveur. Pour cela, vous avez besoin d’un paquet de serveur Web tel que WAMP, XAMPP, etc.
Téléchargez et installez l’un de ces packages (si vous en avez un, c’est bien).
J'utilise XAMPP donc je vais expliquer avec XAMPP.
Si vous avez téléchargé XAMPP, , Recherchez le dossier htdocs dans le dossier XAMPP. Le mien est "C:\xampp\htdocs"
copier le code ci-dessous et créer un nouveau fichier php et enregistrer ce fichier sous le nom login.php dans le répertoire htdocs.
Voici le code php .
<?php
$usr="root";
$pwd="root";
if(isset($_POST['username']) && !empty($_POST['username']) && isset($_POST['password']) && !empty($_POST['password']) ){
$username=$_POST['username'];
$password=$_POST['password'];
if(($username==$usr) && ($password==$pwd) ){
echo '<br>login successfull';
}else{
echo '<br>login unsuccessfull';
}
}else{
echo "<br>Connot be left empty!";
}
?>Voici le code HTML
<html>
<head>
<title>Login</title>
</head>
<body>
<form action="login.php" method="POST" align="center">
<br>
Username:<input type="text" name="username"><br><br><br>
Password :<input type="text" name="password"><br><br>
<input type="Submit" value="Submit">
</form>
</body>
</html>Maintenant, allez dans Navigateur-> Tapez http: //localhost/login.html et exécutez Insérez le nom d'utilisateur et le mot de passe sous la forme root.
Je suppose que vous avez des connaissances de base de PHP, sinon passez à travers, il est très facile et lisez également sur les requêtes HTTP
- GET
- POST
<html>
<head>
<title>Login paget</title>
</head>
<script type="text/javascript">
function display(form){
if (form.username.value=="root") {
if (form.password.value=="root") {
location="page2.html"
} else {
alert("Invalid Password")
}
} else { alert("Invalid Username")
}
}
</script>
<body >
<form >
<input type="text" name="username" /><br><br>
<input type="password" name="password"/><br><br>
<input type="button" value="Login" onClick="display(this.form)"/>
</form>
</body>
</html>Cette page est introuvable
ERR_FILE_NOT_FOUND
vous devez donc remplacer page2.html par le nom de votre page suivante.