Formulaire d'inscription et de connexion JS

Bonjour,
Alors, je dois faire un formulaire d'inscription et un formulaire de connexion (ou l'on se connecte seulement avec un mot de passe -pas d'email ni d'identifiant-).
Je suis nul en PHP et je n'ai pas de Base de Données.
JavaScript n'est pas une bonne solution pour les mots de passe...
Mais étant le roi de la bidouille (Sans aucun doute, s'il y avait une médaille pour le roi de la combine qu'il ne faut surtout pas faire, tu la gagnerais facilement. "Parsimonhi"), j'ai imaginé une solution en JS. Je l'ai réalisé et j'aimerais vos avis, conseils...

Pourriez-vous me donner votre avis sur celle-ci et me dire s'il y a des risques ??
Merci !

Donc, pour le formulaire d'inscription, j'ai fait une fonction PHP qui créer un fichier .js au non du mot de passe dans le répertoire 'passwords' avec un tableau (Array) où les autres sonnées sont stockées.
Pour le formulaire de connexion (enfin, c'est un input et un bouton, car avec un formulaire ce serait pénible), j'ai mis cette fonction JQuey :

function start(){
	if(password.validity.valid){
		$.getScript("passwords/"+$("#password").val()+".js")
			.done(function(){read(X)})
			.fail(function(){alert("Mot de passe inexistant !")})
		$("#password").val("");
	}
}

Pourriez-vous me donner votre avis sur cette méthode et me dire s'il y a des risques ??
Merci !

Hello,

le souci n'est pas le langage, le souci c'est que c'est du front ...
Donc, n'importe qui peut faire un get dans la console et récupérer ton mot de passe

C'est pour ça qu'il faut toujours faire la vérification coté back !!
Un simple bout de php fait l'affaire et c'est sécurisé

Oui, mais là, le mot de passe ne peut pas être récupéré sans être connu !
Le JS ouvre le fichier LeMotDePasse.js et le dossier a un fichier index.html.
Est-ce que c'est bon ?

a écrit :
Donc, n'importe qui peut faire un get dans la console et récupérer ton mot de passe

Vous êtes sûr, dans ce cas là ?

Je t'invite à faire le test directement ^

Tester quelle ligne de code ?

Fais un get sur le dossier comme tu le fais par exemple dans ta fonction start.
Ce que je veux te dire c'est que si un script coté front est capable de récupérer une donnée, c'est que ce n'est pas une méthode sécurisée !
Après pour ce cas précis c'est ambigüe car je pense que tu travaille en local avec wamp.
Mais peu importe, c'est le principe client/serveur, et c'est au serveur de valider/vérifier les données, en aucun cas le client ne doit avoir la possibilité de valider !

Il faut un truc de ce style:
client envoie MDP -> serveur vérifie et envoi true ou false -> client fait quelque chose

Toi tu as ce genre:
serveur met à dispo un mot de passe public -> client va vérifier si il est OK

Dans l'absolu et dans un monde de oui-oui ça fonctionne, mais on peut facilement outrepasser la vérification qui n'est faite que coté front !

Si j'écris

$.getScript("passwords/UnMotDePasseCorrect.js")
			.done(function(){read(X)})
			.fail(function(){alert("Mot de passe inexistant !")})

dans la console, ça entraine une erreur.

stryk a écrit :
Après pour ce cas précis c'est ambigüe car je pense que tu travaille en local avec wamp.

En français ?? Mon sites est stocké sur 000webhost. Si je te donnes l'adresse, tu pourrais y accéder par exemple.
C'est en local avec wamp ?

stryk a écrit :
on peut facilement outrepasser la vérification

Comment ? Le mot de passe est public ? C'est le nom d'un fichier présent dans un dossier que l'on ne peut pas accéder (je pense... Mais dis-moi si c'est le contraire...).
Modifié par js_html (15 Dec 2020 - 20:20)

Question simple: le code JS qui récupère le nom du fichier est dans ta page coté client ?
Plus clairement: ta fonction START est visible quand tu ouvre la page et que tu fais click/droit 'code source de la page' ??

Donne le lien de ta page si tu le souhaites, là on tourne en rond ^

Le nom du fichier est récupéré en JS : c'est la value de ce qu'on entre dans le champ password pour se connecter.
Oui, START se voit en JS.
Ce que je demandais était : "comme ça ouvre le fichier que le client demande (ce qui est écrit dans le champ avec l'id password), est-ce sécurisé ? Car ça ouvre seulement le fichier spécifié avec son code."
Tu comprends ce que je veux dire ou pas ?
Modifié par js_html (15 Dec 2020 - 21:00)

