Aller au contenu
Support de Zwii
Fred

Captcha à la connexion

Messages recommandés

C'est un plus pour la sécurité, qui augmente le temps passé à se connecter mais qui n'est pas vraiment contraignant, en plus tu as eu la bonne idée de le proposer en option ;)

 

Tout fonctionne comme attendu, juste un truc à observer, ce serait pas mal si les petites images .png avait un fond transparent et que la couleur du texte puisse s'adapter à celui du fond, qui n'est pas forcement blanc, comme celui par défaut

 

fond-captcha.png.134dd291d8c3d9325207fe8610784ba4.png

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a une heure, Gilux a dit :

la couleur du texte puisse s'adapter à celui du fond, qui n'est pas forcement blanc, comme celui par défaut

Compliqué, ceux sont des images, modification dynamique, je ne suis même pas certain que php puisse le réaliser facilement. 

Partager ce message


Lien à poster
Partager sur d’autres sites

Oui, une image PNG incorporant un texte avec une police au choix peut se créer à la volée en PHP, le PB est de faire que la couleur du texte puisse s'adapter à celui du fond, tel que c'est le cas pour le texte du CMS, clair sur sombre et inversement

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 8 heures, Gilux a dit :

Oui, une image PNG incorporant un texte avec une police au choix peut se créer à la volée en PHP, le PB est de faire que la couleur du texte puisse s'adapter à celui du fond, tel que c'est le cas pour le texte du CMS, clair sur sombre et inversement

Sauf le captcha ne marche pas comme cela, il n'est pas sensé se fondre dans le thème. Le texte devrait être coloré afin de rendre plus difficile la programmation d'un bot et être parfaitement différencié du reste de la page pour être facilement distingué par un humain.

D'ailleurs je vais mettre un coup de Gimp sur les images concernées.

 

Partager ce message


Lien à poster
Partager sur d’autres sites

100% validé sur une version en prod.

Avant

captavant.thumb.png.41cadfaffb0095d01fc523d4c864e23f.png

dans la config

captavant1.thumb.png.fee9ae16030a64627068a5cffa199562.png

résultat final

captavant2.png.75f7af088e294611ac22fc21fd7f5d4a.png

 

Super travail Fred, une sécurisation de plus qui sera appréciée à sa juste valeur, moi j'aime les images chiffres grandes à cause de ma vue basse.

Roger

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 3 heures, Fred a dit :

Voici le nouveau jeu d'images après quelques minutes sous Gimp

 

C'est effectivement une très bonne idée de mettre le texte, les chiffres, en couleur, si le fond pouvait être transparent ce serait juste parfait 😉

 

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 27 minutes, Gilux a dit :

 

C'est effectivement une très bonne idée de mettre le texte, les chiffres, en couleur, si le fond pouvait être transparent ce serait juste parfait 😉

 

 un .gif avec transparence?

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 2 minutes, mulanee a dit :

 un .gif avec transparence?

 

Non, un .png avec transparence, à utiliser de préférence au .gif, si t'as un peu de temps à y consacrer :

 

14.png.b6249ecf52861c8122eb37fc518aa59a.png

 

0k.png.44c5d9be20fdad490e19b6be606fa5f8.png

 

Il reste une petite bordure blanche, mais ça peut se peaufiner :

 

Procédé

Ouvrez "Gimp"

Il met un certain temps, c'est normal, il charge les paramètres.
  • Glissez votre image dans le programme.
  • Sélectionnez l'outil de sélection contiguë.

Pour se faire, allez dans le menu Outils > Outils de sélection > sélection contiguë.
 

RCBkkGIlET4R1xvBgn-selectioncontigue.png
 
  • Cliquez sur les zones de l'image à rendre transparentes.

 

SWlX8suHAcsE889dcY-selectiondeszones.png
 
  • Calque > Transparence > Couleur vers alpha.

 

BWzzplwUdxCs6ocwNaD-couleurversalpha.png


Une fois les zones désirées transparentes, traitées:
Celle-ci s'affiche en quadrillage gris clair / gris foncé, comme illustré-ci dessous.

 
R9sMCEJkv-couleurversalphaapercus-s-.png
 
  • Ensuite cliquez sur le bouton "Valider".

Il ne vous reste plus qu'a écraser le fichier original.
Pour ce faire:

  • Cliquez sur l'onglet "Fichier" > Écraser Nom_Du_Fichier.png.

 

BCcaIRBSCiEaJ7qaZEhU7k0EI-ecraserpng.png

 

Il est impératif que le fichier à traiter soit, à la base, en "PNG".
Si vous tentez de transformer des "Blancs" en transparence, sur un fichier "JPG",
les modifications ne seront pas prises en comptes !
https://www.commentcamarche.net/faq/41808-rendre-une-image-transparente-avec-gimp

 

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 5 heures, Fred a dit :

