ఒక హనీపాట్ నా అరబిక్ పేజీలను పాడుచేసింది

Convertica ఏడు భాషల్లో నడుస్తుంది. ఆరు భాషలు ఎడమ నుండి కుడికి (left-to-right) చదువుతారు. అరబిక్ కుడి నుండి ఎడమకు (right-to-left) చదువుతారు. ఆ తేడా వల్ల నేను గంటల కొద్దీ డీబగ్గింగ్ చేయాల్సి వచ్చింది.

నా బ్రౌజర్‌లో ప్రతి అరబిక్ పేజీ సరిగానే కనిపించింది. ఆ తర్వాత నేను Lighthouse రన్ చేశాను. స్క్రీన్‌షాట్ ఖాళీగా వచ్చింది—ఏమీ లోడ్ అవ్వలేదు, కేవలం తెల్లగా ఉంది, పేజీ విరిగిపోలేదు లేదా సగం లోడ్ అవ్వలేదు.

URL మరియు HTML మారలేదు. Chrome పేజీని చూపించింది, కానీ Headless Chrome ఏమీ చూపించలేదు. Google మరియు Bing నుండి వచ్చే బాట్‌లు (bots) హెడ్‌లెస్ బ్రౌజర్‌లను ఉపయోగిస్తాయి, కాబట్టి ఇది చాలా ముఖ్యం.

దీనికి కారణం ఒక స్పామ్ హనీపాట్ (spam honeypot). బాట్‌లను పట్టుకోవడానికి నేను ఒక హిడెన్ ఇన్‌పుట్‌ను (hidden input) జోడించి, దానిని వ్యూపోర్ట్ (viewport) కి చాలా దూరంగా ఉంచాను:

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

ఎడమ నుండి కుడికి ఉండే డాక్యుమెంట్లలో, బ్రౌజర్ ఓవర్‌ఫ్లోను (overflow) కత్తిరిస్తుంది, కాబట్టి హనీపాట్ ఖాళీ ప్రదేశంలో ఉంటుంది.

నేను dir="rtl" అని సెట్ చేసినప్పుడు, స్క్రోల్ ఒరిజిన్ (scroll origin) కుడి అంచుకి మారుతుంది. ఎడమ వైపు ఉన్న ఓవర్‌ఫ్లో నిజమైన స్థలంగా మారి, డాక్యుమెంట్‌ను పది వేల పిక్సెల్‌ల వెడల్పు వరకు సాగదీస్తుంది, అదే సమయంలో కంటెంట్ మాత్రం కుడి వైపున ఒకచోట కేంద్రీకృతమై ఉంటుంది.

నా బ్రౌజర్ ఆటోమేటిక్‌గా కుడి ఒరిజిన్‌కి స్క్రోల్ అయ్యింది, కాబట్టి నాకు ఏ తప్పు కనిపించలేదు. కానీ ఒక హెడ్‌లెస్ రెండరర్ (headless renderer) ఎడమ మూల నుండి ప్రారంభమై, తొమ్మిది వేల పిక్సెల్‌ల వరకు ఖాళీని రెండర్ చేసింది.

ఒకే ఒక ప్రాపర్టీ మార్పుతో దీనిని సరిచేయవచ్చు.

left స్థానంలో inset-inline-startను ఉపయోగించండి.

  • పాతది: position: absolute; left: -9999px;
  • కొత్తది: position: absolute; inset-inline-start: -9999px;

inset-inline-start అనేది రాసే దిశను అనుసరిస్తుంది—అంటే LTRలో left లాగా మరియు RTLలో right లాగా పనిచేస్తుంది—దీనివల్ల హనీపాట్ సరైన వైపున స్క్రీన్ వెలుపల ఉంటుంది.

మీరు RTL సపోర్ట్‌ను జోడించినప్పుడు, మీ పాత ఆఫ్-స్క్రీన్ హ్యాక్స్ (off-screen hacks) ను తనిఖీ చేయండి. ఇందులో హనీపాట్‌లు, స్కిప్ లింక్‌లు మరియు హిడెన్ డివ్స్ (hidden divs) ఉంటాయి. left/right స్థానంలో లాజికల్ ప్రాపర్టీలను (logical properties) ఉపయోగించండి.

ఈ బగ్ కోసం మీ బ్రౌజర్ సరైన పరీక్ష కాదు; అది మీ కోసం స్క్రోల్ చేయడం ద్వారా లోపాన్ని దాచిపెడుతుంది. అసలైన పిక్సెల్‌లను చూడటానికి పేజీని హెడ్‌లెస్ పద్ధతిలో రెండర్ చేయండి.

ఇతర భాషలు బాగానే ఉన్నా, ఏదైనా ఒక భాషకు ఇంప్రెషన్స్ (impressions) రావడం ఆగిపోతే, మీ రెండరర్‌ను తనిఖీ చేయండి.

మూలం: https://dev.to/convertica/a-honeypot-field-made-every-arabic-page-on-my-site-render-blank-3aji