Ah tu veux dire que ce n'est pas le mot de passe valide mais juste ce que l'utilisateur a tapé ?
Si c'est ça je ne comprends pas bien ( en fait je ne comprends rien je pense )
Pas évident pour moi quand je n'ai qu'un partie du code.

Tu peux décrire le process de login stp ?

genre: client fais ça, serveur fais ça etc

Inscription :
1/ Le client tape son mdp, sont mail... dans un form
2/ Le PHP mets ces valeurs dans un fichier JS qu'il crée
3/ Le PHP renvoie la page, dis que c'est bon au client...

Connexion :
1/ Le client tape à la main son mdp dans un champ de texte
2/ Il clique sur le bouton
3/ Le script JS lit cette valeur ($("#password").val())
4/ Le script JS ouvre le fichier avec le chemin "passwords/"+LeMotDePasse+".js" (start)
5/ Si le fichier (mot de passe) n'existe pas, le JS ne fait rien et averti utilisateur.
5/ Si le fichier existe, le JS récupère les données de l'Array de ce fichier .js (X)
6/ Le JS utilise ces données (read)

Est-ce que tu comprends ou pas ?

Bonjour js_html,

Là où ce n'est pas sécurisé, et la liste n'est pas exhaustive :

1. Le navigateur va faire une requête http sur un fichier javascript qui porte comme nom le mot de passe de l'utilisateur. Ce fichier va se retrouver dans la cache du navigateur et probablement dans les logs (historique des requêtes http) du serveur.
2. Si ton hébergeur fait des copies de sauvegarde de tes fichiers, le dossier passwords sera inclus là-dedans.
3. Au final les mots de passe seront visibles en clair dans ce dossier et sachant que beaucoup de gens utilisent le même mot de passe un peu partout, ce serait terrible d'apprendre que ton système stocke les mots de passe en clair comme ça dans un dossier.
4. Ce serait facile pour un robot de faire des requêtes http à répétition sur le dossier passwords pour trouver les fichiers javascript qui existent et ainsi récupérer tous les mots de passe.
5. Si accidentellement le dossier passwords permet de parcourir son contenu (mauvaise configuration du serveur), tous les mots de passe deviendront accessibles.

Je serais curieux pour qui et pour quoi tu dois créer un formulaire d'inscription et de connexion, mais tu dois absolument trouver une autre façon de le faire. Avec les efforts que tu mets pour générer des fichiers javascript à la volée, tu pourrais très bien mettre en place une meilleure solution plus sécuritaire et quand même simple.

En plus, qui dit formulaire de connexion et d'inscription, dit accès à un contenu protégé. Si tu fais les choses correctement dès le départ, tu seras gagnant sur le long terme quand viendra le temps de donner accès à du contenu protégé aux utilisateurs connectés.

js_html a écrit :
Est-ce que tu comprends ou pas ?

