Jak bezpiecznie udostępnić swój adres e-mail na stronie internetowej?

Spamerzy to w dzisiejszych czasach ogromna sprawa. Jeśli chcesz udostępnić swoje dane kontaktowe bez przytłaczania spamem, potrzebujesz rozwiązania. Wpadłem na ten problem kilka miesięcy temu. Kiedy szukałem, jak go rozwiązać, znalazłem różne ciekawe rozwiązania. Tylko jeden z nich był idealny dla moich potrzeb.

W tym artykule pokażę, jak łatwo zabezpieczyć swój adres e-mail przed spamerami za pomocą wielu rozwiązań. Od Ciebie zależy, jaka technika będzie pasować do Twoich potrzeb.

Tradycyjny przypadek

Załóżmy, że masz stronę internetową. Chcesz udostępnić swoje dane kontaktowe i nie chcesz udostępniać tylko swoich linków społecznościowych. Musi tam być adres e-mail. Łatwe, prawda? Piszesz coś takiego:

<a href="mailto:[email protected]">Send me an Email

A potem stylizujesz go zgodnie ze swoimi upodobaniami.

Cóż, nawet jeśli to rozwiązanie działa, to ma problem. Dzięki temu Twój adres e-mail jest dostępny dosłownie każdemu, w tym robotom indeksującym witryny i wszelkiego rodzaju botom spamowym. Oznacza to, że Twoja skrzynka odbiorcza może być zalana tonami niechcianych śmieci, takich jak oferty promocyjne, a nawet kampanie phishingowe.

Szukamy kompromisu. Chcemy utrudnić botom dostęp do naszych adresów e-mail, ale w jak najprostszy sposób dla zwykłych użytkowników.

Rozwiązaniem jest zaciemnianie.

Obfuskacja jest praktyką robienia czegoś trudnego do zrozumienia. Ta strategia jest używana z kodem źródłowym z wielu powodów. Jednym z nich jest ukrywanie celu kodu źródłowego, aby utrudnić manipulację lub inżynierię wsteczną. Najpierw przyjrzymy się różnym rozwiązaniom, które opierają się na idei zaciemniania.

Podejście HTML

Możemy myśleć o botach jak o oprogramowaniu, które przegląda sieć i przemierza strony internetowe. Gdy bot uzyska dokument HTML, interpretuje jego zawartość i wydobywa informacje. Ten proces ekstrakcji nazywa się skrobanie sieci. Jeśli bot szuka wzorca pasującego do formatu e-maila, możemy spróbować go zamaskować, używając innego formatu. Na przykład możemy użyć komentarzy HTML:

If you want to get in touch, please drop me an email at [email protected]address.com

Wygląda na niechlujny, ale użytkownik zobaczy następujący adres e-mail:

If you want to get in touch, please drop me an email at [email protected]

Plusy:

• Łatwy w konfiguracji.
• Działa z wyłączonym JavaScript.
• Można go odczytać za pomocą technologii wspomagających.

Wady:

• Boty spamowe mogą pomijać znane sekwencje, takie jak komentarze.
• To nie działa z mailto: łącze.

Podejście HTML i CSS

Co się stanie, jeśli użyjemy mocy stylizacji CSS, aby usunąć niektóre treści umieszczone tylko w celu oszukania botów spamowych? Powiedzmy, że mamy taką samą treść jak poprzednio, ale tym razem umieszczamy a span element wewnątrz:

If you want to get in touch, please drop me an email at PLEASE GO AWAY! [email protected]address.com
.

Następnie stosujemy następującą regułę stylu CSS:

span.blockspam {
  display: none;
}

Użytkownik końcowy zobaczy tylko to:

If you want to get in touch, please drop me an email at [email protected]

…na czym nam naprawdę zależy.

Plusy:

• Działa z wyłączonym JavaScript.
• Botom trudniej jest uzyskać adres e-mail.
• Można go odczytać za pomocą technologii wspomagających.

con:

• To nie działa z mailto: łącze.

Podejście JavaScript

W tym przykładzie używamy JavaScript, aby nasz adres e-mail był nieczytelny. Następnie, gdy strona zostanie załadowana, JavaScript ponownie sprawi, że adres e-mail będzie ponownie czytelny. W ten sposób nasi użytkownicy mogą otrzymać adres e-mail.

