Cara Aman Membagikan Alamat Email Anda di Situs Web

Spammer adalah masalah besar saat ini. Jika Anda ingin membagikan informasi kontak Anda tanpa terbebani oleh email spam, Anda memerlukan solusi. Saya mengalami masalah ini beberapa bulan yang lalu. Ketika saya sedang meneliti bagaimana menyelesaikannya, saya menemukan solusi menarik yang berbeda. Hanya satu dari mereka yang sempurna untuk kebutuhan saya.

Pada artikel ini, saya akan menunjukkan kepada Anda cara mudah melindungi alamat email Anda dari bot spam dengan berbagai solusi. Terserah Anda untuk memutuskan teknik apa yang sesuai dengan kebutuhan Anda.

Kasus tradisional

Katakanlah Anda memiliki situs web. Anda ingin membagikan detail kontak Anda, dan Anda tidak ingin hanya membagikan tautan sosial Anda. Alamat email harus ada di sana. Mudah, kan? Anda mengetik sesuatu seperti ini:

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

Dan kemudian Anda menatanya sesuai selera Anda.

Yah, bahkan jika solusi ini berhasil, ia memiliki masalah. Itu membuat alamat email Anda tersedia untuk semua orang, termasuk perayap situs web dan semua jenis bot spam. Ini berarti bahwa kotak masuk Anda dapat dibanjiri dengan banyak sampah yang tidak diinginkan seperti penawaran promosi atau bahkan beberapa kampanye phishing.

Kami mencari kompromi. Kami ingin mempersulit bot untuk mendapatkan alamat email kami, tetapi sesederhana mungkin untuk pengguna biasa.

Solusinya adalah kebingungan.

Obfuscation adalah praktek membuat sesuatu yang sulit untuk dipahami. Strategi ini digunakan dengan kode sumber untuk berbagai alasan. Salah satunya adalah menyembunyikan tujuan kode sumber untuk mempersulit tampering atau reverse-engineering. Pertama-tama kita akan melihat solusi berbeda yang semuanya didasarkan pada gagasan kebingungan.

Pendekatan HTML

Kita dapat menganggap bot sebagai perangkat lunak yang menjelajahi web dan merayapi halaman web. Setelah bot mendapatkan dokumen HTML, bot akan menafsirkan konten di dalamnya dan mengekstrak informasi. Proses ekstraksi ini disebut kerokan web. Jika bot mencari pola yang cocok dengan format email, kita dapat mencoba menyamarkannya dengan menggunakan format yang berbeda. Misalnya, kita dapat menggunakan komentar HTML:

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

Terlihat berantakan, tetapi pengguna akan melihat alamat email seperti ini:

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

Pro:

• Mudah diatur.
• Ini bekerja dengan JavaScript dinonaktifkan.
• Itu dapat dibaca oleh teknologi bantu.

Cons:

• Bot spam dapat melewati urutan yang diketahui seperti komentar.
• Ini tidak bekerja dengan mailto: link.

Pendekatan HTML & CSS

Bagaimana jika kita menggunakan kekuatan gaya CSS untuk menghapus beberapa konten yang ditempatkan hanya untuk mengelabui bot spam? Katakanlah kita memiliki konten yang sama seperti sebelumnya, tapi kali ini kita menempatkan span elemen di dalam:

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

Kemudian, kami menggunakan aturan gaya CSS berikut:

span.blockspam {
  display: none;
}

Pengguna akhir hanya akan melihat ini:

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

…yang merupakan konten yang benar-benar kami pedulikan.

Pro:

• Ini bekerja dengan JavaScript dinonaktifkan.
• Lebih sulit bagi bot untuk mendapatkan alamat email.
• Itu dapat dibaca oleh teknologi bantu.

Dengan:

• Ini tidak bekerja dengan mailto: link.

Pendekatan JavaScript

Dalam contoh ini, kami menggunakan JavaScript untuk membuat alamat email kami tidak dapat dibaca. Kemudian, ketika halaman dimuat, JavaScript membuat alamat email dapat dibaca kembali. Dengan cara ini, pengguna kami bisa mendapatkan alamat email.

