E-posta adresini SVG ile koruma yöntemi, JavaScript yerine kullanım

 (rouninmedia.github.io)
4 puan yazan GN⁺ 2024-05-14 | 1 yorum | WhatsApp'ta paylaş
  • Herkese açık e-posta adresini spam botlarının toplamasından gizlerken ziyaretçilerin doğrudan iletişime geçebilmesini sağlamak için, SVG içine e-posta metni ve mailto: bağlantısı yerleştiren bir yöntem kullanılıyor
  • JavaScript tabanlı koruma daha gelişmiş olabilir, ancak iletişim işlevinin kendisinin JS bağımlılığına sahip olması yük oluşturuyor
  • Bu yaklaşım, harici bir SVG belgesini HTML'e ile ekliyor ve gerçek bağlantıyı HTML yerine SVG içindeki öğesine koyuyor
  • SVG, bir görsel gibi içeriği gizleme etkisi sunarken `` öğesini kullandığı için ziyaretçi e-posta adresini kopyalayabiliyor
  • Gelişmiş spam botlarını durduran kusursuz bir çözüm olmasa da, basit e-posta toplama betiklerine maruz kalma riskini azaltmada faydalı

SVG ile e-posta adresini gizleme yöntemi

  • Herkese açık e-posta adresleri, e-posta toplayan spam botlarına kolayca maruz kalabildiği için koruma gerekir
  • Yaygın koruma teknikleri HTML, CSS ve JavaScript kombinasyonu kullanır; ancak JavaScript kullanıldığında iletişim işlevi sayfanın zorunlu çalışma ortamına bağlanır
  • SVG yöntemi, hiç JavaScript kullanmadan e-posta gösterimini ve bağlantı işlevini gerçekleştirir
  • JavaScript kapalı olsa bile ziyaretçiler sayfada gösterilen e-posta adresini kullanabilir ve adres, spam botlarına düz HTML metnine kıyasla daha dolaylı biçimde görünür
  • Diğer frontend tabanlı koruma tekniklerinde olduğu gibi, herkese açık e-posta adresini inatçı ve gelişmiş spam botlarına karşı tamamen koruyamaz
  • Canlı demo: SVG-based Email Protection

HTML ve SVG uygulaması

  • HTML belgesi, harici SVG dosyasını `` ile ekler
  • Aynı SVG grafik belgesi HTML içine bir veya birden fazla kez eklenebilir
  • Örnek HTML, .svg-email-protection sınıfına width: 180px, height: 24px, vertical-align: middle stillerini atar ve gövdede SVG dosyasını `` ile yükler
  • SVG dosyası, viewBox="0 0 200 24" olan bir `` belgesidir ve içinde e-posta metni ile mailto:myemail@mydomain.tld bağlantısını barındırır
    • içinde ve `` bulunur
    • `` üzerinde myemail@mydomain.tld görüntülenir
    • rect:hover ve a:focus durumlarında arka plan rengi, metin rengi, kalınlık, alt çizgi ve gölge stilleri değişir

Erişilebilirlik ve referanslar

  • SVG belgesinin tamamı, öğesini işaret eden `aria-labelledby` kullanır ve SVG içindeki öğesinde aynı harekete çağrıyı içeren bir aria-label bulunur
  • Klavye ile sekme odağı SVG içindeki bağlantıya ulaştığında, ve birlikte vurgulanarak odak durumu gösterilir
  • İlgili kaynaklar:

İlgili okumalar

