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

 (rouninmedia.github.io)
4 पॉइंट द्वारा GN⁺ 2024-05-14 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • सार्वजनिक ईमेल पते को spambots द्वारा इकट्ठा किए जाने से छिपाते हुए भी विज़िटर तुरंत संपर्क कर सकें, इसके लिए SVG के अंदर ईमेल टेक्स्ट और mailto: लिंक रखने का तरीका है
  • JavaScript-आधारित सुरक्षा ज़्यादा उन्नत हो सकती है, लेकिन संपर्क सुविधा का खुद JS dependency रखना एक बोझ बन जाता है
  • इस approach में बाहरी SVG document को HTML के से insert किया जाता है, और असली लिंक HTML में नहीं बल्कि SVG के अंदर element में रखा जाता है
  • SVG image की तरह content को छिपाने का असर देता है, फिर भी `` element इस्तेमाल करने के कारण विज़िटर ईमेल पता copy कर सकते हैं
  • यह उन्नत spambots तक को रोकने वाला समाधान नहीं है, लेकिन साधारण ईमेल harvesting scripts के सामने expose होने के जोखिम को कम करने में उपयोगी है

SVG से ईमेल पता छिपाने का तरीका

  • सार्वजनिक ईमेल पते email-harvesting spambots के सामने आसानी से expose हो सकते हैं, इसलिए सुरक्षा उपाय की ज़रूरत होती है
  • आम सुरक्षा तकनीकें HTML, CSS, JavaScript को मिलाती हैं, लेकिन JavaScript इस्तेमाल करने पर संपर्क सुविधा page के आवश्यक execution environment से बंध जाती है
  • SVG तरीका JavaScript बिल्कुल इस्तेमाल किए बिना ईमेल display और link behavior संभालता है
  • JavaScript बंद होने पर भी विज़िटर page पर दिखा ईमेल पता इस्तेमाल कर सकते हैं, और spambots के लिए यह सामान्य HTML text की तुलना में कम सीधे तौर पर expose होता है
  • अन्य frontend-आधारित सुरक्षा तकनीकों की तरह, यह ज़िद्दी और उन्नत spambots से सार्वजनिक ईमेल पते की पूरी तरह रक्षा नहीं कर सकता
  • लाइव डेमो: SVG-based Email Protection

HTML और SVG implementation

  • HTML document बाहरी SVG file को `` से insert करता है
  • उसी SVG graphic document को HTML के अंदर एक बार या कई बार insert किया जा सकता है
  • उदाहरण HTML .svg-email-protection class पर width: 180px, height: 24px, vertical-align: middle styles सेट करता है, और body में SVG file को `` से load करता है
  • SVG file viewBox="0 0 200 24" वाला `` document है, जिसके अंदर ईमेल text और mailto:myemail@mydomain.tld link रखा जाता है
    • के अंदर और `` होते हैं
    • `` में myemail@mydomain.tld दिखता है
    • rect:hover और a:focus states में background color, text color, weight, underline, shadow styles बदलते हैं

Accessibility और संदर्भ सामग्री

  • पूरा SVG document की ओर इशारा करने वाला `aria-labelledby` इस्तेमाल करता है, और SVG के अंदर में उसी call-to-action वाला aria-label रखा जाता है
  • जब keyboard tab focus SVG के अंदर anchor तक पहुंचता है, तो और साथ में highlight होकर focus state दिखाते हैं
  • संबंधित सामग्री:

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

