एक हनीपॉट ने मेरे अरबी पेजों को खराब कर दिया

Convertica सात भाषाओं में चलता है। छह बाएं-से-दाएं (left-to-right) पढ़ी जाती हैं। अरबी दाएं-से-बाएं (right-to-left) पढ़ी जाती है। इस विसंगति की वजह से मुझे घंटों डिबगिंग करनी पड़ी।

मेरे ब्राउज़र में हर अरबी पेज ठीक दिख रहा था। फिर मैंने Lighthouse चलाया। स्क्रीनशॉट बिल्कुल खाली आया—पूरी तरह सफेद, न तो टूटा हुआ और न ही आधा लोड हुआ।

URL और HTML में कोई बदलाव नहीं हुआ था। Chrome ने पेज दिखाया, लेकिन Headless Chrome ने कुछ भी नहीं दिखाया। Google और Bing के बॉट्स हेडलेस ब्राउज़र का उपयोग करते हैं, इसलिए यह महत्वपूर्ण था।

इसका दोषी एक स्पैम हनीपॉट (spam honeypot) था। मैंने बॉट्स को पकड़ने के लिए एक छिपा हुआ इनपुट जोड़ा था और उसे व्यूपोर्ट (viewport) से काफी बाहर रखा था:

  • position: absolute
  • left: -9999px
  • opacity: 0

बाएं-से-दाएं (left-to-right) वाले दस्तावेज़ों में ब्राउज़र ओवरफ्लो (overflow) को क्लिप कर देता है, इसलिए हनीपॉट खाली जगह (dead space) में रहता है।

जब मैंने dir="rtl" सेट किया, तो स्क्रॉल ओरिजिन (scroll origin) दाईं ओर कूद गया। बायां ओवरफ्लो वास्तविक स्थान बन गया, जिससे दस्तावेज़ की चौड़ाई दस हज़ार पिक्सेल तक फैल गई, जबकि कंटेंट बिल्कुल दाईं ओर सिमटा रहा।

मेरा ब्राउज़र स्वचालित रूप से दाईं ओर के ओरिजिन पर स्क्रॉल कर गया, इसलिए मुझे कुछ भी गलत नहीं दिखा। एक हेडलेस रेंडरर (headless renderer) बिल्कुल बाएं कोने से शुरू होता है और उसने नौ हज़ार पिक्सेल तक कुछ भी नहीं रेंडर किया।

इसे केवल एक प्रॉपर्टी बदलकर ठीक करें।

left को inset-inline-start से बदलें।

  • Old: position: absolute; left: -9999px;
  • New: position: absolute; inset-inline-start: -9999px;

inset-inline-start लिखने की दिशा का पालन करता है—LTR में left की तरह और RTL में right की तरह काम करता है—जिससे हनीपॉट सही तरफ स्क्रीन से बाहर रहता है।

जब आप RTL सपोर्ट जोड़ें, तो अपने पुराने ऑफ-स्क्रीन हैक्स (off-screen hacks) का ऑडिट ज़रूर करें। इसमें हनीपॉट, स्किप लिंक और छिपे हुए divs शामिल हैं। left/right को लॉजिकल प्रॉपर्टीज़ (logical properties) से बदलें।

इस बग के लिए आपका ब्राउज़र एक खराब टेस्ट है; यह आपके लिए स्क्रॉल करके विफलता को छिपा देता है। वास्तविक पिक्सेल देखने के लिए पेज को हेडलेस तरीके से रेंडर करें।

यदि अन्य भाषाएँ ठीक चल रही हैं लेकिन एक भाषा के इम्प्रेशंस (impressions) मिलना बंद हो गए हैं, तो अपने रेंडरर की जाँच करें।

स्रोत: https://dev.to/convertica/a-honeypot-field-made-every-arabic-page-on-my-site-render-blank-3aji