Orosz szerelmes levelek – recaptcha!

2 napon belül több megkeresést is kaptunk azzal, hogy a Prestashop-beli contact-form-on keresztül tömeges SPAM áradat vette kezdetét finom orosz nyelven. Személyes véleményem az, hogy ez ismét olyan globális Prestashop-problémává fogja kinőni magát, mint anno a mailalerts modul sebezhetősége, így aztán kiemelten szeretnék ezzel az üggyel is foglalkozni. Nem lepne meg, ha 1 héten belül exponenciálisan nőne az ezzel kapcsolatos ügyletek száma – így hát nézzünk rá valamilyen megoldást!

prestashop_contact_form_problema

Amit én gondolok

Szerintem – eltérően a mailalerts-től – itt most a robotok nem egy kis biztonsági rést találtak a contact-form (kapcsolati űrlap, üzenetküldő) pajzsán, hanem egyszerűen csak ezzel a form-al kompatibilis, úgymond Prestashop-speciális hívásokat kezdeményeznek amit aztán SPAM-elésre használnak fel. Ha ez tényleg sokakat fog érinteni (ahogy vélem jelenleg) akkor biztosan érkezik (ha eddig esetleg nem érkezett volna meg) egy patch, egy fix, egy gyorskötözős megoldás – javítás ami befoltozza a lyukat; valószínűleg captcha formájában. Hogy ez mikor nyeri aktualitását és hogyan azt most még nem tudom, de nem is várom meg.

Mi az a captcha?

“A CAPTCHA a számítástechnikában olyan automatikus teszt, ami képes megkülönböztetni az emberi felhasználót a számítógéptől. A szó az angol Completely Automated Public Turing test to tell Computers and Humans Apart (am. teljesen automatizált nyilvános Turing-teszt a számítógép és az ember megkülönböztetésére) kifejezés rövidítése. A teszt során a számítógép generál egy feladványt, amit csak egy ember tud helyesen megválaszolni, de a válasz helyességét a gép is könnyedén el tudja dönteni.” – írja a WIKI.

forrás: wikipédia

forrás: wikipédia

Google-féle reCaptcha megoldás

A fenti képen is látható eltorzult-áthúzott betűk, számok, karakterek egyvelegére igen hamar érkeztek robot-megoldások, így aztán a Google elkészítette a reCaptcha névre hallgató “Nem vagyok robot” programját, mely ma az egyik legbiztonságosabb védelemnek számít a digitális világban.

hero-recaptcha-invisible

Védjünk reCaptchával!

Alapvetően két megoldás létezik a fenti prevenció telepítésére: Prestashop modul vagy kézi beépítés. Legjobb tudomásom szerint egy ingyenes modul van erre, fizetősök között EZT és EZT tudnám ajánlani. Mivel ezeket a pluginokat könnyű konfigurálni (bár kipróbáláskor nekem nem jól vagy egyáltalán nem működtek) ezért ebben a cikkben ezt nem tárgyalom; inkább építsük be kézzel!

Lépések

  • Google fiókunkkal bejelentkezve nyissuk meg az alábbi weboldalt: https://www.google.com/recaptcha/admin#list
    Itt láthatod felsorolva azokat a weboldalakat amikhez már tettél reCaptchát (ha volt ilyen). Újat felvenni a lenti “Register a new site” alatt tudsz: írd be a weboldalat nevét, dobj egy kiválasztást a “reCAPTCHA V2“-höz, majd lejjebb add meg a Prestashop-od domain nevét (például: peldaprestashop.hu – tehát http(s) tag nélkül). Alatta fogadd el a Google ÁSZF-ét és mehetünk tovább.

prestashop_recaptcha

  • A következő lépésben megkapjuk az oldalunk kulcsát (Site key) és a hozzá tartozó titkos kulcsot (Secret key) (modulos beállítás esetén fontosak). Alatta 1-1 sor kódot látunk: az első scriptet az oldalunk záró head tag-je elé kell tenni, a másodikat pedig abba a form-ba ahol a reCaptchát használni kívánjuk:

prestashop_google_recaptcha

  • Első kód: a script beültetése Prestashop 1.1.x.x – 1.6.x.x esetén: keresd meg FTP-n (vagy tárhelycommanderen/fájlkezelőn keresztül) a témád/templated/sablonod mappáját (/themes/tetémádneve/) azon belül pedig a header.tpl fájlt (példa: /themes/default-bootstrap/header.tpl) és keressünk rá a záró head tag-re (mondjuk a 71-es sor körül default-bootstrap téma esetén 1.6.x-ben): “</head>“:

prestashop_default_bootstrap_recaptcha_script