1 yorum

 
GN⁺ 2024-05-14
Hacker News yorumları

  • Gerçekten öyle mi emin değilim

    • Evet. 2000'lerin başında web'e e-posta koyunca gerçekten spam artıyordu ve e-posta karartma tekniklerinin de epey faydası oluyordu diye hatırlıyorum
      Ama kişisel olarak bende bunun farkı yaklaşık 2015'ten sonra tamamen kayboldu; filtrelenecek spam bile artmadı
      Artık şirketler kullanıcı listelerini satabiliyor ya da sunucu ihlallerinden çıkmış devasa e-posta listeleri satın alınabiliyor; bu yüzden web'i tarayıp e-posta toplamak spam göndermenin neredeyse en verimsiz yolu
    • Geçen yıl yaptığım iki web sitesinin footer'ına e-posta adresini olduğu gibi koydum, ikisi de bugüne kadar tek bir spam bile almadı
      Her iki site de binlerce ziyaretçisi olan ve arama motorlarıyla yapay zeka botlarının kazıdığı popüler siteler
    • Ben de tamamen aynı fikirdeyim. Buna karşılık 1999~2001 civarında Usenet'te kullandığım e-posta adresine bugün bile düzenli olarak spam yağıyor
      Web sitesine koyduğum e-posta adreslerine ise spam klasörüne gidecek kadar bile gelmiyor
      Bazı posta listeleri sanki FIRSTNAME.LASTNAME biçimindeki ya da 1~10 karakter kombinasyonlu Gmail adreslerini sözlük saldırısı yapar gibi tahmin ederek üretiyor gibi görünüyor
      Yine de domain@domain.com adresine gelen spam yılda bir mesaj kadar, yani çok az
      Genel olarak e-posta spam hacmi de ciddi biçimde azaldı; şimdi gönderilen spam'ler daha çok 419 dolandırıcılarıyla 20 yıllık e-posta listeleri satın alıp kandırılmış hevesli dolandırıcıların karışımı gibi
    • E-posta karartma bana geçmişten kalma bir kalıntı gibi geliyor. Yöntem olarak hiçbir zaman çok sağlam değildi ama yayıldı; sonra da bir tür cargo cult gibi yaşamaya devam etti
    • Ben şahsen, spam gözle görünür olmasa bile mümkünse e-postamın toplanmamasını tercih ederim
      Bunu ciddi bir mahremiyet ya da güvenlik sorunu olarak gördüğümden değil, sadece bir tercih meselesi

  • Alan adım 24 yıldır kayıtlı bir .com ve e-posta adresi ana sayfanın en üstünde H3 etiketinde açıkça duruyor
    Bu adresin aldığı spam sorun değil. Purelymail sayesinde junk klasörü dahil günde yaklaşık 15 tane geliyor ve idare ediliyor
    Asıl sorun, işle ilgisiz işlemsel e-postalar, bülten tarzı tanıtım mailleri ve kullanmadığım halde sürekli bildirim yollayan sosyal ağlar

    • Günde 15 spam bana oldukça fazla görünüyor. Ben olsam daha azında bile adresi engellerdim
    • En büyüğü “kullanmadığın için şikayet eden sosyal ağlar”. Facebook'un giriş yap diye gönderdiği e-postalar neredeyse diğer bütün spam'lerden fazla
      Hesabı yaklaşık 7 yıldır kullanmıyorum; artık durumu anlamış olmaları gerekirdi
    • 90'ların sonunda kayıt ettirdiğim birkaç eski alan adım var ve bazılarında hâlâ mailto ile e-postam duruyor
      Bazılarında neredeyse hiç spam yok, bazılarında ise günde onlarca geliyor. SpamAssassin spam'i yakalamakta çok iyi iş çıkarıyor

  • “Ziyaretçi JavaScript'i kapatsa bile sayfada görünen e-posta adresini kullanmaya devam edebilir” denmiş ama Firefox'taki NoScript varsayılan ayarlarla etiketi render etmeyip yer tutucuya çevirdiği için bu teknik burada çalışmıyor
    https://imgur.com/2tCAgAf

    • uBlock Origin de JavaScript'i engelleyebiliyor. Eklenti menüsünde kullanışlı bir düğmesi var
    • O başka bir konu, bu noktayı neden gündeme getirdiğini pek anlayamadım
    • Chromium'da da aynısı oluyor

  • Tekniğin kendisinin erişilebilir olmaması için bir neden yok ama yazıdaki örnek gerçekten kötü
    Yazıda svg ve a öğesinin etiketi “Email us!” olarak verilmiş; böyle olunca gerçek e-posta adresi ekran okuyuculardan gizlenmiş oluyor
    Aria etiketlerinin bu şekilde kullanılması çok kötü bir pratik. Çok özel bir sebep olmadıkça ekran okuyucu kullanıcılarının da diğer insanlarla aynı deneyimi yaşaması gerekir; bu sebebin yeterince güçlü olduğunu düşünüyorsanız da büyük ihtimalle yanılıyorsunuzdur
    Doğru yöntem, etikete gerçek e-posta adresini koymak

    • Bu işin asıl amacı e-posta adresini belgenin içine makinenin okuyabileceği bir biçimde koymamak değil mi?
    • Dragon gibi sesle dikte yazılımları da bundan etkilenebilir
      Kullanıcı “Click myemail@mydomain.tld” dese bile tarayıcı bağlantı metni olarak “Email us” gösterdiği için link etkinleşmeyebilir
      Yine de Dragon'un SVG içindeki bağlantıyı etkinleştirip etkinleştiremeyeceğini bilmiyorum

  • Ben şöyle yapıyorum: reanospaml@maisjsl.com
    Yine de “spam” alıyorum ama bunlar sitenin konusuna tam uyan B2B teklifleri olduğu için muhtemelen bir insan tarafından elle toplanmış

    • Kazıyıcılar headless browser kullanıyorsa bu yöntemi aşabilir gibi görünüyor
      Yine de e-posta toplamak için headless browser çalıştırmanın maliyeti nispeten yüksek; dolayısıyla o spam siteden gelmiyor da olabilir

  • Başkalarının da dediği gibi e-postayı “korumak” sadece anlamsız değil, fiilen zararlı da
    JavaScript olmadan da içeriğin çoğu gayet okunuyor ama epey sitede “1920x1080@60Hz” gibi dizeler kelimenin tam anlamıyla “[email protected]” diye gösteriliyor

    • Hemen görülebilecek bir örnek var mı? Fazla saçma geliyor, hiç karşılaşmadım

  • Bunun gerçekten bir anlamı var mı emin değilim. Eğlenceli bir deney olabilir ama amaç spam'cilerden kaçmaksa tam bir zaman kaybı
    Bilgiyi bütün dünyaya açıkça yayıp bir şekilde yalnızca “iyi insanların” erişebilmesini beklemek gibi bir şey
    E-posta adresini en az ayda bir değiştirmiyorsanız, biri iletişim bilginizi başkasına verir, bir veritabanına/CRM'e ekler ya da bir hizmet ihlal edilir; sonuçta o adres bir listeye girer ve sonunda dünyanın dört bir yanındaki spam'cilere yayılır
    O e-postayı düzenli kullanıyorsanız bunun olma ihtimali pratikte %100'e yakındır
    Kazıyıcılardan e-postayı gizlemek gerçekten işe yarasaydı spam diye bir şey olmazdı. Kişisel iletişim adresimi hiçbir yerde açık etmemiş olmama rağmen haftada onlarca spam alıyorum ama hepsi spam olarak filtrelendiği için büyük bir sorun olmuyor

  • Bir arkadaşım gerçekten çok iyi; JavaScript içeren SVG ile adeta duyarlı görseller yapıyor
    Boyuta göre programatik olarak uyarlanıyor, oldukça ilginç
    SVG içine JavaScript gömülebilmesi gerçeğinin kendisi hâlâ yeterince kullanılmamış ama bir yandan da biraz tehlikeli hissettiriyor

    • SVG zaten temelde duyarlı değil mi? SVG içinde JavaScript'in neye yardımcı olduğunu pek anlamadım
    • Aşırı ilginç. Arkadaşının bunu gösterdiği bir GitHub ya da sitesi varsa link paylaşabilir misin
      Backend mühendisi olduğum için teknik olarak alanımdan epey uzak ama gerçekten çok havalı görünüyor
    • Bu, güvenlik topluluğunda aslında oldukça uzun zamandır biliniyor

  • Ben bu tür yöntemleri bıraktım. Günümüzde spam filtreleri yeterince iyi, o yüzden e-posta adresini karartmadan yayınlamak spam'i artırıyor gibi görünmüyor
    Meşru sebeplerle e-postama sahip olan berbat şirketlerin bunu üçüncü taraflara satması gibi diğer spam kaynakları ayrı konu
    Genel olarak gelen kutuma düşen spam günde 1'den az ve bu kadarı kabul edilebilir
    Tabii bu e-posta sağlayıcısına ve spam filtresine göre değişebilir; kişiden kişiye farklıdır ama benim için sorun olmadı

  • E-posta hâlâ sayfa kaynağında referans verilen XML belgesinin içinde düz metin olarak duruyor

    • Yine de document.querySelectorAll('a') gibi bir yöntemle bakınca durum farklı. Birçok scraping tekniği bu yaklaşımı kullandığı için ilk savunma hattı olarak fena değil
      Ama scraping için headless browser var; ayrıca sayfa üzerinde mevcut URL'yi doğrudan fetch edip düz metni alarak regex ile e-postayı bulmak da mümkün. Kabul ediyorum, oldukça tuhaf bir yaklaşım
      [0]: fetch('./').then((res) => res.text()).then((text) => console.log(text))
    • Fikir şu: spam botları SVG'yi parse edip e-posta adresi aramaz, sadece sayfanın HTML'ine bakar
      Ama modern spam koruma ortamında bunun gerçekte ne kadar etkili olduğu konusunda emin değilim
    • İşe yaramayan bir şeyi akıllıca görünüyormuş gibi paketlemişler gibi duruyor