Một Honeypot đã làm hỏng các trang tiếng Ả Rập của tôi

Convertica chạy bằng bảy ngôn ngữ. Sáu ngôn ngữ đọc từ trái sang phải. Tiếng Ả Rập đọc từ phải sang trái. Sự không tương thích đó đã khiến tôi mất hàng giờ đồng hồ để gỡ lỗi.

Mọi trang tiếng Ả Rập trông đều ổn trên trình duyệt của tôi. Sau đó, tôi chạy Lighthouse. Ảnh chụp màn hình trả về kết quả trống trơn—một màu trắng tinh, không phải bị lỗi hay tải dở dang.

URL và HTML không hề thay đổi. Chrome hiển thị trang bình thường, nhưng Headless Chrome lại không hiển thị gì cả. Các bot từ Google và Bing sử dụng trình duyệt headless, vì vậy vấn đề này rất quan trọng.

Thủ phạm chính là một honeypot chống spam. Tôi đã thêm một thẻ input ẩn để bẫy bot và đặt nó nằm xa ngoài khung hình (viewport):

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

Trong các tài liệu đọc từ trái sang phải, trình duyệt sẽ cắt phần tràn (overflow), vì vậy honeypot nằm ở vùng không gian chết.

Khi tôi đặt dir="rtl", điểm bắt đầu cuộn (scroll origin) sẽ nhảy sang cạnh bên phải. Phần tràn bên trái trở thành không gian thực, kéo giãn tài liệu rộng tới mười nghìn pixel trong khi nội dung vẫn bị dồn cục ở tận cùng bên phải.

Trình duyệt của tôi tự động cuộn đến điểm bắt đầu bên phải, nên tôi không thấy có gì sai sót. Một bộ render headless bắt đầu từ góc xa nhất bên trái và đã render chín nghìn pixel trống rỗng.

Hãy khắc phục nó chỉ bằng một thay đổi thuộc tính duy nhất.

Thay thế left bằng inset-inline-start.

  • Cũ: position: absolute; left: -9999px;
  • Mới: position: absolute; inset-inline-start: -9999px;

inset-inline-start tuân theo hướng viết—đóng vai trò là left trong LTR và là right trong RTL—giúp giữ honeypot nằm ngoài màn hình ở đúng phía.

Hãy kiểm tra lại các thủ thuật ẩn ngoài màn hình cũ của bạn khi thêm hỗ trợ RTL. Điều đó bao gồm các honeypot, skip links và các thẻ div ẩn. Hãy thay thế left/right bằng các thuộc tính logic (logical properties).

Trình duyệt của bạn là một công cụ kiểm thử kém cho lỗi này; nó che giấu lỗi bằng cách tự động cuộn cho bạn. Hãy render trang bằng chế độ headless để thấy được các pixel thực tế.

Nếu một ngôn ngữ ngừng nhận được lượt hiển thị (impressions) trong khi các ngôn ngữ khác vẫn bình thường, hãy kiểm tra bộ render của bạn.

Nguồn: https://dev.to/convertica/a-honeypot-field-made-every-arabic-page-on-my-site-render-blank-3aji