Solusi termudah menggunakan algoritma pengkodean Base64 untuk memecahkan kode alamat email. Pertama, kita perlu mengkodekan alamat email di Base64. Kami dapat menggunakan beberapa situs web seperti Base64Encode.org untuk melakukan ini. Ketik alamat email Anda seperti ini:

Kemudian, klik tombol untuk menyandikan. Dengan beberapa baris JavaScript ini, kami memecahkan kode alamat email dan mengatur href atribut di tautan HTML:

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

Maka kita harus memastikan tautan email menyertakan id="contact" di markup, seperti ini:

Send me an Email

Kami menggunakan atob metode untuk memecahkan kode string data yang disandikan Base64. Alternatifnya adalah dengan menggunakan beberapa algoritma enkripsi dasar seperti Sandi Caesar, yang cukup mudah diterapkan dalam JavaScript.

Pro:

• Lebih rumit bagi bot untuk mendapatkan alamat email, terutama jika Anda menggunakan algoritma enkripsi.
• Ia bekerja dengan mailto: link.
• Itu dapat dibaca oleh teknologi bantu.

Dengan:

• JavaScript harus diaktifkan di browser, jika tidak, tautan akan kosong.

Pendekatan formulir tertanam

Formulir kontak ada di mana-mana. Anda pasti pernah menggunakan salah satunya setidaknya sekali. Jika Anda menginginkan cara agar orang dapat langsung menghubungi Anda, salah satu solusi yang mungkin adalah menerapkan layanan formulir kontak di situs web Anda.

Formulir adalah salah satu contoh layanan yang memberi Anda semua manfaat formulir kontak tanpa mengkhawatirkan kode sisi server. Wufoo juga. Faktanya, di sini adalah banyak yang dapat Anda pertimbangkan untuk menangani pengiriman formulir kontak untuk Anda.

Langkah pertama untuk menggunakan layanan formulir apa pun adalah mendaftar dan membuat akun. Harga bervariasi, tentu saja, seperti halnya fitur yang ditawarkan antar layanan. Tetapi satu hal yang sebagian besar dari mereka lakukan adalah memberi Anda cuplikan HTML untuk menyematkan formulir yang Anda buat ke situs web atau aplikasi apa pun. Berikut ini contoh yang saya ambil langsung dari formulir yang saya buat di akun Formspring saya

   Your email:
    
  
   Your message:
    
  
  
  
  Send

Di baris pertama, Anda harus menyesuaikan action berdasarkan titik akhir Anda. Formulir ini cukup mendasar, tetapi Anda dapat menambahkan bidang sebanyak yang Anda inginkan.

Perhatikan tag input tersembunyi pada baris 9. Tag input ini membantu Anda memfilter kiriman yang dibuat oleh pengguna dan bot biasa. Faktanya, jika back-end Formspree melihat kiriman dengan input yang diisi, itu akan membuangnya. Pengguna biasa tidak akan melakukan itu, jadi itu pasti bot.

Pro:

• Alamat email Anda aman karena tidak bersifat publik.
• Ini bekerja dengan Javascript dinonaktifkan.

Dengan:

• Mengandalkan layanan pihak ketiga (yang mungkin pro, tergantung kebutuhan Anda)

Ada satu kelemahan lain untuk solusi ini tetapi saya meninggalkannya dari daftar karena ini cukup subjektif dan itu tergantung pada kasus penggunaan Anda. Dengan solusi ini, Anda tidak membagikan alamat email Anda. Anda memberi orang cara untuk menghubungi Anda. Bagaimana jika orang ingin untuk mengirimi Anda email? Bagaimana jika orang mencari alamat email Anda, dan mereka tidak menginginkan formulir kontak? Formulir kontak mungkin merupakan solusi yang sulit dalam situasi semacam itu.

Kesimpulan

Kami mencapai akhir! Dalam tutorial ini, kami berbicara tentang berbagai solusi untuk masalah berbagi email online. Kami berjalan melalui ide-ide yang berbeda, yang melibatkan kode HTML, JavaScript dan bahkan beberapa layanan online seperti Formspree untuk membangun formulir kontak. Di akhir tutorial ini, Anda harus mengetahui semua pro dan kontra dari strategi yang ditampilkan. Sekarang, terserah Anda untuk memilih yang paling cocok untuk kasus penggunaan spesifik Anda.