Metode Melindungi Alamat Email dengan SVG, Digunakan sebagai Pengganti JavaScript

 (rouninmedia.github.io)
4 poin oleh GN⁺ 2024-05-14 | 1 komentar | Bagikan ke WhatsApp

  • Teknik perlindungan alamat email menggunakan SVG

    • Untuk demo nyata, lihat tautan SVG-based Email Protection
    • Alamat email yang dipublikasikan di halaman web biasanya perlu dilindungi dari bot pengumpul email
    • Sebelumnya, berbagai teknik dengan kombinasi HTML, CSS, dan JS telah digunakan, masing-masing dengan kelebihan dan kekurangan
    • Pendekatan yang menggunakan JS lebih canggih dibanding alternatif berbasis HTML/CSS, tetapi memiliki kelemahan karena JS menjadi elemen penting pada halaman tersebut
    • JS dapat meningkatkan halaman, tetapi idealnya semua fungsi penting halaman tetap bekerja meskipun JS dimatikan
    • Teknik yang diperkenalkan di halaman ini menggunakan pendekatan berbasis SVG yang sepenuhnya berbeda dari teknik perlindungan email yang sudah ada seperti CSS, JS, atau CSS+JS

  • Tiga keunggulan teknik perlindungan alamat email berbasis SVG

    1. Tetap berfungsi meskipun JavaScript dimatikan
      • Keunggulan utama pendekatan berbasis SVG adalah sama sekali tidak memerlukan JS
      • Meskipun pengunjung mematikan JS, alamat email yang ditampilkan di halaman tetap dapat digunakan dan diakses, sambil tetap terlindungi, aman, dan tersembunyi dari bot spam
    2. Dapat menggunakan tautan mailto: standar
      • Tidak seperti metode lain yang tidak memerlukan JS (penyisipan komentar HTML, penyembunyian elemen, dll.), metode berbasis SVG memungkinkan penggunaan tautan mailto: standar
      • Namun, tautan mailto: tersebut berada di dalam dokumen SVG eksternal, bukan di dalam dokumen HTML yang merujuknya
    3. Menyembunyikan isi seperti gambar tetapi tetap bisa disalin seperti teks
      • SVG yang di-embed mirip dengan gambar, tetapi bukan gambar
      • Sebagai elemen pengganti yang di-embed dalam dokumen hiperteks, SVG dapat menyembunyikan alamat email dari bot spam seefektif gambar
      • Namun, secara teknis SVG bukan gambar sungguhan, melainkan dokumen grafis
      • Karena itu, tidak seperti gambar, elemen `` pada SVG yang di-embed dapat diklik kanan untuk menyalin alamat email

  • Implementasi kode

    • Contohnya terdiri dari 2 file
    • Dokumen grafis SVG di-embed ke dalam dokumen hiperteks HTML menggunakan tag ``
    • Dokumen grafis SVG yang sama dapat di-embed sekali atau beberapa kali ke dalam hiperteks
    • Termasuk contoh kode untuk file HTML dan SVG

  • Pertimbangan aksesibilitas

    • Penting untuk memastikan pengaturan ini tetap seaksesibel mungkin
    • Untuk itu, perhatikan hal-hal berikut dalam dokumen grafis SVG:
      • Seluruh dokumen SVG diberi aria-labelledby oleh `` dokumen SVG untuk menunjukkan ajakan bertindak
      • Elemen anchor `` di dalam SVG memiliki aria-label yang melakukan ajakan bertindak yang sama
      • SVG diberi styling agar saat elemen anchor mendapat fokus tab, elemen anak dan `` keduanya ikut disorot

Pendapat GN⁺

  • Ini adalah pendekatan yang unik untuk menyembunyikan alamat email dari bot spam dengan meng-embed SVG dalam dokumen HTML tanpa ketergantungan pada JS. Terlihat sebagai teknik menarik yang mempertimbangkan aksesibilitas dan kegunaan sekaligus.
  • Namun, perlu diingat bahwa seberapa pun canggihnya teknologi frontend yang digunakan, bot spam paling canggih sekalipun tidak bisa diblokir sepenuhnya. Ini adalah keterbatasan yang berlaku pada solusi keamanan mana pun.
  • Untuk penerapan praktis teknik ini, tampaknya diperlukan verifikasi tambahan terkait dampaknya terhadap SEO, kompatibilitas di berbagai browser/perangkat, performa, dan lainnya.
  • Sebagai solusi backend untuk perlindungan email, pendekatan seperti reCAPTCHA dan teknik Honeypot juga layak dipertimbangkan.
  • Ini adalah metode menarik yang memanfaatkan fitur lanjutan CSS dan SVG, tetapi tampaknya masih ada keterbatasan untuk diterapkan dalam praktik kerja. Meski begitu, bagi developer frontend, ini tetap ide menarik yang layak diuji setidaknya sekali.

Bacaan terkait

1 komentar

 
GN⁺ 2024-05-14
Opini Hacker News

Singkatnya, pendapat tentang apakah alamat email yang dipublikasikan di halaman web perlu dilindungi dari bot spam adalah sebagai berikut:

  • Sudah lama mempublikasikan alamat email di situs web, tetapi filter spam bekerja dengan baik sehingga masalah spam tidak terlalu besar
  • Baik Gmail maupun webmail yang di-host oleh perusahaan lokal sama-sama memiliki penyaringan spam yang baik
  • Sekitar 15 email spam per hari memang masuk, tetapi berkat Purelymail, hal itu tidak menjadi masalah besar
  • Justru masalah yang sebenarnya adalah email transaksional yang tidak relevan, spam sampah newsletter, notifikasi dari jejaring sosial yang tidak digunakan, dan sebagainya
  • Belakangan ini filter spam bekerja dengan baik, jadi meskipun alamat email dipublikasikan, peningkatan spam tidak terlalu besar
  • Kurang dari 1 email spam per hari yang masuk ke kotak masuk masih merupakan tingkat yang dapat diterima
  • Ini bisa berbeda tergantung penyedia email dan filter spam, tetapi secara pribadi bukan masalah
  • Di Firefox dengan NoScript, tag <object> tidak dirender sehingga teknik ini tidak berfungsi
  • "Perlindungan email" bukan hanya tidak berarti, tetapi bahkan cenderung merugikan
  • Pada situs yang tetap dapat dibaca dengan baik tanpa JS, ada masalah 1920x1080@60Hz ditampilkan sebagai [email protected]