1 टिप्पणियां

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

  • सच में ऐसा है क्या?

    • हाँ। 2000 के शुरुआती दशक में वेब पर ईमेल डालने से सचमुच स्पैम बढ़ता था, और ईमेल obfuscation तकनीकें भी काफ़ी मददगार लगती थीं
      लेकिन निजी तौर पर मुझे लगा कि लगभग 2015 के बाद से इसका कोई फ़र्क नहीं रहा, और फ़िल्टर करने लायक स्पैम भी नहीं बढ़ा
      अब कंपनियाँ यूज़र लिस्ट बेच देती हैं या सर्वर हैक होकर निकली विशाल ईमेल सूचियाँ खरीदी जा सकती हैं, इसलिए वेब खंगालकर ईमेल इकट्ठा करना स्पैम भेजने के हिसाब से लगभग सबसे खराब दक्षता वाला तरीका है
    • मैंने पिछले साल बनाई गई दो वेबसाइटों के फ़ूटर में ईमेल पता सीधे डाल दिया था, और दोनों पर अब तक एक भी स्पैम मेल नहीं आया
      दोनों साइटों पर हज़ारों विज़िटर आते हैं, और वे search engine व AI bots द्वारा scrape की जाने वाली लोकप्रिय साइटें हैं
    • मेरा भी बिल्कुल यही मानना है। उल्टा, 1999~2001 के आसपास Usenet पर इस्तेमाल किया गया ईमेल पता आज भी लगातार स्पैम से भरता रहता है
      वेबसाइट पर डाला गया ईमेल पता तो spam folder तक में नहीं पहुँचता
      कुछ mailing lists शायद FIRSTNAME.LASTNAME फ़ॉर्मेट या 1~10 अक्षरों के कॉम्बिनेशन से Gmail पते dictionary attack की तरह अनुमान लगाकर बनाती हैं
      फिर भी domain@domain.com पते पर आने वाला स्पैम साल में लगभग एक बार ही आता है, यानी बहुत कम
      कुल मिलाकर ईमेल स्पैम की मात्रा भी काफ़ी घटी है, और अब जो स्पैम निकलता है वह 419 ठगों या 20 साल पुरानी ईमेल सूचियाँ खरीदने वाले ठगे जा चुके संभावित ठगों का मिश्रण लगता है
    • ईमेल पता obfuscation अब अतीत की चीज़ जैसा लगता है। यह कभी पद्धतिगत रूप से बहुत मज़बूत नहीं था, फिर भी फैल गया, और किसी cargo cult की तरह ज़िंदा रह गया
    • निजी तौर पर, भले ही स्पैम दिख न रहा हो, मैं फिर भी चाहूँगा कि मेरा ईमेल collect न किया जाए
      मैं इसे कोई गंभीर privacy या security समस्या नहीं कहूँगा, लेकिन यह मेरी पसंद का मामला है

  • मेरा domain एक 24 साल से registered .com है, और ईमेल पता पहले पेज के सबसे ऊपर H3 tag में खुला पड़ा है
    इस पते पर आने वाला स्पैम कोई समस्या नहीं है। junk folder समेत दिन में लगभग 15 मेल आते हैं, और Purelymail की वजह से संभल जाता है
    असली समस्या वे transactional mails हैं जिनका किसी लेन-देन से संबंध नहीं, newsletter जैसे promotional mails, और social networks जो यह बताने के लिए लगातार मेल भेजते रहते हैं कि आप उन्हें इस्तेमाल नहीं कर रहे

    • दिन के 15 स्पैम मेल काफ़ी ज़्यादा लगते हैं। मुझे उससे कम पर भी शायद पता block करना पड़ता
    • “वे social networks जो शिकायत करते हैं कि आप उन्हें इस्तेमाल नहीं कर रहे” यही सबसे बड़ा हिस्सा है। Facebook के login करने को कहने वाले मेल लगभग बाकी स्पैम से भी ज़्यादा हैं
      अकाउंट इस्तेमाल किए हुए लगभग 7 साल हो गए, अब तक तो उन्हें समझ जाना चाहिए
    • मेरे पास 90 के दशक के आखिर में register किए गए कुछ पुराने domains हैं, और कुछ पर अभी भी mailto में मेरा ईमेल पड़ा है
      कुछ जगहों पर लगभग स्पैम नहीं आता, और कुछ पर दिन में कई दर्जन मेल आते हैं। SpamAssassin स्पैम पकड़ने में बहुत अच्छा काम करता है

  • “अगर विज़िटर JavaScript बंद कर दें तब भी पेज पर दिख रहा ईमेल पता इस्तेमाल किया जा सकता है” इस दावे के उलट, Firefox में NoScript की default setting tag render नहीं करती और उसे placeholder से बदल देती है, इसलिए यह तकनीक वहाँ काम नहीं करती
    https://imgur.com/2tCAgAf

    • uBlock Origin भी JavaScript block कर सकता है। extension menu में एक आसान बटन होता है
    • वह अलग बात है, इसलिए समझ नहीं आता कि यह मुद्दा यहाँ क्यों लाया जा रहा है
    • Chromium में भी बिल्कुल यही होता है

  • इस तकनीक में अपने-आप accessibility की कमी होना ज़रूरी नहीं, लेकिन लेख में दिया गया उदाहरण सचमुच बहुत खराब है
    लेख svg और a element के label को “Email us!” रखता है, जिससे असली ईमेल पता screen reader से छिप जाता है
    इस तरह aria label का इस्तेमाल बहुत खराब प्रैक्टिस है। जब तक कोई बहुत असाधारण कारण न हो, screen reader उपयोगकर्ताओं को भी दूसरों जैसा ही अनुभव मिलना चाहिए, और अगर आपको लगे कि ऐसा न करने का कारण काफ़ी मज़बूत है, तो संभव है कि आप ग़लत हों
    सही तरीका यह है कि label में असली ईमेल पता रखा जाए

    • क्या इस काम का पूरा मकसद ही दस्तावेज़ में ईमेल पता machine-readable format में न डालना नहीं है?
    • इसका असर Dragon जैसे voice dictation software पर भी पड़ सकता है
      अगर उपयोगकर्ता “Click myemail@mydomain.tld” बोले, तो browser लिंक टेक्स्ट को “Email us” के रूप में expose करता है, इसलिए लिंक activate नहीं हो सकता
      हालाँकि Dragon SVG के अंदर के लिंक activate कर सकता है या नहीं, यह मुझे नहीं पता

  • मैं यह करता हूँ: reanospaml@maisjsl.com
    फिर भी “स्पैम” आता है, लेकिन वह वेबसाइट के विषय से बिल्कुल मेल खाते B2B proposals होते हैं, इसलिए लगता है कि किसी इंसान ने हाथ से इकट्ठा किया है

    • अगर scraper headless browser इस्तेमाल करे, तो लगता है यह तरीका bypass हो सकता है
      हालाँकि ईमेल harvesting के लिए headless browser चलाना तुलनात्मक रूप से महँगा पड़ता है, इसलिए हो सकता है वह स्पैम साइट से आया ही न हो

  • जैसा कि दूसरे लोग पहले ही कह चुके हैं, ईमेल को “protect” करना न सिर्फ़ बेकार है, बल्कि वास्तव में नुकसानदेह भी हो सकता है
    JavaScript के बिना भी ज़्यादातर कंटेंट ठीक से पढ़ा जा सकता है, लेकिन कुछ साइटें “1920x1080@60Hz” जैसी strings को सचमुच “[email protected]” की तरह दिखाती हैं

    • इसका कोई तुरंत देखने लायक उदाहरण है? यह इतना बेहूदा लगता है कि मैंने कभी नहीं देखा

  • समझ नहीं आता कि इसका सच में कोई मतलब है भी या नहीं। मज़ेदार प्रयोग ज़रूर है, लेकिन अगर मकसद spammers से बचना है, तो यह पूरी तरह समय की बर्बादी है
    आप जानकारी पूरी दुनिया के सामने रखकर भी somehow यह उम्मीद कर रहे हैं कि सिर्फ़ “अच्छे लोग” ही उस तक पहुँच पाएँ
    जब तक आप ईमेल पता कम-से-कम हर महीने नहीं बदलते, कोई न कोई आपका संपर्क किसी और को दे देगा, database/CRM में डाल देगा, या कोई service breach हो जाएगी; और फिर वह पता किसी सूची में चढ़कर अंततः दुनिया भर के spammers तक पहुँच जाएगा
    अगर आप वह ईमेल लगातार इस्तेमाल करते हैं, तो ऐसा होने की संभावना व्यवहारिक रूप से 100% के क़रीब है
    अगर scrapers से ईमेल छिपाना सचमुच असरदार होता, तो स्पैम नाम की चीज़ होती ही नहीं। मैंने अपना निजी संपर्क कहीं सार्वजनिक नहीं किया, फिर भी हफ़्ते में कई दर्जन स्पैम आते हैं, हालाँकि सब फ़िल्टर हो जाते हैं इसलिए कोई बड़ी दिक्कत नहीं

  • मेरा एक दोस्त सचमुच उस्ताद है, और वह JavaScript वाले SVG से लगभग responsive images बना रहा है
    वे साइज़ के हिसाब से प्रोग्रामेटिक तरीके से adapt करती हैं, जो काफ़ी दिलचस्प है
    SVG के अंदर JavaScript डाला जा सकता है, यही बात अभी भी कम इस्तेमाल की हुई और थोड़ी जोखिमभरी लगती है

    • क्या SVG अपने-आप responsive नहीं होता? समझ नहीं आता कि SVG के अंदर JavaScript किस चीज़ में मदद करता है
    • बहुत दिलचस्प। अगर उस दोस्त का यह काम दिखाने वाला कोई GitHub या साइट है, तो क्या उसका लिंक दे सकते हो
      मैं backend engineer हूँ, इसलिए तकनीकी रूप से यह मेरे क्षेत्र से काफ़ी बाहर है, लेकिन यह सच में शानदार लग रहा है
    • security community में यह बात काफ़ी पहले से जानी जाती थी

  • मैंने ऐसे तरीक़े छोड़ दिए हैं। आजकल spam filters काफ़ी अच्छे हैं, इसलिए ईमेल पता बिना obfuscation के सार्वजनिक करने पर भी स्पैम बढ़ता नहीं दिखता
    अलग बात यह है कि कुछ घटिया कंपनियाँ, जिनके पास वैध कारणों से मेरा ईमेल है, उसे third parties को बेच देती हैं
    आम तौर पर inbox में आने वाला स्पैम दिन में 1 मेल से भी कम होता है, और वह मेरे लिए स्वीकार्य है
    बेशक यह ईमेल provider और spam filter पर निर्भर कर सकता है, इसलिए लोगों का अनुभव अलग होगा, लेकिन मेरे लिए यह समस्या नहीं रही

  • ईमेल अब भी page source में referenced XML document के अंदर plain text के रूप में मौजूद है

    • फिर भी document.querySelectorAll('a') जैसे तरीक़े से देखने पर फ़र्क पड़ता है। कई scraping techniques यही तरीका अपनाती हैं, इसलिए पहली रक्षा पंक्ति के रूप में यह ठीक है
      हालाँकि scraping के लिए headless browser मौजूद हैं, और पेज पर current URL को वैसे का वैसा fetch करके plain text लिया जा सकता है और regex से ईमेल खोजा जा सकता है। मानता हूँ, यह काफ़ी अजीब तरीका है
      [0]: fetch('./').then((res) => res.text()).then((text) => console.log(text))
    • विचार यह है कि spam bots शायद SVG तक parse करके ईमेल पता नहीं ढूँढेंगी, बल्कि सिर्फ़ page HTML देखेंगी
      लेकिन आधुनिक spam-protection माहौल में यह वास्तव में कितना असरदार है, कहना मुश्किल है
    • यह किसी बेकार चीज़ को चालाकी से पेश करने जैसा लगता है