SVG ile e-posta adresi koruma yöntemi, JavaScript yerine kullanım

 (rouninmedia.github.io)
4 puan yazan GN⁺ 2024-05-14 | 1 yorum | WhatsApp'ta paylaş

  • SVG kullanarak e-posta adresi koruma tekniği

    • Gerçek demo için SVG-based Email Protection bağlantısına bakın
    • Web sayfasında açıkça görünen e-posta adresleri genellikle e-posta toplama botlarına karşı korunmalıdır
    • Daha önce HTML, CSS ve JS kombinasyonunu kullanan teknikler tercih ediliyordu, ancak her birinin kendi artı ve eksileri var
    • JS kullanan yöntemler, HTML/CSS tabanlı alternatiflere göre daha gelişmiş olsa da, JS'nin ilgili sayfanın zorunlu bir parçası haline gelmesi gibi bir dezavantajı vardır
    • JS sayfayı iyileştirebilir, ancak ideal olan, JS kapalı olsa bile sayfanın tüm temel işlevlerinin çalışmasıdır
    • Bu sayfada tanıtılan teknik, CSS, JS, CSS+JS gibi mevcut e-posta koruma tekniklerinden tamamen farklı, SVG tabanlı bir yaklaşım kullanıyor

  • SVG tabanlı e-posta adresi koruma tekniğinin 3 avantajı

    1. JavaScript kapalıyken de çalışır
      • SVG tabanlı yaklaşımın temel avantajı, hiç JS gerektirmemesidir
      • Ziyaretçi JS'yi kapatsa bile sayfada gösterilen e-posta adresi kullanılabilir ve erişilebilir olur; korunur, güvenli kalır ve spam botlarından gizlenir
    2. Standart mailto: bağlantısı kullanılabilir
      • JS gerektirmeyen diğer yöntemlerin (HTML yorum ekleme, öğe gizleme vb.) aksine, SVG tabanlı yöntem standart mailto: bağlantısının kullanımına izin verir
      • Ancak mailto: bağlantısı, başvurduğu HTML belgesinin içinde değil, harici SVG belgesinin içinde yer alır
    3. İçeriği görsel gibi gizlerken metin gibi kopyalanabilir
      • Gömülü SVG, görsele benzer ama bir görsel değildir
      • Hiper metin belgesine gömülü bir yedek öğe olarak SVG, e-posta adresini spam botlarından gizlemede bir görsel kadar etkili olabilir
      • Ancak SVG, teknik olarak gerçek bir görsel değil, bir grafik belgesidir
      • Bu yüzden görsellerden farklı olarak, gömülü SVG içindeki `` öğesi sağ tıklanarak e-posta adresi kopyalanabilir

  • Kod uygulaması

    • Örnek 2 dosyadan oluşur
    • SVG grafik belgesi, HTML hiper metin belgesine `` etiketi kullanılarak gömülür
    • Aynı SVG grafik belgesi, hiper metne bir kez ya da birden fazla kez gömülebilir
    • HTML dosyası ve SVG dosyası için kod örnekleri yer alır

  • Erişilebilirlik açısından dikkat edilmesi gerekenler

    • Bu kurulumun mümkün olduğunca erişilebilir kalmasını sağlamak önemlidir
    • Bunun için SVG grafik belgesinde şu noktalara dikkat edilir:
      • Tüm SVG belgesi, eylem çağrısını belirtmek için SVG belge `` öğesi tarafından aria-labelledby ile ilişkilendirilir
      • SVG içindeki bağlantı öğesi ``, aynı eylem çağrısını yapan bir aria-label içerir
      • SVG, bağlantı öğesi sekme odağı aldığında, alt öğeleri olan ve `` öğelerinin birlikte vurgulanacağı şekilde stillendirilir

GN⁺ görüşü

  • HTML belgesine SVG gömerek, JS bağımlılığı olmadan e-posta adreslerini spam botlarından gizleyen özgün bir yaklaşım. Erişilebilirlik ve kullanılabilirliği birlikte düşünmesi açısından ilginç bir teknik gibi görünüyor.
  • Ancak ön yüz tarafında ne kadar gelişmiş teknikler kullanılırsa kullanılsın, en gelişmiş spam botlarını tamamen engellemenin mümkün olmadığını unutmamak gerekir. Bu, her güvenlik çözümünün ortak sınırlarından biridir.
  • Bu tekniğin gerçek projelerde kullanılabilmesi için SEO etkisi, farklı tarayıcı/cihaz uyumluluğu ve performans gibi konularda ek doğrulama gerekebilir.
  • E-posta koruması için arka uç çözümleri olarak reCAPTCHA ve honeypot tekniği gibi yöntemler de birlikte değerlendirilebilir.
  • CSS ve SVG'nin gelişmiş özelliklerinden yararlanan ilginç bir yöntem olsa da, gerçek kullanımda hâlâ bazı kısıtları var gibi görünüyor. Yine de front-end geliştiriciler için en az bir kez denenmeye değer eğlenceli bir fikir.

İlgili okumalar

1 yorum

 
GN⁺ 2024-05-14
Hacker News görüşü

Özetle, bir web sayfasında açıkça görünen e-posta adreslerini spam botlarından korumanın gerekip gerekmediğine dair görüşler şöyle:

  • Uzun zamandır web sitesinde e-posta adresini açıkça paylaşıyor, ancak spam filtreleri iyi çalıştığı için spam büyük bir sorun oluşturmuyor
  • Hem Gmail hem de yerel bir şirket tarafından barındırılan webmail’de spam filtreleme iyi çalışıyor
  • Günde yaklaşık 15 spam e-postası geliyor, ancak Purelymail sayesinde büyük bir sorun olmuyor
  • Asıl sorun ise alakasız işlem e-postaları, bülten kaynaklı çöp spam’ler ve kullanılmayan sosyal ağ bildirimleri
  • Günümüzde spam filtreleri iyi çalıştığı için e-posta adresini açıkça paylaşmak spam’de büyük bir artışa yol açmıyor
  • Gelen kutusuna günde 1’den az spam e-postası düşmesi kabul edilebilir bir seviye
  • E-posta sağlayıcısına ve spam filtresine göre değişebilir, ancak kişisel olarak sorun teşkil etmiyor
  • Firefox’taki NoScript ile <object> etiketi render edilmediği için bu teknik çalışmıyor
  • "E-posta koruması" sadece anlamsız değil, hatta zararlı bile
  • JS olmadan da rahat okunabilen bir sitede 1920x1080@60Hz ifadesinin [email protected] olarak görünmesi gibi bir sorun var