एका Honeypot मुळे माझे अरबी पेजेस खराब झाले

Convertica सात भाषांमध्ये चालते. सहा भाषा डावीकडून उजवीकडे (left-to-right) वाचल्या जातात. अरबी भाषा उजवीकडून डावीकडे (right-to-left) वाचली जाते. या विसंगतीमुळे मला तासनतास डीबगिंग (debugging) करावे लागले.

माझ्या ब्राउझरमध्ये प्रत्येक अरबी पेज व्यवस्थित दिसत होते. मग मी Lighthouse चालवले. त्याचा स्क्रीनशॉट पूर्णपणे कोरा (blank) आला—एकदम पांढरा, पेज तुटलेले किंवा अर्धवट लोड झालेले नव्हते.

URL आणि HTML मध्ये कोणताही बदल झाला नव्हता. Chrome मध्ये पेज दिसत होते, पण Headless Chrome मध्ये काहीच दिसत नव्हते. Google आणि Bing चे बॉट्स (bots) हे headless ब्राउझर वापरतात, त्यामुळे ही गोष्ट महत्त्वाची होती.

यामागे कारण होते एक स्पॅम honeypot. बॉट्स पकडण्यासाठी मी एक 'hidden input' जोडला होता आणि तो viewport च्या खूप बाहेर ठेवला होता:

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

डावीकडून उजवीकडे (left-to-right) वाचल्या जाणाऱ्या डॉक्युमेंट्समध्ये ब्राउझर overflow क्लिप करतो, त्यामुळे honeypot रिकाम्या जागेत (dead space) राहतो.

जेव्हा मी dir="rtl" सेट केले, तेव्हा scroll origin उजव्या कडेला जातो. डावीकडील overflow ही प्रत्यक्ष जागा बनते, ज्यामुळे डॉक्युमेंटची रुंदी दहा हजार पिक्सेलपर्यंत वाढते, तर मजकूर (content) अगदी उजव्या बाजूला एकवटलेला राहतो.

माझा ब्राउझर आपोआप उजव्या ओरिजिनकडे (right origin) स्क्रोल झाला, त्यामुळे मला काहीही चुकीचे वाटले नाही. पण एक headless renderer डाव्या कोपऱ्यापासून सुरुवात करतो आणि नऊ हजार पिक्सेलपर्यंत फक्त रिकामी जागा रेंडर करतो.

फक्त एका प्रॉपर्टीमध्ये बदल करून हे दुरुस्त करा.

left च्या जागी inset-inline-start वापरा.

  • जुने: position: absolute; left: -9999px;
  • नवीन: position: absolute; inset-inline-start: -9999px;

inset-inline-start लेखनाच्या दिशेचे अनुसरण करते—LTR मध्ये हे left प्रमाणे आणि RTL मध्ये right प्रमाणे काम करते—ज्यामुळे honeypot योग्य बाजूला स्क्रीनच्या बाहेर राहतो.

जेव्हा तुम्ही RTL सपोर्ट जोडता, तेव्हा तुमच्या जुन्या 'off-screen hacks' ची तपासणी (audit) करा. यामध्ये honeypots, skip links आणि hidden divs यांचा समावेश होतो. left/right ऐवजी logical properties वापरा.

हा बग तपासण्यासाठी तुमचा ब्राउझर पुरेसा नाही; तो तुमच्यासाठी आपोआप स्क्रोल करून ही त्रुटी लपवतो. प्रत्यक्ष पिक्सेल्स पाहण्यासाठी पेज headless पद्धतीने रेंडर करून पहा.

जर इतर भाषांमध्ये सर्व काही ठीक असूनही एखादी भाषा impressions मिळवणे थांबवत असेल, तर तुमचा renderer तपासा.

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