Perlindungan alamat email melalui SVG, digunakan sebagai pengganti JavaScript

• Agar alamat email publik tetap tersembunyi dari pengumpulan oleh bot spam sambil tetap memungkinkan pengunjung menghubungi secara langsung, metode ini menempatkan teks email dan tautan mailto: di dalam SVG
• Perlindungan berbasis JavaScript bisa lebih canggih, tetapi ada beban karena fungsi kontak itu sendiri menjadi memiliki ketergantungan pada JS
• Pendekatan ini menyisipkan dokumen SVG eksternal ke HTML dengan tag dan menempatkan tautan sebenarnya pada elemen di dalam SVG, bukan di HTML
• SVG memberi efek menyembunyikan isi seperti gambar, tetapi karena menggunakan elemen ``, pengunjung tetap bisa menyalin alamat email tersebut
• Ini bukan solusi untuk menghentikan bot spam yang canggih, tetapi berguna untuk mengurangi risiko terekspos ke skrip pengumpul email sederhana

---

Cara menyembunyikan alamat email dengan SVG

• Alamat email publik mudah terekspos ke bot spam pengumpul email, sehingga memerlukan mekanisme perlindungan
• Teknik perlindungan yang umum biasanya menggabungkan HTML, CSS, dan JavaScript, tetapi penggunaan JavaScript membuat fungsi kontak terikat pada lingkungan eksekusi wajib halaman
• Metode SVG menangani tampilan email dan perilaku tautan tanpa menggunakan JavaScript sama sekali
• Bahkan jika JavaScript dimatikan, pengunjung tetap bisa menggunakan alamat email yang ditampilkan di halaman, sementara bagi bot spam alamat itu lebih tidak terekspos secara langsung dibanding teks HTML biasa
• Seperti teknik perlindungan berbasis frontend lainnya, ini tidak dapat sepenuhnya melindungi alamat email publik dari bot spam yang gigih dan canggih
• Demo langsung: SVG-based Email Protection

Implementasi HTML dan SVG

• Dokumen HTML menyisipkan file SVG eksternal dengan tag ``

• Dokumen grafis SVG yang sama bisa disisipkan satu kali atau beberapa kali di dalam HTML
• Contoh HTML menetapkan gaya width: 180px, height: 24px, vertical-align: middle pada kelas .svg-email-protection, lalu memuat file SVG di isi halaman dengan tag ``
• File SVG adalah dokumen `` dengan viewBox="0 0 200 24", dan di dalamnya ditempatkan teks email serta tautan mailto:[e-mail]
  • Di dalam terdapat dan ``
  • `` menampilkan [e-mail]
  • Pada status rect:hover dan a:focus, gaya warna latar, warna teks, ketebalan, garis bawah, dan bayangan berubah

Aksesibilitas dan referensi

• Seluruh dokumen SVG menggunakan aria-labelledby yang merujuk ke , dan di dalam SVG memiliki aria-label dengan ajakan bertindak yang sama
• Saat fokus tab keyboard mencapai anchor di dalam SVG, dan sama-sama disorot untuk menampilkan status fokus
• Materi terkait:
  • Hacker News discussion
  • CSS Tricks article
  • Stack Overflow discussion

[GN⁺]

Komentar Hacker News

• Saya agak ragu apakah memang begitu

  • Benar. Saya ingat pada awal 2000-an, jika memasang email di web, spam memang bertambah, dan teknik obfuscation email juga cukup membantu
    Namun secara pribadi, sejak sekitar 2015 hal itu sama sekali tidak lagi membuat perbedaan, bahkan spam yang perlu difilter pun tidak bertambah
    Sekarang perusahaan bisa menjual daftar pengguna, atau orang bisa membeli daftar email raksasa hasil pembobolan server, jadi menyapu web untuk mengumpulkan email hampir menjadi cara yang paling tidak efisien untuk mengirim spam
  • Saya menaruh alamat email apa adanya di footer dua situs web yang dibuat tahun lalu, dan keduanya belum menerima satu pun spam selama ini
    Kedua situs punya ribuan pengunjung, dan merupakan situs populer yang dirayapi mesin pencari serta bot AI
  • Persis sama pendapat saya. Sebaliknya, alamat email yang saya pakai di Usenet sekitar 1999–2001 sampai sekarang masih terus dibanjiri spam
    Alamat email yang saya pasang di situs web bahkan tidak masuk ke folder spam
    Beberapa milis tampaknya membuat alamat Gmail dengan menebak seperti serangan kamus, memakai format FIRSTNAME.LASTNAME atau kombinasi 1–10 karakter
    Meski begitu, spam yang masuk ke alamat [e-mail] sangat sedikit, kira-kira satu email per tahun
    Secara keseluruhan jumlah spam email juga jauh berkurang, dan spam yang beredar sekarang sepertinya campuran penipu 419 dan calon penipu yang tertipu membeli daftar email berumur 20 tahun
  • Obfuscation alamat email terasa seperti peninggalan masa lalu. Secara metodologis sebenarnya tidak pernah benar-benar kuat, tapi menyebar, dan sepertinya terus bertahan seperti semacam kultus kargo
  • Secara pribadi, meskipun spam tidak terlihat oleh saya, jika memungkinkan saya lebih suka email saya tidak dikumpulkan
    Saya tidak mengatakan ini masalah privasi atau keamanan yang serius, tetapi ini soal preferensi