Najłatwiejsze rozwiązanie wykorzystuje algorytm kodowania Base64 do dekodowania adresu e-mail. Najpierw musimy zakodować adres e-mail w Base64. Możemy korzystać z niektórych stron internetowych, takich jak Base64Encode.org aby to zrobić. Wpisz swój adres e-mail w ten sposób:

Następnie kliknij przycisk, aby zakodować. Za pomocą tych kilku linijek JavaScript dekodujemy adres e-mail i ustawiamy href atrybut w łączu HTML:

var encEmail = "ZW1haWxAYWRkcmVzcy5jb20=";
const form = document.getElementById("contact");
form.setAttribute("href", "mailto:".concat(atob(encEmail)));

Następnie musimy upewnić się, że link e-mail zawiera id="contact" w znacznikach, tak:

Send me an Email

Używamy atob metoda dekodowania ciągu danych zakodowanych w Base64. Alternatywą jest użycie podstawowego algorytmu szyfrowania, takiego jak Szyfr Cezara, który jest dość prosty do zaimplementowania w JavaScript.

Plusy:

• Boty mogą trudniej uzyskać adres e-mail, zwłaszcza jeśli używasz algorytmu szyfrowania.
• Działa z mailto: łącze.
• Można go odczytać za pomocą technologii wspomagających.

con:

• JavaScript musi być włączony w przeglądarce, w przeciwnym razie link będzie pusty.

Podejście z wbudowanym formularzem

Formularze kontaktowe są wszędzie. Z pewnością przynajmniej raz użyłeś jednego z nich. Jeśli chcesz, aby ludzie mogli się z Tobą bezpośrednio kontaktować, jednym z możliwych rozwiązań jest wdrożenie usługi formularza kontaktowego na swojej stronie internetowej.

Formularze to jeden z przykładów usługi, która zapewnia wszystkie zalety formularza kontaktowego bez martwienia się o kod po stronie serwera. Wufoo jest też. Faktycznie, oto kilka, które możesz rozważyć do obsługi zgłoszeń z formularzy kontaktowych dla Ciebie.

Pierwszym krokiem do skorzystania z dowolnej usługi formularzy jest zarejestrowanie się i utworzenie konta. Ceny są oczywiście różne, podobnie jak funkcje oferowane między usługami. Jednak większość z nich udostępnia fragment kodu HTML, który umożliwia osadzenie utworzonego formularza w dowolnej witrynie lub aplikacji. Oto przykład, który wyciągnąłem prosto z formularza utworzonego na moim koncie Formspring

   Your email:
    
  
   Your message:
    
  
  
  
  Send

W pierwszej linii powinieneś dostosować action na podstawie Twojego punktu końcowego. Ten formularz jest dość prosty, ale możesz dodać tyle pól, ile chcesz.

Zwróć uwagę na ukryty znacznik wejściowy w wierszu 9. Ten znacznik wejściowy pomaga filtrować zgłoszenia dokonywane przez zwykłych użytkowników i boty. W rzeczywistości, jeśli zaplecze Formspree zobaczy zgłoszenie z wypełnionymi danymi wejściowymi, odrzuci je. Zwykły użytkownik by tego nie zrobił, więc to musi być bot.

Plusy:

• Twój adres e-mail jest bezpieczny, ponieważ nie jest publiczny.
• Działa z wyłączonym JavaScript.

con:

• Polega na usłudze innej firmy (która może być profesjonalistą, w zależności od Twoich potrzeb)

Jest jeszcze jedna wada tego rozwiązania, ale pominąłem je na liście, ponieważ jest dość subiektywne i zależy od przypadku użycia. Dzięki temu rozwiązaniu nie udostępniasz swojego adresu e-mail. Dajesz ludziom możliwość skontaktowania się z Tobą. Co jeśli ludzie chcieć wysłać Ci e-maila? Co zrobić, jeśli ludzie szukają Twojego adresu e-mail i nie chcą formularza kontaktowego? Formularz kontaktowy może być trudnym rozwiązaniem w takiej sytuacji.

Wnioski

Dotarliśmy do końca! W tym samouczku omówiliśmy różne rozwiązania problemu udostępniania poczty e-mail online. Przeszliśmy przez różne pomysły, wykorzystując kod HTML, JavaScript, a nawet niektóre usługi online, takie jak Formspree, do tworzenia formularzy kontaktowych. Pod koniec tego samouczka powinieneś być świadomy wszystkich zalet i wad przedstawionych strategii. Teraz od Ciebie zależy, czy wybierzesz najbardziej odpowiedni dla Twojego konkretnego przypadku użycia.