Ah là oui je comprends ! ( merci pour l'explication )
Donc on se retrouve bien avec un souci: rien n’empêche de lister le dossier pour trouver le fichier et donc le mot de passe et les données qui vont avec !

Mauvaise idée je t'assure

stryk a écrit :

Donc on se retrouve bien avec un souci: rien n’empêche de lister le dossier pour trouver le fichier et donc le mot de passe et les données qui vont avec !

Juste si le serveur permet de parcourir le contenu du dossier. C'est généralement bloqué par défaut.

Je te rejoins cependant que c'est une très mauvaise idée tout ça!

Bonjour Tony Monast,

1., ce n'est pas grave puisque c'est le mot de passe de l'utilisateur, non ?
2 et 3.., si on avertit l’utilisateur que JE et l'HEBERGEUR peuvent voir ces mots de passes et qu'il faut en mettre un compliqué, ça va ?
4., comment on bloque ces robots ?
5., oui, effectivement !

Tony Monast a écrit :
Avec les efforts que tu mets pour générer des fichiers javascript à la volée

20 lignes de PHP, c'est un effort ?

Tony Monast a écrit :
En plus, qui dit formulaire de connexion et d'inscription, dit accès à un contenu protégé. Si tu fais les choses correctement dès le départ, tu seras gagnant sur le long terme quand viendra le temps de donner accès à du contenu protégé aux utilisateurs connectés.

Oui, bien sûr !!

Alors, je suis d'accord avec toi mais comment puis-je faire ? (je suis très très très nul en PHP)
Après , si tu veux m'aider pas à pas, je suis d'accord.

Tu veux un coup de main sur la partie connexion ou enregistrement ?

En fait c'est sensiblement pareil que ton code sauf que c'est géré par PHP.

js_html a écrit :

1., ce n'est pas grave puisque c'est le mot de passe de l'utilisateur, non ?

Oui, c'est grave. Certains utilisent des ordinateurs publiques et ils ne s'attendent certainement pas que leur mot de passe se retrouve dans la cache du navigateur. Et même pour mon propre ordinateur personnel chez-moi, je serais choqué de retrouver mon mot de passe en clair sur mon disque dur.

js_html a écrit :

2 et 3.., si on avertit l’utilisateur que JE et l'HEBERGEUR peuvent voir ces mots de passes et qu'il faut en mettre un compliqué, ça va ?

La bonne pratique moderne est de ne jamais stocker le mot de passe nul part. Que ni l'hébergeur, ni le propriétaire de l'application, ni le développeur du site Web n'est en mesure de voir les mots de passe ou de les décrypter. Les mots de passe sont hashés et salés d'une manière qui rend très difficile de retrouver le mot de passe d'origine. Un site n'est jamais à l'abri d'une attaque et d'un vol de données. Il est important de mettre les mesures nécessaires en place pour empêcher l'attaque et limiter les dégâts s'il y a une brèche. Bon tu vas me dire que tu ne crées pas une application pour la NASA, mais aussi bien d'apprendre les bonnes pratiques maintenant et faire les choses correctement.

js_html a écrit :

4., comment on bloque ces robots ?

Ce serait plus compliqué de bloquer ces robots qui peuvent utiliser des ordinateurs partout dans le monde pour faire des requêtes aléatoires sur plusieurs jours, que de faire un formulaire de connexion et d'inscription correctement.

js_html a écrit :

5., oui, effectivement !
20 lignes de PHP, c'est un effort ?

J'ai hâte de voir comment tu vas t'y prendre pour donner accès à ton contenu aux utilisateurs connectés. À court terme tu vas t'en sortir, mais plus le temps va avancer, plus ça va se compliquer avec ta méthode actuelle.

js_html a écrit :

Alors, je suis d'accord avec toi mais comment puis-je faire ? (je suis très très très nul en PHP)
Après , si tu veux m'aider pas à pas, je suis d'accord.

Hélas, non. Je n'ai pas de disponibilité pour une aide personnalisée. Il existe beaucoup de tutoriaux par contre sur https://openclassrooms.com/fr/. C'est sûr qu'il y en a un sur les systèmes de login. Mais ça va te demander d'apprendre les bases de PHP ou d'un langage côté serveur similaire. Tu peux aussi te tourner vers Wordpress qui a déjà le système de login et d'inscription en place.
Modifié par Tony Monast (15 Dec 2020 - 21:46)

@stryz
Comment on liste le dossier ? (pour que je teste).

stryz a écrit :
Tu veux un coup de main sur la partie connexion ou enregistrement ?

Sur ce qui ne va pas... (donc je ne sais, dites-moi : Enregistrement, Connexion ou Tout ?)

stryz a écrit :
En fait c'est sensiblement pareil que ton code sauf que c'est géré par PHP.

Vous voulez dire que je continue de mettre ces données dans des fichiers avec le mot de passe comme nom de fichier ? Vous ne disiez pas le contraire ?


@Tony Monast

Tony Monast a écrit :
Et même pour mon propre ordinateur personnel chez-moi, je serais choqué de retrouver mon mot de passe en clair sur mon disque dur.

Effectivement, je suis d'accord avec vous... Sauf si vous utilisez les mots de passe stockés sur l'ordinateur (Firefox Lockwise...)...

Et si je les hash en php comme noms de fichiers et les hash en JS (Peut-on le faire ?) pour retrouver le nom du fichier, est-ce bon ?

Pour bloquer les robots, ce n'est pas

<meta name="robots" content="noindex, nofollow">

? Ce n'est pas ça ?

Comment je fais ?
1/ Je récupère les données (1 mail, 1 mdp, 1 champ de type hidden et entre 0 et 20 champs de type URL)
2/ Je prends des variables PHP et je les mets dedans (je rajoute des guillemets autour des URLs).
3/ Je créé une nouvelle variable, je mets toutes les variables, séparées par des virgule, avec "var X=[" et "]" au début et à la fin.
4/ Je crée un nouveau fichier du non MotDePasse.js
5/ Je l'ouvre et mets l'array dedans...

Merci !

@stryz
Comment on liste le dossier ? (pour que je teste).

stryz a écrit :
Tu veux un coup de main sur la partie connexion ou enregistrement ?

Sur ce qui ne va pas... (donc je ne sais, dites-moi : Enregistrement, Connexion ou Tout ?)

stryz a écrit :
En fait c'est sensiblement pareil que ton code sauf que c'est géré par PHP.

Vous voulez dire que je continue de mettre ces données dans des fichiers avec le mot de passe comme nom de fichier ? Vous ne disiez pas le contraire ?


@Tony Monast

Tony Monast a écrit :
Et même pour mon propre ordinateur personnel chez-moi, je serais choqué de retrouver mon mot de passe en clair sur mon disque dur.

Effectivement, je suis d'accord avec vous... Sauf si vous utilisez les mots de passe stockés sur l'ordinateur (Firefox Lockwise...)...

Et si je les hash en php comme noms de fichiers et les hash en JS (Peut-on le faire ?) pour retrouver le nom du fichier, est-ce bon ?

Pour bloquer les robots, ce n'est pas

<meta name="robots" content="noindex, nofollow">

? Ce n'est pas ça ?

Comment je fais ?
1/ Je récupère les données (1 mail, 1 mdp, 1 champ de type hidden et entre 0 et 20 champs de type URL)
2/ Je prends des variables PHP et je les mets dedans (je rajoute des guillemets autour des URLs).
3/ Je créé une nouvelle variable, je mets toutes les variables, séparées par des virgule, avec "var X=[" et "]" au début et à la fin.
4/ Je crée un nouveau fichier du non MotDePasse.js
5/ Je l'ouvre et mets l'array dedans...

Merci !
Modifié par js_html (17 Dec 2020 - 11:17)

js_html a écrit :

Comment on liste le dossier ? (pour que je teste).

Habituellement on se rend dans le dossier en question avec un navigateur Web, comme http://www.example.com/passwords/

js_html a écrit :

Vous voulez dire que je continue de mettre ces données dans des fichiers avec le mot de passe comme nom de fichier ? Vous ne disiez pas le contraire ?

Si j'étais toi j'oublierais l'idée de créer un fichier par mot de passe. Utilises une base de données SQL ou NoSQL, mais c'est mieux une base de données pour gérer ça.

js_html a écrit :

Effectivement, je suis d'accord avec vous... Sauf si vous utilisez les mots de passe stockés sur l'ordinateur (Firefox Lockwise...)...

Je ne stocke pas mes mots de passe dans mes logiciels, même pour les applications les plus inoffensives/inutiles.

js_html a écrit :

Et si je les hash en php comme noms de fichiers et les hash en JS (Peut-on le faire ?) pour retrouver le nom du fichier, est-ce bon ?

Ce serait déjà un compromis raisonnable, toujours selon la sensibilité du site Web que tu développes. Pour un truc pro, non, mais pour un site personnel à petite envergure, pourquoi pas. Même si le mot de passe ne sera pas salé et que la méthode de hashage sera connue étant donné que ce sera en Javascript, au moins, tu ne pourras pas connaître les mots de passe juste en regardant dans le dossier.

js_html a écrit :

<meta name="robots" content="noindex, nofollow">

Ça c'est pour fortement suggérer aux robots d'indexation comme Google Bot de ne pas indexer le contenu dans son moteur de recherche. Les robots dont je parle ne respectent pas ces instructions. Je parle des robots malveillants qui vont essayer au hasard d'appeler tes fichiers de mots de passe comme aaaaaa.js, aaaaab.js, aaaaac.js [...] jusqu'à zzzzzz.js. La liste n'est pas exhaustive. Le robot va essayer les combinaisons de majuscules/minuscules, les lettres et les chiffres, les mots de passe populaires, etc...

Dans l'ensemble, comme j'ai mentionné, ça t'apporterais beaucoup d'avantages d'apprendre un peu plus le PHP et les bases de données. Tu seras gagnant sur le moyen et long terme. Sinon tu vas te retrouver souvent à faire des bidouilles qui fonctionnent plus ou moins bien ou qui atteignent rapidement leur limite.
Modifié par Tony Monast (17 Dec 2020 - 20:51)