ಒಂದು ಹನಿಪೊಟ್ ನನ್ನ ಅರೇಬಿಕ್ ಪುಟಗಳನ್ನು ಹಾಳುಮಾಡಿತು

Convertica ಏಳು ಭಾಷೆಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಆರು ಭಾಷೆಗಳು ಎಡದಿಂದ ಬಲಕ್ಕೆ (left-to-right) ಓದಲ್ಪಡುತ್ತವೆ. ಅರೇಬಿಕ್ ಬಲದಿಂದ ಎಡಕ್ಕೆ (right-to-left) ಓದಲ್ಪಡುತ್ತದೆ. ಆ ವ್ಯತ್ಯಾಸವು ನನಗೆ ಡಿಬಗ್ ಮಾಡಲು ಗಂಟೆಗಟ್ಟಲೆ ಸಮಯ ವ್ಯಯಿಸುವಂತೆ ಮಾಡಿತು.

ನನ್ನ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಪ್ರತಿಯೊಂದು ಅರೇಬಿಕ್ ಪುಟವೂ ಸರಿಯಾಗಿ ಕಾಣಿಸುತ್ತಿತ್ತು. ನಂತರ ನಾನು Lighthouse ಅನ್ನು ರನ್ ಮಾಡಿದೆ. ಸ್ಕ್ರೀನ್‌ಶಾಟ್ ಸಂಪೂರ್ಣ ಬಿಳಿಯಾಗಿ ಬಂದಿತು—ಪುಟವು ಮುರಿದು ಹೋಗಿರಲಿಲ್ಲ ಅಥವಾ ಅರ್ಧಂಬರ್ಧ ಲೋಡ್ ಆಗಿರಲಿಲ್ಲ, ಬದಲಿಗೆ ಸಂಪೂರ್ಣ ಬಿಳಿಯಾಗಿತ್ತು.

URL ಮತ್ತು HTML ಬದಲಾಗಿರಲಿಲ್ಲ. Chrome ಪುಟವನ್ನು ತೋರಿಸಿತು, ಆದರೆ Headless Chrome ಏನನ್ನೂ ತೋರಿಸಲಿಲ್ಲ. Google ಮತ್ತು Bing ನ ಬಾಟ್‌ಗಳು (bots) ಹೆಡ್‌ಲೆಸ್ ಬ್ರೌಸರ್ಗಳನ್ನು ಬಳಸುತ್ತವೆ, ಆದ್ದರಿಂದ ಇದು ಮುಖ್ಯವಾಗಿತ್ತು.

ಇದಕ್ಕೆ ಕಾರಣ ಒಂದು ಸ್ಪ್ಯಾಮ್ ಹನಿಪೊಟ್ (spam honeypot). ಬಾಟ್‌ಗಳನ್ನು ಹಿಡಿಯಲು ನಾನು ಒಂದು ಗುಪ್ತ ಇನ್‌ಪುಟ್ ಅನ್ನು ಸೇರಿಸಿದ್ದೆ ಮತ್ತು ಅದನ್ನು ವ್ಯೂಪೋರ್ಟ್‌ನಿಂದ (viewport) ಬಹಳ ದೂರದಲ್ಲಿ ಇರಿಸಿದ್ದೆ:

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

ಎಡದಿಂದ ಬಲಕ್ಕೆ ಓದುವ ದಾಖಲೆಗಳಲ್ಲಿ, ಬ್ರೌಸರ್ ಓವರ್‌ಫ್ಲೋ ಅನ್ನು ಕತ್ತರಿಸುತ್ತದೆ (clips), ಆದ್ದರಿಂದ ಹನಿಪೊಟ್ ಯಾವುದೇ ದೃಶ್ಯವಿಲ್ಲದ ಜಾಗದಲ್ಲಿರುತ್ತದೆ.

ನಾನು dir="rtl" ಎಂದು ಸೆಟ್ ಮಾಡಿದಾಗ, ಸ್ಕ್ರಾಲ್ ಮೂಲವು (scroll origin) ಬಲದ ಅಂಚಿಗೆ ಜಿಗಿಯುತ್ತದೆ. ಎಡದ ಓವರ್‌ಫ್ಲೋವು ನೈಜ ಜಾಗವಾಗಿ ಬದಲಾಗುತ್ತದೆ, ಇದು ದಾಖಲೆಯನ್ನು ಹತ್ತು ಸಾವಿರ ಪಿಕ್ಸೆಲ್ ಅಗಲಕ್ಕೆ ಎಳೆದುಕೊಳ್ಳುತ್ತದೆ, ಆದರೆ ವಿಷಯವು (content) ಅತ್ಯಂತ ಬಲಭಾಗದಲ್ಲಿ ಗುಂಪುಗೂಡಿರುತ್ತದೆ.

ನನ್ನ ಬ್ರೌಸರ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಬಲದ ಮೂಲಕ್ಕೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಿತು, ಆದ್ದರಿಂದ ನನಗೆ ಯಾವುದೇ ತಪ್ಪು ಕಾಣಿಸಲಿಲ್ಲ. ಆದರೆ ಹೆಡ್‌ಲೆಸ್ ರೆಂಡರರ್ (headless renderer) ಅತ್ಯಂತ ಎಡದ ಮೂಲೆಯಿಂದ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ಮತ್ತು ಒಂಬತ್ತು ಸಾವಿರ ಪಿಕ್ಸೆಲ್‌ಗಳ ಖಾಲಿ ಜಾಗವನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.

ಕೇವಲ ಒಂದು ಪ್ರಾಪರ್ಟಿ ಬದಲಾವಣೆಯೊಂದಿಗೆ ಇದನ್ನು ಸರಿಪಡಿಸಿ.

left ಬದಲಿಗೆ inset-inline-start ಅನ್ನು ಬಳಸಿ.

  • ಹಳೆಯದು: position: absolute; left: -9999px;
  • ಹೊಸದು: position: absolute; inset-inline-start: -9999px;

inset-inline-start ಬರವಣಿಗೆಯ ದಿಕ್ಕನ್ನು ಅನುಸರಿಸುತ್ತದೆ—ಇದು LTR ನಲ್ಲಿ left ಆಗಿ ಮತ್ತು RTL ನಲ್ಲಿ right ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ—ಇದು ಹನಿಪೊಟ್ ಅನ್ನು ಸರಿಯಾದ ಬದಿಯಲ್ಲಿ ಸ್ಕ್ರೀನ್‌ನಿಂದ ಹೊರಗೆ ಇರಿಸುತ್ತದೆ.

ನೀವು RTL ಬೆಂಬಲವನ್ನು ಸೇರಿಸುವಾಗ ನಿಮ್ಮ ಹಳೆಯ ಆಫ್-ಸ್ಕ್ರೀನ್ ಹ್ಯಾಕ್‌ಗಳನ್ನು (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