• Domain saya adalah .com yang sudah terdaftar 24 tahun, dan alamat emailnya dipasang apa adanya di tag H3 paling atas halaman pertama
  Spam ke alamat ini bukan masalah. Termasuk folder junk, sekitar 15 per hari, dan berkat Purelymail semuanya baik-baik saja
  Masalah sebenarnya adalah email transaksional yang tidak terkait transaksi, email promosi bergaya newsletter, dan jejaring sosial yang terus mengirim notifikasi karena saya tidak memakainya

  • 15 spam per hari tampaknya cukup banyak. Kalau saya mungkin sudah memblokir alamatnya bahkan dengan jumlah lebih sedikit dari itu
  • Yang paling besar adalah “jejaring sosial yang mengeluh karena tidak dipakai”. Email dari Facebook yang meminta saya login hampir lebih banyak daripada spam lain
    Sudah sekitar 7 tahun sejak saya tidak memakai akunnya, seharusnya mereka sudah bisa menyadarinya
  • Saya punya beberapa domain lama yang didaftarkan pada akhir 90-an, dan di sebagian masih ada email saya dalam mailto
    Di beberapa tempat hampir tidak ada spam, di tempat lain masuk puluhan per hari. SpamAssassin sangat baik melakukan caching spam

• Berbeda dengan pernyataan bahwa “meskipun pengunjung mematikan JavaScript, alamat email yang ditampilkan di halaman tetap bisa digunakan”, pengaturan default NoScript di Firefox tidak merender tag tersebut dan menggantinya dengan placeholder, jadi teknik ini tidak bekerja di sini
  https://imgur.com/2tCAgAf

  • uBlock Origin juga bisa memblokir JavaScript. Ada tombol yang praktis di menu ekstensi
  • Itu topik yang berbeda, jadi saya kurang paham kenapa poin ini dibawa ke sini
  • Di Chromium juga sama

• Tidak ada alasan teknik ini sendiri tidak bisa dibuat aksesibel, tetapi contoh di tulisannya benar-benar buruk
  Tulisan itu memberi label “Email us!” pada elemen svg dan a, sehingga alamat email sebenarnya disembunyikan dari screen reader
  Penggunaan label aria seperti ini adalah praktik yang sangat buruk. Kecuali ada alasan yang sangat khusus, pengguna screen reader seharusnya mendapat pengalaman yang sama dengan orang lain, dan jika Anda merasa alasannya cukup kuat, biasanya kemungkinan besar Anda keliru
  Cara yang benar adalah memasukkan alamat email sebenarnya ke dalam label

  • Bukankah inti pekerjaan ini justru tidak memasukkan alamat email dalam format yang dapat dibaca mesin ke dalam dokumen?
  • Ini juga bisa memengaruhi perangkat lunak dikte suara seperti Dragon
    Jika pengguna mengatakan “Click [e-mail]”, browser bisa mengekspos teks tautan sebagai “Email us”, sehingga tautannya mungkin tidak aktif
    Namun saya tidak tahu apakah Dragon bisa mengaktifkan tautan di dalam SVG