Majd itt a megtalált </head> elé szúrjuk be a Google által adott első scriptet (Mentés/backup legyen a header.tpl fájlról, ez minden módosításnál fontos!).

  • Második kód: a reCaptcha beépítése az üzenetküldő form-ba Prestashop 1.1.x.x – 1.6.x.x esetén: keresd ki szintén a témád könyvtárában a contact-form.tpl fájlt, majd keress rá a “</form>” szóra: a fenti “div”-el kezdődő kódsorodat pedig az elé illeszd be:

google_recaptcha_contact_form

Természetesen a form-on belül ennek helye opcionális, illetve bármikor alakíthatod ennek kinézetét/helyzetét CSS-el. Tehát ha sikerült, akkor az alábbihoz hasonló eredményt kell kapj:

recaptcha_google_prestashop_contact_form

Fontos, hogy teszteld!

Ennyi volt a beépítés, nem volt nehéz, ugye? 🙂 Ezáltal megszűnnek a SPAM-ek és mindenki boldog. Sok sikert kívánok!

Kiegészítés (2018.02.16.):

A megfelelő hibaüzenet visszajelzése érdekében az alábbi útvonalon lévő controllert is módosítani kell (itt meg kell jegyeznem, hogy a spam-elést okozó robotok már akkor visszafordulnak az oldalról, ha érzékelik a recaptcha jelenlétét; ez a magyarázata annak, hogy ilyen aspektusból a fentiek is elegek lehetnek): /controllers/front/ContactController.php

A “postProcess()” function-ben a “$this->errors[] = Tools::displayError('Invalid email address.');” sor után szúrjuk be az alábbi ellenőrzést:

} elseif (!($gcaptcha = (int)(Tools::getValue('g-recaptcha-response')))) {
$this->errors[] = Tools::displayError('Jelöld be alul, hogy nem vagy robot!');

Ahogy az alábbi képen is látszik (45-46. sor):

recaptcha_ellenorzes

A kiegészítést nagyon köszönjük Kövesi Zoltánnak a Facebook csoportunkból!

Kiegészítés (2018.04.12): Prestashop 1.7 esetén

Javarészt ugyanúgy működik minden, csupán a fájlok helye változik illetve a recaptcha bejelölését ellenőrző kód hibajelzésének sora. Lássuk!

Header rész: /themes/témádneve/templates/_partials/header.tpl

Itt most nem fogunk találni lezáró head-et, egyszerűen csak dobd  be a scriptet két block közé (tehát mondjuk az első “{/block}”  utáni sorba).

Contact-form rész: itt ez már modulként funkcionál, tehát először a téma könyvtárán belül keressük a tpl-jét => /themes/témádneve/modules/contactform/views/templates/widget/contactform.tpl

Ha nincs, akkor a helyén: /modules/contactform/views/templates/widget/contactform.tpl

Ellenőrző rész: ez szintén a modul php-jének a feladata most már, nem a class-é, tehát itt keressük: /modules/contactform/contactform.php

Itt azonban érdemes egy picit módosított kódot beszúrni (hely ugyanaz: “Invalid email address” után):

} elseif (!($gcaptcha = (int)(Tools::getValue('g-recaptcha-response')))) {
$this->context->controller->errors[] = $this->trans('Jelöld be alul, hogy nem vagy robot!', array(), 'Shop.Notifications.Error');

A második sor változik: igazodik az 1.7 hiba visszajelző szintaktikájához illetve a fent látható módon bele lehet tenni a fordításokba is.

Ha segített a cikk, meghívhatsz egy kávéra! 🙂


Puizl Attila Programozó

Az íróról: Puizl Attila

Puizl Attila vagyok, több éve készítek sikeres Webáruházakat Prestashop rendszerrel. Célom hogy a tudásom minőséggé, munkám pedig eredményessé váljon.

Weboldal: → Prestashop Készítés és Fejlesztés

Még megtalálsz:

Alapvetően a követési URL egy nagyon szuper dolog a Prestashop-ban. Amennyiben a szállítód csomagkövetése olyan URL-t használ, amiben megtalálható a csomagkövetési kód, akkor dinamikusan ki tudod küldeni az "egykattintásos" követési linket, aminek segítségével az ügyfél azonnal láthatja hol is tart a csomag a kiszállítási folyamatban. Példa a DPD-től: https://tracking.dpd.de/parcelstatus?query=3242342423 A…
Többször találkoztunk azzal, hogy 1.6.x.x upgrade után az alábbi hiba fogadja a vásárlót, ha e-mail-t szeretne küldeni: "Hiba történt az üzenet kiküldésekor." Alapvetően ilyenkor az Advanced Parameters => E-mail fül alatti beállításokat kell átnézni (lap alján tesztüzenet küldése) azonban itt most ez nem segít. Dióhéjban a probléma az, hogy a contact-form.tpl-ből hiányzik két…