SVG के ज़रिए ईमेल पता सुरक्षित करने का तरीका, JavaScript की जगह उपयोग

 (rouninmedia.github.io)
4 पॉइंट द्वारा GN⁺ 2024-05-14 | 1 टिप्पणियां | WhatsApp पर शेयर करें

  • SVG का उपयोग करने वाली ईमेल पता सुरक्षा तकनीक

    • वास्तविक डेमो के लिए SVG-based Email Protection लिंक देखें
    • वेब पेज पर सार्वजनिक ईमेल पते को आमतौर पर ईमेल संग्रह करने वाले बॉट्स से सुरक्षा की आवश्यकता होती है
    • पहले HTML, CSS, JS के संयोजन का उपयोग करने वाली तकनीकें इस्तेमाल होती रही हैं, लेकिन हर एक के अपने फायदे और सीमाएँ हैं
    • JS का उपयोग करने वाला तरीका HTML/CSS-आधारित विकल्पों से अधिक परिष्कृत है, लेकिन इसकी कमी यह है कि JS उस पेज का अनिवार्य हिस्सा बन जाता है
    • JS पेज को बेहतर बना सकता है, लेकिन आदर्श रूप से JS बंद होने पर भी पेज की सभी आवश्यक सुविधाएँ काम करनी चाहिए
    • इस पेज में परिचित कराई गई तकनीक CSS, JS, CSS+JS जैसी मौजूदा ईमेल सुरक्षा तकनीकों से बिल्कुल अलग SVG-आधारित अप्रोच का उपयोग करती है

  • SVG-आधारित ईमेल पता सुरक्षा तकनीक के 3 फायदे

    1. JavaScript बंद होने पर भी काम करता है
      • SVG-आधारित अप्रोच का सबसे बड़ा फायदा यह है कि इसमें JS की बिल्कुल आवश्यकता नहीं होती
      • भले ही विज़िटर JS बंद कर दे, पेज पर दिखाया गया ईमेल पता उपयोग योग्य, सुलभ और सुरक्षित रहता है, साथ ही स्पैम बॉट्स से छिपा रहता है
    2. मानक mailto: लिंक का उपयोग संभव
      • JS की आवश्यकता न रखने वाले अन्य तरीकों (HTML comments डालना, elements छिपाना आदि) के विपरीत, SVG-आधारित तरीका मानक mailto: लिंक के उपयोग की अनुमति देता है
      • हालांकि mailto: लिंक संदर्भित HTML document के अंदर नहीं, बल्कि बाहरी SVG document के अंदर मौजूद होता है
    3. इमेज की तरह सामग्री छिपाते हुए भी टेक्स्ट की तरह कॉपी किया जा सकता है
      • embedded SVG इमेज जैसा दिखता है, लेकिन वास्तव में इमेज नहीं है
      • hypertext document में embedded replacement element के रूप में SVG, ईमेल पते को स्पैम बॉट्स से छिपाने में इमेज जितना प्रभावी हो सकता है
      • लेकिन तकनीकी रूप से SVG वास्तविक इमेज नहीं, बल्कि एक graphic document है
      • इसलिए इमेज के विपरीत, embedded SVG के `` element पर right-click करके ईमेल पता कॉपी किया जा सकता है

  • कोड इम्प्लीमेंटेशन

    • उदाहरण 2 files से बना है
    • SVG graphic document को HTML hypertext document में `` टैग का उपयोग करके embed किया जाता है
    • उसी SVG graphic document को hypertext में एक या कई बार embed किया जा सकता है
    • HTML file और SVG file के code examples शामिल हैं

  • accessibility से जुड़ी बातें

    • यह महत्वपूर्ण है कि यह सेटअप जितना संभव हो उतना accessible बना रहे
    • इसके लिए SVG graphic document में निम्न बातों का ध्यान रखा गया है:
      • पूरा SVG document, SVG document के `` द्वारा aria-labelledby होकर action prompt को दर्शाता है
      • SVG के अंदर anchor element `` में उसी action prompt के लिए aria-label मौजूद है
      • SVG को इस तरह style किया गया है कि जब anchor element पर tab focus हो, तो उसके child elements और `` दोनों highlight हों

GN⁺ की राय

  • HTML document में SVG embed करके JS dependency के बिना स्पैम बॉट्स से ईमेल पता छिपाने का यह एक अनोखा तरीका है। accessibility और usability दोनों को ध्यान में रखने वाली यह दिलचस्प तकनीक लगती है.
  • लेकिन यह ध्यान रखना चाहिए कि चाहे कितनी भी परिष्कृत frontend तकनीकें इस्तेमाल की जाएँ, सबसे उन्नत स्पैम बॉट्स को पूरी तरह रोकना संभव नहीं है। यह किसी भी security solution की एक सामान्य सीमा है.
  • इस तकनीक को प्रोडक्शन में अपनाने से पहले SEO पर प्रभाव, अलग-अलग browsers/devices compatibility, performance आदि का अतिरिक्त सत्यापन आवश्यक होगा.
  • ईमेल सुरक्षा के लिए backend solutions जैसे reCAPTCHA, Honeypot तकनीक आदि पर भी साथ में विचार किया जा सकता है.
  • CSS और SVG की advanced features का उपयोग करने वाला यह एक रोचक तरीका है, लेकिन व्यावहारिक उपयोग में अभी भी कुछ सीमाएँ दिखती हैं। फिर भी frontend developers के लिए यह कम से कम एक बार टेस्ट करने लायक दिलचस्प आइडिया है.

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-05-14
Hacker News राय

संक्षेप में, वेब पेज पर सार्वजनिक ईमेल पते को स्पैम बॉट्स से बचाने की ज़रूरत है या नहीं, इस पर राय इस प्रकार थीं:

  • लंबे समय से वेबसाइट पर ईमेल पता सार्वजनिक रखा है, लेकिन spam filter अच्छी तरह काम करते हैं, इसलिए spam की समस्या बड़ी नहीं है
  • Gmail और लोकल कंपनी द्वारा होस्ट किए गए webmail, दोनों में spam filtering अच्छी तरह काम कर रही है
  • रोज़ लगभग 15 spam emails आती हैं, लेकिन Purelymail की वजह से यह कोई बड़ी समस्या नहीं बनती
  • असली समस्या असंबंधित transaction emails, newsletter junk spam, और इस्तेमाल न किए जाने वाले social networks की notifications हैं
  • आजकल spam filters इतने अच्छे हैं कि ईमेल पता सार्वजनिक करने पर भी spam में बहुत बढ़ोतरी नहीं होती
  • inbox में रोज़ 1 से कम spam email पहुँचना स्वीकार्य स्तर है
  • यह email provider और spam filter पर निर्भर कर सकता है, लेकिन व्यक्तिगत रूप से यह समस्या नहीं है
  • Firefox के NoScript में <object> टैग render नहीं होता, इसलिए यह तकनीक काम नहीं करती
  • "ईमेल सुरक्षा" सिर्फ़ निरर्थक ही नहीं, बल्कि उल्टा हानिकारक भी है
  • JS के बिना भी ठीक से पढ़ी जाने वाली साइटों में 1920x1080@60Hz को [email protected] के रूप में दिखाए जाने की समस्या है