Keamanan Website Praktis
Alamat Email Mudah Diklik, tetapi Jangan Terlalu Mudah Dipanen Bot
Tautan mailto: memudahkan calon pelanggan menghubungi bisnis.
Masalahnya, alamat yang ditulis utuh pada HTML juga mudah dikenali oleh
scraper. Dua teknik berikut dapat menambah hambatan tanpa menghilangkan
pengalaman pengguna—selama kita memahami bahwa keduanya adalah
obfuscation, bukan perlindungan mutlak.
Ringkasan: gunakan HTML character references jika Anda membutuhkan solusi ringan tanpa JavaScript. Gunakan perakitan alamat saat interaksi jika ingin menghindari alamat utuh pada source HTML awal. Untuk risiko lebih tinggi, jangan publikasikan alamat sama sekali: arahkan pengunjung ke formulir kontak yang dilindungi anti-spam, lalu gunakan alias email khusus agar alamat utama tidak terekspos.
Email publik merupakan pintu masuk penting bagi penjualan, dukungan teknis, dan kemitraan. Tautan HTML membuat prosesnya sederhana: pengunjung mengeklik teks, aplikasi email bawaan terbuka, kemudian alamat penerima dan subjek dapat terisi otomatis. Skema tersebut distandardisasi melalui RFC 6068 dan didukung oleh elemen anchor HTML.
Kemudahan yang sama juga menguntungkan bot. Scraper dapat mencari pola
seperti nama@domain.tld, membaca nilai href yang
dimulai dengan mailto:, atau merender JavaScript terlebih dahulu.
OWASP menggolongkan scraping sebagai ancaman otomatis berupa pengumpulan
konten atau data yang dapat diakses untuk digunakan di tempat lain.
Mengapa Link Email HTML Mudah Dipanen?
Contoh paling umum adalah anchor yang memiliki skema mailto:.
Selain alamat penerima, tautan dapat membawa parameter seperti
subject, body, dan cc. Contoh berikut
nyaman bagi manusia, tetapi alamatnya terlihat dua kali: pada teks tautan
dan pada atribut href.
Contoh yang mudah dibaca scraper
<a href="mailto:hello@example.com?subject=Pertanyaan%20Umum">
hello@example.com
</a>
Mengganti teks menjadi “Pertanyaan Umum” hanya menghapus satu kemunculan.
Jika href masih berisi mailto:hello@example.com, bot
tetap dapat menemukannya.
Teks disembunyikan, tetapi alamat masih ada di href
<a href="mailto:hello@example.com?subject=Pertanyaan%20Umum">
Pertanyaan Umum
</a>Prinsip dasarnya: jika alamat email publik dikirim ke browser—sebagai teks, atribut, data JavaScript, atau respons API—pihak yang cukup tekun pada akhirnya dapat membacanya. Tujuan dua metode ini adalah menurunkan keberhasilan scraper sederhana, bukan membuat alamat menjadi rahasia.
Cara 1: Mengubah Karakter Menjadi HTML Character References
HTML character reference adalah notasi untuk mewakili karakter lain pada
halaman. Misalnya, huruf h memiliki code point desimal 104,
sehingga dapat ditulis sebagai h. Browser akan
menampilkan karakter yang sama kepada pengunjung.
Kita dapat mengubah setiap karakter pada nilai mailto: dan
teks alamat menjadi entity desimal atau heksadesimal. Scraper yang hanya
mencari pola alamat pada source mentah dapat gagal menemukannya.
Contoh encoding lengkap
<a href="mailto:hello@example.com">
hello@example.com
</a>Cara membuat entity tanpa alat pihak ketiga
Buka DevTools browser, pilih tab Console, lalu jalankan fungsi berikut.
Masukkan nilai mailto: lengkap atau alamat email saja. Jangan
memasukkan data rahasia ke situs encoder yang tidak Anda percaya.
Generator entity desimal di browser
function encodeAsHtmlEntities(value) {
return Array.from(value)
.map(function (character) {
return "&#" + character.codePointAt(0) + ";";
})
.join("");
}
var mailtoValue =
"mailto:hello@example.com?subject=" +
encodeURIComponent("Pertanyaan Umum");
console.log(encodeAsHtmlEntities(mailtoValue));Langkah implementasi di Blogspot
- Buka postingan, halaman, atau gadget HTML/JavaScript yang memuat email. Simpan salinan kode sebelum mengubahnya.
- Encode seluruh nilai
mailto:. Jika alamat juga ingin terlihat, encode teks alamat secara terpisah. - Tempel melalui mode HTML, bukan mode Compose. Editor visual dapat menormalisasi atau mendekode kembali entity.
- Simpan, buka halaman publik, lalu klik tautannya. Pastikan aplikasi email terbuka dengan penerima dan subjek yang benar.
- Buka View Page Source dan cari alamat utuh. Jika masih ditemukan, periksa footer, schema, script, komentar, serta widget lain.
Kelebihan
- Tidak bergantung pada JavaScript.
- Pengunjung tetap dapat mengeklik dan menyalin alamat.
- Mudah diterapkan pada halaman statis dan gadget Blogspot.
Keterbatasan
- Parser HTML dapat mendekode entity secara otomatis.
- Alamat akan terlihat pada DOM hasil parsing.
- Tidak efektif terhadap scraper yang memahami character references.
Kesimpulan metode pertama: entity encoding layak sebagai penghambat bot sangat sederhana, tetapi jangan menyebutnya enkripsi. Browser memang dirancang untuk mengubah character reference kembali menjadi karakter asli.
Cara 2: Merakit Alamat Email dengan JavaScript
Teknik kedua menghindari penulisan alamat secara utuh pada source HTML.
Contoh sederhana biasanya memecah email menjadi data-part1,
data-part2, dan data-part3, lalu menggabungkannya
setelah DOM selesai dimuat. Atribut data-* memang disediakan
HTML untuk menyimpan informasi tambahan yang dapat diakses melalui
properti dataset.
Versi dasar: memecah alamat menjadi beberapa bagian
<a class="protected-email"
href="/p/contact.html"
data-user="hello"
data-domain="example"
data-tld="com">
Pertanyaan Umum
</a>
Versi tersebut menghalangi pencarian pola email yang sangat dasar, tetapi
nama pengguna dan domain masih mudah dibaca. Untuk implementasi yang
sedikit lebih baik, simpan kedua bagian dalam urutan terbalik dan jangan
membuat mailto: saat halaman dimuat. Rakit alamat hanya ketika
pengunjung mengaktifkan tautan.
Versi yang disarankan untuk Blogspot atau footer PT MSP
<a
class="msp-email-protected"
href="https://www.msp.web.id/p/contact.html"
data-user-rev="selas"
data-host-rev="di.bew.psm"
data-subject="Permintaan informasi layanan PT MSP"
data-body="Hai PT MSP, saya ingin bertanya mengenai:"
title="Kirim email kepada Divisi EB PT MSP"
aria-label="Kirim email kepada Divisi EB PT MSP">
Kirim email ke Divisi EB MSP
</a>
<script>
(function () {
"use strict";
function reverse(value) {
return String(value || "").split("").reverse().join("");
}
function initializeProtectedEmailLinks() {
var links = document.querySelectorAll("a.msp-email-protected");
links.forEach(function (link) {
if (link.dataset.emailReady === "true") {
return;
}
link.dataset.emailReady = "true";
link.addEventListener("click", function (event) {
event.preventDefault();
var address =
reverse(link.dataset.userRev) +
"@" +
reverse(link.dataset.hostRev);
var parameters = [];
if (link.dataset.subject) {
parameters.push(
"subject=" + encodeURIComponent(link.dataset.subject)
);
}
if (link.dataset.body) {
parameters.push(
"body=" + encodeURIComponent(link.dataset.body)
);
}
var mailtoUrl = "mailto:" + address;
if (parameters.length) {
mailtoUrl += "?" + parameters.join("&");
}
window.location.href = mailtoUrl;
});
});
}
if (document.readyState === "loading") {
document.addEventListener(
"DOMContentLoaded",
initializeProtectedEmailLinks
);
} else {
initializeProtectedEmailLinks();
}
}());
</script>Mengapa contoh ini lebih aman dan lebih ramah pengguna?
- Alamat utuh tidak dikirim sebagai teks maupun
href="mailto:..."pada HTML awal. - Bagian pengguna dan host dibalik sehingga tidak langsung cocok dengan pola alamat email umum.
- Nilai
mailto:baru terbentuk setelah klik, bukan otomatis setelah halaman dimuat. encodeURIComponent()menangani spasi dan karakter khusus pada subjek atau isi pesan.- Jika JavaScript gagal atau dinonaktifkan,
hreftetap mengarah ke halaman Contact Us—pengunjung tidak menemui tautan kosong. - Pemeriksaan
data-email-readymencegah event listener dipasang berulang kali oleh tema atau widget.
Tetap bukan perlindungan penuh. Google menjelaskan bahwa crawler modern dapat merender JavaScript, dan scraper berbasis browser otomatis juga dapat menjalankan atau menganalisis kode. Teknik ini terutama menghambat bot yang hanya membaca source HTML dan pola email sederhana.
Jika ada beberapa alamat dalam satu halaman
Gunakan class yang sama pada setiap link, tetapi berikan pasangan
data-user-rev dan data-host-rev yang berbeda.
Script di atas otomatis memproses seluruh elemen yang cocok. Letakkan
script sekali saja setelah seluruh link, bukan diulang pada setiap kartu.
Panduan Implementasi Khusus Blogspot
A. Untuk email pada gadget footer
- Buka Tata Letak, cari gadget footer yang memuat profil dan kontak perusahaan, lalu pilih Edit.
- Temukan anchor email lama yang memakai
href="mailto:...". - Ganti anchor tersebut dengan elemen
msp-email-protecteddari contoh di atas. Pertahankan class visual footer yang sudah digunakan apabila diperlukan. - Tempel blok
<script>satu kali di bagian paling bawah gadget, setelah struktur HTML selesai ditutup. - Simpan dan uji pada desktop serta perangkat mobile. Jangan meletakkan script di dalam anchor atau di antara tag penutup yang salah.
B. Untuk link email di dalam postingan
Blogger dapat memformat ulang markup ketika berpindah antara mode HTML dan Compose. Selesaikan seluruh penyuntingan teks dahulu, lalu masukkan snippet melalui mode HTML sebagai langkah terakhir. Setelah itu, hindari membuka kembali bagian tersebut melalui editor visual jika tidak diperlukan.
C. Untuk template XML
Jika snippet dimasukkan langsung ke template XML, karakter ampersand pada
source XML harus ditulis sebagai &. Di dalam kode
JavaScript, ekspresi seperti parameters.join("&") pada HTML
biasa perlu menjadi parameters.join("&") dalam template
XML. Selalu lakukan backup tema sebelum menyimpan.
Untuk web PT MSP: metode JavaScript lebih sesuai bagi gadget footer karena alamat tidak perlu ditampilkan sebagai teks. Pertahankan halaman Contact Us sebagai fallback dan jalur utama bagi pengunjung yang tidak memiliki aplikasi email default.
Cara Menguji Apakah Implementasi Benar
Pengujian harus dilakukan pada source mentah, DOM hasil rendering, dan pengalaman pengguna. Hasil bagus pada satu lapisan belum berarti alamat tidak muncul di lapisan lain.
- Uji klik: pastikan aplikasi email terbuka, alamat penerima benar, dan karakter pada subjek maupun body tidak rusak.
- Periksa source: gunakan View Page Source, lalu cari alamat lengkap, domain email, dan teks
mailto:. - Periksa DOM: buka DevTools → Elements. Pada entity encoding, alamat biasanya sudah terdekode. Pada metode click-time, href seharusnya tetap halaman kontak sebelum diklik.
- Matikan JavaScript: tautan harus tetap membawa pengunjung ke halaman Contact Us, bukan menjadi tombol mati.
- Uji keyboard: tekan Tab sampai tautan mendapat fokus, kemudian Enter. Pastikan fungsi sama seperti klik mouse.
- Cek perangkat: uji Chrome/Edge desktop serta Android atau iOS karena aplikasi email default dapat berbeda.
- Cari duplikasi: alamat mungkin masih terbuka pada schema JSON-LD, footer lama, halaman privasi, atau JavaScript lain.
Pemeriksaan source melalui terminal
curl -L -s "https://www.contoh-domain.id/halaman" \
| grep -Eio '[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}'Jika perintah menghasilkan alamat email, berarti alamat masih terdapat pada respons HTML awal. Hasil kosong hanya membuktikan pola tersebut tidak ditemukan pada source yang diunduh—bukan bahwa alamat mustahil diekstrak setelah JavaScript berjalan.
Perbandingan Dua Metode dan Alternatifnya
Pada tablet dan mobile, geser tabel ke kanan atau kiri untuk membaca seluruh kolom.
| Metode | Alamat utuh di source awal | Butuh JavaScript | Kenyamanan pengguna | Kekuatan relatif | Catatan |
|---|---|---|---|---|---|
| HTML entity encoding | Tidak dalam bentuk biasa | Tidak | Baik | Rendah | Mudah didekode parser HTML. |
| JavaScript split/reverse saat klik | Tidak | Ya | Baik jika ada fallback | Rendah–menengah | Dapat dibongkar crawler yang menjalankan JavaScript. |
| Cloudflare Email Address Obfuscation | Diubah pada respons melalui Cloudflare | Ya pada sisi pengunjung | Baik | Menengah | Memerlukan traffic melalui proxy Cloudflare dan tetap bukan jaminan mutlak. |
| Formulir kontak tanpa email publik | Tidak | Tergantung implementasi | Sangat baik bila form ringkas | Paling kuat untuk menyembunyikan alamat | Endpoint form tetap perlu CAPTCHA, honeypot, validasi, dan rate limit. |
| Menulis “nama [at] domain [dot] id” | Secara semantik masih terbaca | Tidak | Kurang praktis | Rendah | Bot modern dapat menormalisasi pola umum. |
Lapisan Perlindungan yang Sebaiknya Ditambahkan
1. Jadikan formulir kontak sebagai jalur utama
Jika tujuan utama adalah menerima pertanyaan calon pelanggan, formulir lebih aman daripada memublikasikan alamat email. Gunakan field seperlunya, lakukan validasi di server, tambahkan honeypot, rate limiting, dan CAPTCHA jika volume spam meningkat. reCAPTCHA dirancang untuk membantu melindungi situs dari aktivitas penipuan, spam, dan penyalahgunaan, tetapi CAPTCHA juga bukan satu-satunya kontrol.
2. Gunakan alias email khusus website
Jangan tampilkan mailbox personal atau alamat administrator. Buat alias berbasis fungsi—misalnya untuk permintaan web, pengadaan, atau dukungan—dan arahkan alias tersebut ke sistem tiket atau mailbox bersama. Jika alias mulai menerima terlalu banyak spam, alamat dapat diganti tanpa mengubah mailbox utama.
3. Aktifkan Cloudflare Email Address Obfuscation bila tersedia
Cloudflare menyediakan Email Address Obfuscation pada Scrape Shield.
Fitur ini mengubah alamat pada respons HTML dan memuat script decoder
dengan defer. Untuk domain Blogspot kustom, fitur baru dapat
memproses halaman jika permintaan web benar-benar melewati proxy
Cloudflare, bukan sekadar memakai DNS-only.
- Masuk ke dashboard Cloudflare dan pilih zone/domain.
- Buka Security Settings dan gunakan filter Client-side abuse.
- Pastikan Email Address Obfuscation aktif.
- Bersihkan cache, buka halaman melalui mode privat, lalu periksa source dan fungsi klik.
- Jika ada JavaScript kustom, uji kembali karena script decode Cloudflare berjalan sebelum event
DOMContentLoaded.
4. Tetap gunakan SPF, DKIM, DMARC, dan filter spam—untuk masalah yang berbeda
Kontrol autentikasi email tidak menyembunyikan alamat dari scraper. SPF, DKIM, dan DMARC membantu mengurangi pemalsuan domain serta meningkatkan kepercayaan terhadap email keluar. Filter spam dan aturan mailbox menangani pesan yang sudah masuk. Ketiganya melengkapi obfuscation, bukan menggantikannya.
5. Hindari solusi yang merusak aksesibilitas
- Gambar berisi alamat menyulitkan pembaca layar, pencarian, zoom teks, dan copy-paste.
- Pseudo-element CSS bukan elemen interaktif dan dapat sulit dipilih atau dibaca teknologi bantu.
unicode-bidiatau pembalikan visual dapat membuat hasil salinan menjadi terbalik.- Menonaktifkan text selection mengganggu pengguna dan tidak menghentikan bot yang membaca source.
Rekomendasi Implementasi untuk Perusahaan
Risiko rendah
Gunakan alias email publik, entity encoding, dan filter spam. Cocok bila kemampuan copy-paste alamat wajib dipertahankan.
Risiko menengah
Gunakan JavaScript click-time dengan halaman kontak sebagai fallback, ditambah Cloudflare obfuscation jika tersedia.
Risiko tinggi
Jangan publikasikan alamat. Gunakan form server-side, CAPTCHA/honeypot, rate limiting, sistem tiket, dan alias penerima internal.
Operasional berkelanjutan
Pantau spam, kebocoran alias, bounce, dan penyalahgunaan domain. Rotasi alias jika dibutuhkan dan dokumentasikan perubahan.
FAQ tentang Perlindungan Link Email HTML
Apakah HTML entity encoding benar-benar menyembunyikan email?
Tidak sepenuhnya. Entity encoding menghilangkan pola alamat pada source mentah, tetapi browser dan parser HTML dapat mendekodenya. Perlakukan sebagai penghambat bot sederhana, bukan enkripsi.
Apakah JavaScript lebih aman daripada entity encoding?
Biasanya sedikit lebih sulit bagi scraper statis, terutama jika alamat baru dirakit saat klik. Namun crawler berbasis browser dapat menjalankan JavaScript atau menganalisis pola data, sehingga hasilnya tetap bukan perlindungan mutlak.
Mengapa href tidak dibiarkan kosong?
Tautan kosong memberi pengalaman buruk ketika JavaScript gagal atau dinonaktifkan. Mengarahkannya ke halaman Contact Us mempertahankan fungsi dan aksesibilitas sebagai fallback.
Apakah menulis email dengan [at] dan [dot] sudah cukup?
Tidak. Pola tersebut sangat umum dan dapat dinormalisasi oleh scraper. Selain itu, pengunjung harus mengubahnya secara manual sebelum mengirim email.
Apakah alamat masih dapat muncul di Google setelah memakai JavaScript?
Bisa. Google dapat merender JavaScript, dan alamat mungkin juga muncul pada halaman lain, cache, schema, direktori, atau sumber eksternal. Obfuscation bukan instruksi noindex dan bukan mekanisme kerahasiaan.
Apakah Cloudflare dapat digunakan pada domain Blogspot?
Dapat dipertimbangkan pada domain kustom yang traffic HTTP/HTTPS-nya melewati proxy Cloudflare. Jika record hanya DNS-only atau respons tidak melewati Cloudflare, fitur transformasi HTML tidak dapat bekerja.
Apakah SPF, DKIM, dan DMARC mencegah alamat dipanen bot?
Tidak. Ketiganya berhubungan dengan autentikasi dan kebijakan email, bukan penyembunyian alamat di website. Tetap penting untuk membantu melawan spoofing dan menjaga reputasi pengiriman.
Apa pilihan terbaik untuk website perusahaan?
Gunakan formulir kontak sebagai jalur utama, alamat berbasis peran sebagai alias, kontrol anti-spam pada form, serta JavaScript atau Cloudflare sebagai lapisan tambahan bila email tetap harus dapat diklik.
Kesimpulan
Link email HTML memberi pengalaman yang cepat, tetapi setiap alamat publik tetap memiliki risiko dipanen. Entity encoding menawarkan implementasi paling ringan; JavaScript click-time menambah hambatan terhadap scraper statis. Tidak satu pun dapat menjamin alamat bebas spam.
Untuk website perusahaan, arsitektur yang lebih matang adalah kombinasi: formulir kontak sebagai jalur utama, alias email berbasis fungsi, obfuscation sebagai lapisan tambahan, perlindungan anti-bot pada form, autentikasi domain email, serta monitoring berkelanjutan. Dengan begitu, keamanan tidak mengorbankan kemudahan calon pelanggan untuk menghubungi perusahaan.
Sumber Referensi
- RFC Editor — RFC 6068: The mailto URI Scheme.
- MDN — Elemen anchor dan email links.
- MDN — HTML Character References.
- MDN — Penggunaan data attributes.
- MDN — DOMContentLoaded event.
- MDN — encodeURIComponent().
- Google Search Central — JavaScript SEO Basics.
- OWASP — OAT-011 Scraping.
- Cloudflare — Email Address Obfuscation.
- Google for Developers — reCAPTCHA.
Masih Bingung Memilih Metode yang Tepat?
Serahkan kebutuhan teknis website kepada Divisi EB PT Mitra Solusindo Pratama. Tim kami dapat membantu audit kemunculan alamat email, memperbaiki gadget atau template Blogspot, memasang formulir kontak, menerapkan proteksi anti-spam, dan menguji hasilnya sampai siap digunakan.
.aviv)