• Saya melakukannya seperti ini: [e-mail]
  Saya tetap menerima “spam”, tetapi karena berupa penawaran B2B yang sangat sesuai dengan topik situs, sepertinya dikumpulkan manual oleh manusia

  • Jika scraper memakai headless browser, tampaknya cara ini bisa dilewati
    Namun menjalankan headless browser untuk mengumpulkan email biayanya relatif besar, jadi spam itu mungkin bukan berasal dari situs tersebut

• Seperti yang sudah dikatakan orang lain, “melindungi” email bukan hanya tidak ada gunanya, tetapi juga bisa benar-benar merugikan
  Ada cukup banyak situs yang sebagian besar isinya tetap terbaca dengan baik tanpa JavaScript, tetapi string seperti “1920x1080@60Hz” justru ditampilkan secara harfiah sebagai “[email protected]”

  • Ada contoh yang bisa langsung dilihat? Kedengarannya terlalu absurd, tapi saya belum pernah melihatnya

• Saya bertanya-tanya apakah hal seperti ini benar-benar ada gunanya. Ini eksperimen yang menarik, tetapi kalau tujuannya menghindari spammer, ini sepenuhnya buang-buang waktu
  Ini seperti memublikasikan informasi ke seluruh dunia tetapi entah bagaimana berharap hanya “orang baik” yang bisa mengaksesnya
  Kecuali Anda mengganti alamat email setidaknya setiap bulan, begitu seseorang meneruskan kontak itu ke orang lain, memasukkannya ke database/CRM, atau satu layanan saja diretas, alamat itu akan masuk daftar dan akhirnya menyebar ke spammer di seluruh dunia
  Jika Anda terus memakai email itu, peluang hal ini terjadi pada dasarnya bisa dianggap mendekati 100%
  Kalau menyembunyikan email dari scraper benar-benar efektif, spam tidak akan ada. Saya tidak pernah memublikasikan kontak pribadi saya di mana pun, tetapi tetap menerima puluhan spam per minggu; semuanya tersaring sebagai spam, jadi bukan masalah besar

• Teman saya benar-benar jago, dan ia membuat semacam gambar responsif dengan SVG yang berisi JavaScript
  Gambarnya beradaptasi secara terprogram sesuai ukuran, dan itu cukup menarik
  Fakta bahwa JavaScript bisa dimasukkan ke dalam SVG sendiri terasa masih kurang dimanfaatkan sekaligus agak berbahaya

  • Bukankah SVG pada dasarnya sudah responsif? Saya kurang paham JavaScript di dalam SVG membantu apa
  • Sangat menarik. Kalau teman itu punya GitHub atau situs yang menunjukkan pekerjaan ini, bisakah Anda membagikan tautannya
    Saya engineer backend, jadi secara teknis ini cukup jauh dari wilayah saya, tetapi terlihat sangat keren
  • Ini sudah cukup lama diketahui di komunitas keamanan

• Saya sudah menyerah dengan cara seperti ini. Filter spam sekarang cukup bagus, sehingga meskipun alamat email dipublikasikan tanpa obfuscation, spam tampaknya tidak bertambah
  Sumber spam lain, seperti perusahaan buruk yang memiliki email saya karena alasan sah lalu menjualnya ke pihak ketiga, adalah masalah terpisah
  Umumnya spam yang masuk ke inbox kurang dari 1 per hari, dan itu masih bisa diterima
  Tentu ini bisa berbeda tergantung penyedia email dan filter spam, jadi tiap orang mungkin berbeda, tetapi bagi saya itu bukan masalah

• Email itu tetap ada sebagai teks polos di dalam dokumen XML yang dirujuk dari source halaman

  • Meski begitu, kalau dicari dengan cara seperti document.querySelectorAll('a'), hasilnya berbeda. Banyak teknik scraping memakai pendekatan seperti ini, jadi sebagai garis pertahanan pertama masih lumayan
    Namun ada headless browser untuk scraping, dan jika di atas halaman ia melakukan fetch ke URL saat ini lalu menerima teks polos dan mencari email dengan regex, alamatnya bisa didapat. Saya akui ini pendekatan yang cukup aneh
    [0]: fetch('./').then((res) => res.text()).then((text) => console.log(text))
  • Idenya adalah bot spam tidak akan mem-parsing SVG untuk mencari alamat email, dan hanya melihat HTML halaman
    Namun dalam lingkungan perlindungan spam modern, saya tidak yakin seberapa efektif ini sebenarnya
  • Rasanya seperti sesuatu yang tidak berguna tetapi dibungkus agar terlihat pintar