Sauf le captcha ne marche pas comme cela, il n'est pas sensé se fondre dans le thème

 

Peut-être, mais rien n'oblige à faire comme tout le monde, CAD comme google, et si Zwii a un Captcha (à tes souhait !) original, comme il l'est déjà, mais se fondant en plus dans le thème, ce sera le top 😉

 

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a une heure, Gilux a dit :

 

Non, un .png avec transparence, à utiliser de préférence au .gif, si t'as un peu de temps à y consacrer :

 

14.png.b6249ecf52861c8122eb37fc518aa59a.png

 

0k.png.44c5d9be20fdad490e19b6be606fa5f8.png

 

Il reste une petite bordure blanche, mais ça peut se peaufiner :

 

Procédé

Ouvrez "Gimp"

Il met un certain temps, c'est normal, il charge les paramètres.
  • Glissez votre image dans le programme.
  • Sélectionnez l'outil de sélection contiguë.

Pour se faire, allez dans le menu Outils > Outils de sélection > sélection contiguë.
 

RCBkkGIlET4R1xvBgn-selectioncontigue.png
 
  • Cliquez sur les zones de l'image à rendre transparentes.

 

SWlX8suHAcsE889dcY-selectiondeszones.png
 
  • Calque > Transparence > Couleur vers alpha.

 

BWzzplwUdxCs6ocwNaD-couleurversalpha.png


Une fois les zones désirées transparentes, traitées:
Celle-ci s'affiche en quadrillage gris clair / gris foncé, comme illustré-ci dessous.

 
R9sMCEJkv-couleurversalphaapercus-s-.png
 
  • Ensuite cliquez sur le bouton "Valider".

Il ne vous reste plus qu'a écraser le fichier original.
Pour ce faire:

  • Cliquez sur l'onglet "Fichier" > Écraser Nom_Du_Fichier.png.

 

BCcaIRBSCiEaJ7qaZEhU7k0EI-ecraserpng.png

 

Il est impératif que le fichier à traiter soit, à la base, en "PNG".
Si vous tentez de transformer des "Blancs" en transparence, sur un fichier "JPG",
les modifications ne seront pas prises en comptes !
https://www.commentcamarche.net/faq/41808-rendre-une-image-transparente-avec-gimp

 

Comme ça?

19.png

14.png

Modifié par mulanee
  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Oui sauf que si le contraste n’est pas respectée entre le fond de l’image et ou son fond et l’arriver plan de la fenêtre de login, la captcha sera difficilement lisible. 
 

C’est pourquoi les images de captcha n’ont pas de couche alpha. 
 

Après si tu arrives à un résultat satisfaisant, je ne demande qu’à voir 😉

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 57 minutes, Fred a dit :

Oui sauf que si le contraste n’est pas respectée entre le fond de l’image et ou son fond et l’arriver plan de la fenêtre de login, la captcha sera difficilement lisible. 

 

C'est vrai 😞

soit.png.6302dfeee2f826136b3978cdf7db3d3f.png

 

Réduit, à peu près, à la taille d'affichage :

soit-2.png.b9963161179358903e9c96f69951e640.png

 

Bien qu'il y ait une infime probabilité qu'il en soit ainsi, si la couleur du fond est identique à l'une des couleurs de l'image, c'est difficilement lisible...

Partager ce message


Lien à poster
Partager sur d’autres sites

