એક હોનીપોટે મારા અરબી પેજ બગાડી નાખ્યા

Convertica સાત ભાષાઓમાં ચાલે છે. છ ડાબેથી જમણે (left-to-right) વંચાય છે. અરબી જમણેથી ડાબે (right-to-left) વંચાય છે. આ અસંગતતાને કારણે મારે કલાકો સુધી ડિબગિંગ કરવું પડ્યું.

મારા બ્રાઉઝરમાં દરેક અરબી પેજ બરાબર દેખાતું હતું. પછી મેં Lighthouse ચલાવ્યું. સ્ક્રીનશોટ ખાલી આવ્યો—એકદમ સફેદ, તૂટેલું કે અડધું લોડ થયેલું નહીં.

URL અને HTML માં કોઈ ફેરફાર થયો નહોતો. Chrome પેજ બતાવતું હતું, પરંતુ Headless Chrome કંઈ જ બતાવતું નહોતું. Google અને Bing ના બોટ્સ હેડલેસ બ્રાઉઝર્સનો ઉપયોગ કરે છે, તેથી આ બાબત મહત્વની હતી.

આનું કારણ એક સ્પામ હોનીપોટ (honeypot) હતું. મેં બોટ્સને પકડવા માટે એક હિડન ઇનપુટ ઉમેર્યું હતું અને તેને વ્યૂપોર્ટ (viewport) ની બહાર દૂર રાખ્યું હતું:

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

ડાબેથી જમણે (left-to-right) દસ્તાવેજોમાં બ્રાઉઝર ઓવરફ્લોને ક્લિપ કરે છે, તેથી હોનીપોટ ખાલી જગ્યામાં રહે છે.

જ્યારે મેં dir="rtl" સેટ કર્યું, ત્યારે સ્ક્રોલ ઓરિજિન જમણા છેડા પર જતું રહ્યું. ડાબી બાજુનો ઓવરફ્લો વાસ્તવિક જગ્યા બની જાય છે, જેનાથી દસ્તાવેજ દસ હજાર પિક્સેલ પહોળો થઈ જાય છે જ્યારે કન્ટેન્ટ છેક જમણી બાજુએ એકઠું રહે છે.

મારું બ્રાઉઝર આપમેળે જમણા ઓરિજિન પર સ્ક્રોલ થઈ ગયું, તેથી મને કંઈ ખોટું દેખાયું નહીં. હેડલેસ રેન્ડરર છેક ડાબા ખૂણેથી શરૂ થાય છે અને નવ હજાર પિક્સેલ સુધી કંઈ જ નહોતું રેન્ડર કર્યું.

માત્ર એક પ્રોપર્ટી બદલીને તેને ઠીક કરો.

left ને બદલે inset-inline-start નો ઉપયોગ કરો.

  • જૂનું: position: absolute; left: -9999px;
  • નવું: position: absolute; inset-inline-start: -9999px;

inset-inline-start લખાણની દિશાને અનુસરે છે—LTR માં left તરીકે અને RTL માં right તરીકે કામ કરે છે—જે હોનીપોટને સાચી બાજુએ સ્ક્રીનની બહાર રાખે છે.

જ્યારે તમે RTL સપોર્ટ ઉમેરો ત્યારે તમારા જૂના ઓફ-સ્ક્રીન હેક્સ (hacks) ની તપાસ કરો. જેમાં હોનીપોટ્સ, સ્કીપ લિંક્સ અને હિડન ડિવ્સ (divs) નો સમાવેશ થાય છે. left/right ને બદલે લોજિકલ પ્રોપર્ટીઝ (logical properties) નો ઉપયોગ કરો.

આ બગ માટે તમારું બ્રાઉઝર નબળું પરીક્ષણ છે; તે તમારા માટે સ્ક્રોલ કરીને ભૂલને છુપાવે છે. વાસ્તવિક પિક્સેલ્સ જોવા માટે પેજને હેડલેસ રીતે રેન્ડર કરો.

જો અન્ય ભાષાઓ બરાબર હોય પરંતુ એક ભાષાના ઇમ્પ્રેશન આવવાનું બંધ થઈ જાય, તો તમારા રેન્ડરરની તપાસ કરો.

સ્ત્રોત: https://dev.to/convertica/a-honeypot-field-made-every-arabic-page-on-my-site-render-blank-3aji