Sostituire il "captcha" che propone il programma. 
Autor: Michele G.
Besucht 250,
Followers 2,
Geteilt 0
Buongiorno alla community.
Per una migliore leggibilità del captcha generato dal programma, vorrei cambiarlo con uno più facilmente leggibile come quello proposto da KolAsim in un altro post.
@KolAsim: ho inserito il tuo codice captcha in un template di prova utilizzando il tab "esperto" nelle proprietà della pagina ma il codice si visualizza all'esterno della homepage e non all'interno del modulo "contatti" (vedere allegato) anche se comunque funziona perfettamente.
Essendoci nel template una sola pagina (la home) non riesco a capire in quale altra proprietà di pagina si possa inserire.
La prova che ho fatto è visibile qui.
Grazie.
Gepostet am
Ciao Michele, non ho seguito tutto il discorso, comunque guardando il tuo link forse il codice lo hai inserito nella sezione sbagliata, non ho il codice per testarlo ma prova ad inserirlo in un oggetto HTML.
Secondo, non so se hai provato, ma hai pensato al qcaptcha di google?
Ciao
come alternativa vedi se ti è utile questo, ciao
… Ho visto la tua pagina: avevi fatto tutto bene, solo che la struttura non combacia con il mio codice...
… adesso ho appena rivisto il codice per renderlo più facilmente fruibile, conglobando tutte le ricorrenze diverse in un’unica routine, con una sola variabile da dichiarare in modo semplice, una sola volta all’inizio del codice.
… Quello che devi fare tu, che richiede un minimo di praticità e attenzione, consiste nell’individuare l’ID del form mail da dichiarare. …per la tua pagina in questione si tratta di quello nel corpo della pagina, che attualmente ha questo ID(*):
#imObjectForm_7_form
… Il codice, così com’è, non è adatto per un mail-form nell’header, perché quest’ultimo ha una struttura fissa e non è contemplato nel mio attuale codice, che ho sviluppato sei-sette anni fa. Quindi il form nell’header puoi lasciarlo per altri scopi, se ti interessa, ma non verrà considerato dal mio codice...
… Quello che devi fare adesso è eliminare tutto il mio codice extra da dove lo avevi inserito precedentemente...
… Il mio nuovo codice va inserito in:
>> Passo 3 > Proprietà della pagina > Esperto > Codice personalizzato > terza opzione > Prima della chiusura del tag /head...
...(...In alternativa, se lo ritieni più comodo, puoi incollarlo in un oggetto Codice HTML, anche di 1 px, nella stessa pagina che contiene il form...)...
… Nel codice puoi personalizzare facilmente l’ID nella prima variabile dichiarata, ben visibile; se vuoi, puoi anche modificare l’immagine di contrasto e l’icona per il reload, entrambe facilmente individuabili nel codice.
… Queste immagini attualmente hanno un URL assoluto prelevato da una fonte online…
... Se le scarichi e le alleghi al progetto, utilizzando poi un URL relativo, sarebbe ancora meglio, ed in questo caso se vuoi chiarimenti, avvisami...
… Come al solito, il codice si applicherà con un semplice copia-incolla nel punto indicato…
… seguirà il codice …
.
.
... + + ... (*) ... si rileva con il destro del mouse > ispeziona:
.
.
... ecco il codice, ... nulla da invidiare ai metodi noti, concetto semplice, in chiaro e non assorbe risorse, meno di 5KB; ...se servono chiarimenti, avvisami ... ciao e buon lavoro:
<script>
/** captcha extra x WSx5 by KolAsim **/
$(window).on("load", function() { /*K*/
const contenitoreK = "#imObjectForm_7_form"; /* ID del modulo FORM-MAIL*/
/*--K--*/
const invioOrigK = contenitoreK + ' input[type="button"]'; /* ID pulsante INVIO del modulo */ /*--K--*/ const style = ` <style> ${invioOrigK} { display: none; } #captchaWrapper{text-align:center;} .inline { position:relative ; font-size:32px;padding:0px} .inline img:hover { rotate: 90deg; } .inline img:active { transform: scale(0.9); filter: drop-shadow(0 0 3px black); transition: filter 0s; rotate: 180deg; } #submit { width:150px; font-size:24px; } #btn { width:150px; font-size:24px; color: aqua; background-color: brown; } #sfondo { position:relative; width:200px; height:60px; margin-left:50%; left:-100px; overflow:hidden; text-align:center; } #contenitore { position:absolute; top:0px; display:flex; width:200px; height:55px; background-repeat:no-repeat; background-size:cover; background-position:center center; } #contenitoreIMG { position:relative; top:-75px; border: 1px solid #333; width:200px; height:200px;
/*--K--*/
background-image: url("https://cdn.pixabay.com/photo/2016/05/27/09/18/background-1419306_640.jpg");
/*--K--*/
background-repeat:no-repeat; background-size:200px 200px; background-position:center center; filter: blur(1px); } .box { width:50px; height:50px; display:flex; align-items:center; justify-content:center; font-size:50px; text-shadow: -2px -2px 5px white, 2px 2px 5px black; font-weight:bold; font-family:times; } #fakeRecaptcha { margin:auto; width:260px; border:1px solid #ccc; padding:10px; font-family:Arial; background:#f9f9f9; margin-bottomXX:10px; } #recaptchaBox { align-items:center; gap:10px; } #checkRobot { width:20px; height:20px; } #loadingBox { margin-top:10px; font-size:14px; color:#555; display:none; } </style> `; $("head").append(style); /*--K--*/ const html = ` <div id="captchaWrapper"> <div id="fakeRecaptcha"> <div id="recaptchaBox"> <input type="checkbox" id="checkRobot"> <label for="checkRobot">Non sono un robot</label> </div> <p id="key"></p> <div id="sfondo"> <div id="contenitoreIMG"></div> <div id="contenitore"></div> </div> <div id="user-input" class="inline"> <input type="text" id="submit" placeholder="Captcha" /> </div> <div class="inline">
<!-- >>> -->
<img class="reloadK" src="https://www.iconpacks.net/icons/2/free-icon-convert-3215.png" title="Reload Captcha">
<!-- <<< -->
</div> <input type="button" id="btn" value="INVIO" /> <div id="loadingBox">Verifica in corso...</div> </div> </div> `; $(contenitoreK).parent().append(html); /*--K--*/ let uniquechar = ""; let captchaAttivo = false; function generate() { $("#contenitore").html(""); $(".inline").fadeOut(300).fadeIn(300); $("#submit").val(""); uniquechar = ""; const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for (let i = 0; i < 4; i++) { uniquechar += chars.charAt(Math.floor(Math.random() * chars.length)); } $("#contenitore").attr("title", uniquechar); setTimeout(() => { uniquechar.split("").forEach(c => { $("#contenitore").append(`<div class="box">${c}</div>`); }); const colori = ["Red","Orange","Yellow","Green","Blue","Violet","Indigo"]; $(".box").each(function () { $(this).css({ transform: `rotate(${Math.random()*60-30}deg)`, color: colori[Math.floor(Math.random()*colori.length)] }); }); $("#contenitoreIMG").css("transform", `rotate(${Math.random()*360}deg)`); }, 1000); } function verifica() { if (!captchaAttivo) { $("#key").html("Conferma prima di non essere un robot"); return; } if ($("#submit").val() === uniquechar) { $("#key").html("Captcha accettato"); $( invioOrigK).click(); } else { $("#key").html("Captcha NON accettato!"); } } /*--K--*/ $(document).on("click", "#btn, #verifica", verifica); $(document).on("click", ".reloadK", generate); $(document).on("change", "#checkRobot", function () { if (this.checked) { $("#loadingBox").show().text("Verifica in corso..."); setTimeout(() => { $("#loadingBox").text("Verifica completata ✔"); captchaAttivo = true; generate(); }, 1200); } else { captchaAttivo = false; $("#loadingBox").hide(); $("#contenitore").html(""); } }); /*--K--*/ $(document).on("keydown", "form", function (e) { if (e.key === "Enter") { e.preventDefault(); return false; } }); /*--K--*/ setTimeout (function(){ $(".inline img").click() },500); /**K**/ });
</script>
-------------------------
.
Negli ultimi giorni ho visto diversi utenti condividere soluzioni CAPTCHA personalizzate per WebSite X5. Sono tutti lavori interessanti, ognuno con il proprio stile e approccio, e questo è sicuramente un valore per la community.
Detto questo, ci tengo a fare una riflessione tecnica generale, perché molti codici – pur funzionando visivamente – condividono alcune caratteristiche comuni:
Punti positivi ricorrenti che ho notato:
Fin qui tutto ok.
Ma c’è un punto fondamentale: i CAPTCHA lato client potrebbero presentare dei problemi.
E questo comporta inevitabilmente alcuni limiti:
Un bot, per esempio, può leggere il contenuto del DOM e ottenere il codice senza alcuna difficoltà. Questo non dipende da chi scrive il codice: è proprio un limite strutturale del lato client. Un esempio?
document.querySelector("#contenitore").title ....
E ha già il codice. Fine della sicurezza.
Detto questo, ci sono differenze importanti tra i vari approcci.
Alcuni codici tendono a mescolare:
Altri invece presentano:
La differenza si vede, anche se entrambi restano comunque CAPTCHA lato client.
Si può fare di più? Sì.
Per chi vuole una protezione più forte, esiste un approccio più robusto:
✔ Honeypot invisibile + Token criptato
Questo sistema:
Non è un CAPTCHA “militare”, ma è decisamente più rompiscatole di altri.
Conclusione
Tutte le soluzioni condivise finora sono utili e mostrano creatività. Ma è importante distinguere tra:
Il confronto tra i vari metodi ci ha incuriosito e ci ha spinto a lavorare su una soluzione più robusta, integrabile anche nei codici già esistenti. Stiamo sviluppando un sistema basato su tecniche come honeypot invisibile, token criptato e temporizzazione dei tentativi con blocco automatico, che riduce drasticamente la possibilità di bypass da parte dei bot e aumenta la sicurezza complessiva del modulo.
Il codice è già disponibile gratuitamente nella nostra pagina contatti tramite ispezione della pagina raggiungibile dal nostro profilo ma attenzione: ne il nostro ne il codice di altri utenti può fare qualcosa contro un bot programmato apposta per un singolo sito.
Questo tipo di bot:
È un attacco mirato con una grossa perdita di tempo e risorse per programmarlo. È come se qualcuno studiasse il tuo sito per ore e scrivesse un software su misura per superare il tuo CAPTCHA.
Ne vale la pena? Io penso di no!
Purtroppo X5 non ha BackEnd ma se lo avesse avuto.....
In pratica: un altro pianeta.
Se decidete di utilizzarlo dovete modificare il vostro ID del pulsante SEND del modulo contatti e inserirlo al posto di quello che trovate sul codice originale esattamente come dice la guida di Giancarlo WEB che vi consiglio di vedere.
Vi viene così ▼