Je procède ainsi pour une png transparente avec gimp 2.10.20 :

  • Ouvrir l'image au format png
  • Dans l'onglet des calques clic droit sur le claque puis ajouter un canal alpha
  • Outil de sélection par couleur (CTRL-O)
  • Cliquer sur la couleur de fond dans l'image
  • Avec MAJ appuyé on peut élargir la zone en ajoutant une autre gamme de couleur (CTRL pour en supprimer)
  • Enfin appuyer sur la touche SUPP du clavier, les damiers matérialisent la transparence.
  • Enfin fichier/écraser... (si l'image ouverte est en jpeg, exporter sous puis sélectionner png).

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 56 minutes, Gilux a dit :

Bien qu'il y ait une infime probabilité qu'il en soit ainsi, si la couleur du fond est identique à l'une des couleurs de l'image, c'est difficilement lisible...

Même un bleu un peu différent ou une couleur de fond qui soit celle de l'image captcha peut poser des problèmes de lecture, autant garder le blanc.

Partager ce message


Lien à poster
Partager sur d’autres sites

Pour épargner les vieux yeux, augmentation de la dimension de deux vignettes, de la taille affichée de toutes les autres et centrage du champ de saisie avec un nombre de colonnes suffisant qui empêche les débordements et un peu de CSS.

 

2020-09-30_17-31.png.eec1dc72ab82fe80d23d7db832413be0.png

 

La même présentation dans le formulaire.

 

2020-09-30_17-32.png.a05b07d09a1e9af82dee24eb06f11486.png

 

Cela-dit il y a encore une amélioration à trouver : les valeurs sont clairement transmises dans le DOM ! Un robot n'a même pas besoin de se faire c...r à décoder l'image :

 

2020-09-30_17-35.png.c058bf929884fa99c64b8eaf66425ac8.png

 

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 2 heures, Fred a dit :

Cela-dit il y a encore une amélioration à trouver : les valeurs sont clairement transmises dans le DOM ! Un robot n'a même pas besoin de se faire c...r à décoder l'image :

 

2020-09-30_17-35.png.c058bf929884fa99c64b8eaf66425ac8.png

 

 

Arf ! C'est la tuile :(

C'est moins sécurisé que les logins + mot de passe, il y aurait la possibilité de chiffrer ce captcha mais, selon ce site https://apcpedagogie.com/les-methodes-de-cryptage-en-php

 

Il existe de nombreuses fonctions Php qui permettent de générer un algorithme permettant ainsi de crypter un mot de passe. Cependant, ces fonctions ont fini par devenir obsolètes avec le temps car leurs chiffrements ont fini par être découverts ! C'est le lot de toutes protections informatiques telles quelle soit !

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 2 heures, Gilux a dit :

Le hashage semble être le plus sécurisé, de nos jours https://www.php.net/manual/fr/security.database.storage.php

C’est la méthode qu’utilise Zwii pour le stockage des mots de passe.  
Il existe peut-être d’autres solutions que de passer par des champs « cachés ». 

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 12 heures, Fred a dit :

Pour épargner les vieux yeux, augmentation de la dimension de deux vignettes,

Et vous avez justement une personne avec "de vieux yeux": le Roger...

2020-09-30_17-31.png

 

Sur la capture de Fred ci dessus je suis bien incapable de voir le Z et le E dans l'image chiffre 11 sauf à zoomer depuis mon navigateur sur le captcha

 

La seconde proposition de Fred (dans le cas ou vous voulez absolument utiliser de la couleur dans vos images) a ma préférence car je distingue parfaitement les chiffres colorés sur le fond blanc du captcha.

2020-09-30_17-32.png

Ceci n'est que mon avis personnel et n'engage que moi, ne pas le prendre pour argent comptant:

Par contre, un robot (bot) ne possédant pas d’œil et encore moins de lunettes comme moi 🤪, quel est l'intéret primordial de "coloriser les images" si ce n 'est pour faire plaisir à l'utilisateur. Pour ma part je trouve que le Zwii conçus par Fred au niveau des multiples protections qu'il possède est suffisamment sécurisé à ce jour (combien de Zwii ont été déclaré hackés depuis son existence?

Pas beaucoup il me semble  😀, et le peu qui fut "haché" la plupart du temps le fut à cause de l'utilisateur qui laissait des portes ouvertes ou "des bidouilles persos" menant à la catastrophe.

 

Partager ce message


Lien à poster
Partager sur d’autres sites

@Gilux Ce sera la technique du hashage du résultat, un test ou deux et ce sera commité.

@roger je vais améliorer la lisibilité de treize et de onze,  ce sera léger on arrive à identifier le nombre.

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 9 minutes, Fred a dit :

Ce sera la technique du hashage du résultat, un test ou deux et ce sera commité.

 

Super, mais est-ce seulement le résultat qui est hashé, ou aussi les champs input hidden ?

 

Je m'apprétais à te répondre quand tu as envoyé ton message :

 

Il y a 16 heures, Fred a dit :
Il y a 16 heures, Fred a dit :

Il existe peut-être d’autres solutions que de passer par des champs « cachés »

 

 

Salut @Fred

Après prise d'informations, et plusieurs systèmes vus en javascript ou en PHP, je suis "tombé" sur cette astuce qui consiste à intégrer un champ <input> caché en CSS, non pas avec l'attribut Hidden, pour piéger les robots, dont le fonctionnement consiste à lire et interpréter le DOM :

Concevoir un formulaire HTML anti spam sans Captcha

https://www.sqlpac.com/referentiel/docs/conception-html-formulaires-anti-spam-sans-captcha.html

Partager ce message


Lien à poster
Partager sur d’autres sites

C'est très simple; il suffit de cacher calculer le résultat, de le hasher puis de le placer dans un champ input hidden, ensuite on le compare avec le calcul saisi par l'utilisateur.

Je vais faire un commit "de service" histoire de récupérer le code chez moi, tu pourras voir les modifs.

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité
Ce sujet ne peut plus recevoir de nouvelles réponses.

×
×
  • Créer...