Ukrywanie znaczka Google reCAPTCHA v3 na stronie za pomocą CSSa i wynikający z tego dodatkowy obowiązek informacyjny

SPAM właściwie stał się naszą codziennością. I nie dotyczy to tylko skrzynek e-mail, ale również stron. SPAMerzy – zazwyczaj nie oni bezpośrednio, ale używane przez nich skrypty – nieustannie przeczesują internet w poszukiwaniu jakiegokolwiek miejsca, gdzie można by cokolwiek wypełnić. A nuż się uda i SPAM trafi na podatny grunt. Jednym z wektorów ataku są formularze na stronie internetowej. Sposobów ochrony jest sporo, a jednym z popularniejszych, a zarazem najskuteczniejszych jest mechanizm Google reCAPTCHA v3. Jego niewątpliwą zaletą jest też to, że choć zatrzymuje SPAM, to właściwie nie wpływa w żaden sposób na użytkownika, bo ten w większości przypadków może nawet nie wiedzieć, że reCAPCHA v3 chroni stronę.

Prawie niewidzialne Google reCAPTCHA v3 stoi na straży formularzy

Dzieje się tak dlatego, że w przeciwieństwie do wcześniejszych wersji (oraz innych rozwiązań tego typu), w przypadku reCAPTCHA v3 użytkownik strony zazwyczaj nie musi podejmować żadnych działań. Nie tylko nie musi rozwiązywać tekstowych łamigłówek, ale nawet nie musi – jak to było w reCAPTCHA v2 – zaznaczać pola „nie jestem robotem”. Jego zachowanie jest analizowane w tle i na tej podstawie jest podejmowana decyzja o tym, czy wyświetlić jakieś zadanie do rozwiązania (CAPTCHA), czy też nie. I zazwyczaj działa to na tyle skutecznie, że SPAM jest blokowany, a zwykły użytkownik nawet nie wiem, że chwile temu przeszedł test na to, czy nie jest automatem.

Przynajmniej w teorii nie wie, bo zgodnie z wymaganiami Google, na każdej stronie korzystającej z Google reCAPTCHA v3 musi pojawić się odpowiednia informacja. W standardzie jest mały kwadracik z prawym dolnym rogu strony:

Mnie to zazwyczaj nie przeszkadza, ale są sytuacje, gdy zachodzi potrzeba pozbycia się tego elementu. I ostatnio z takim zapytaniem zwróciła się do mnie czytelniczka.

Ukrywanie znaczka Google reCAPTCHA za pomocą CSSa

Pozorni sprawa jest prosta, bo nawet w dokumentacji Google dotyczącej reCAPTCHA jest podany gotowiec do wklejenia w pliku CSS odpowiedzialnym za wygląd strony (w przypadku WordPressa może to być też odpowiednia opcja w ustawieniach motywu, lub sekcja „dodatkowy CSS” w narzędziu personalizacji (WP-Admin -> Wygląd -> Dostosuj: Dodatkowy CSS)):

.grecaptcha-badge { visibility: hidden !important; }

I teoretycznie to wystarczy, bo po takim zabiegu faktycznie znaczek Google reCAPTCHA powinien przestać się wyświetlać.

Wymagania informacyjne

Google jednak w takiej sytuacji wymaga jednak innej metody poinformowania użytkownika, że na naszej stronie korzystamy z ich mechanizmy reCAPTCHA. W tym celu – jak podaje dokumentacja – w widocznym dla użytkownika miejscu trzeba dodać taki kod:

This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy" target="_blank">Privacy Policy</a> and <a href="https://policies.google.com/terms" target="_blank">Terms of Service</a> apply.

Lub w naszym języku:

Tę stronę chroni rozwiązanie reCAPTCHA. Obowiązuje <a href="https://policies.google.com/privacy" target="_blank">Polityka Prywatności</a> oraz <a href="https://policies.google.com/terms" target="_blank">Regulamin</a> Google.

Kod najlepiej umieścić np. tuż pod formularzem kontaktowym, który jest chroniony mechanizmem reCAPTCHA:

Choć jeśli kod odpowiedzialny za działanie reCAPTCHA jest wczytywany nie tylko na stronie z formularzem kontaktowym, to teoretycznie odpowiednia informacja też powinna się znaleźć na każdej stronie. Teoretycznie może to być stopka. Piszę teoretycznie, bo otwartym zostaje pytanie, czy oby w stopce będzie on – zgodnie z wymaganiami Google – odpowiednio widoczny dla użytkownika… ;-)