허니팟 때문에 아랍어 페이지가 망가졌습니다

Convertica는 7개 언어로 운영됩니다. 6개 언어는 왼쪽에서 오른쪽으로 읽는 방식(LTR)이지만, 아랍어는 오른쪽에서 왼쪽으로 읽는 방식(RTL)입니다. 이 불일치 때문에 디버깅에 몇 시간을 허비했습니다.

브라우저에서 볼 때 모든 아랍어 페이지는 멀쩡해 보였습니다. 하지만 Lighthouse를 실행하자 스크린샷이 빈 화면(완전한 흰색)으로 나왔습니다. 페이지가 깨지거나 절반만 로드된 것이 아니었습니다.

URL과 HTML은 변하지 않았습니다. Chrome은 페이지를 제대로 표시했지만, Headless Chrome은 아무것도 보여주지 않았습니다. Google과 Bing의 봇들은 headless 브라우저를 사용하기 때문에 이는 중요한 문제였습니다.

원인은 스팸 허니팟(honeypot)이었습니다. 봇을 잡기 위해 숨겨진 input 요소를 추가했고, 이를 뷰포트(viewport)에서 아주 멀리 떨어진 곳에 배치했습니다:

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

왼쪽에서 오른쪽으로 읽는 문서의 경우 브라우저가 넘치는 부분(overflow)을 잘라내기 때문에, 허니팟은 빈 공간에 위치하게 됩니다.

하지만 dir="rtl"을 설정하면 스크롤 시작 지점이 오른쪽 끝으로 이동합니다. 이때 왼쪽으로 넘치는 부분이 실제 공간이 되어, 콘텐츠는 오른쪽 끝에 뭉쳐 있는 상태에서 문서 너비만 만 픽셀까지 늘어나 버립니다.

제 브라우저는 자동으로 오른쪽 시작 지점으로 스크롤했기 때문에 아무런 문제가 없는 것처럼 보였습니다. 하지만 headless 렌더러는 왼쪽 끝 모서리에서 시작하여 아무것도 없는 9,000픽셀의 공간을 렌더링했습니다.

속성 하나만 바꾸면 해결됩니다.

left를 inset-inline-start로 교체하세요.

  • 이전: position: absolute; left: -9999px;
  • 변경 후: position: absolute; inset-inline-start: -9999px;

inset-inline-start는 쓰기 방향을 따릅니다. LTR에서는 left처럼, RTL에서는 right처럼 작동하여 허니팟이 올바른 방향의 화면 밖 영역에 머물도록 유지해 줍니다.

RTL 지원을 추가할 때는 기존에 사용하던 화면 밖 배치(off-screen) 편법들을 점검하십시오. 허니팟, 건너뛰기 링크(skip links), 숨겨진 div 등이 포함됩니다. left/right 대신 논리적 속성(logical properties)을 사용하세요.

브라우저는 이 버그를 테스트하기에 적합하지 않습니다. 브라우저가 자동으로 스크롤을 해주기 때문에 오류를 숨겨버리기 때문입니다. 실제 픽셀을 확인하려면 페이지를 headless 방식으로 렌더링해 보세요.

다른 언어는 괜찮은데 특정 언어의 노출(impressions)이 갑자기 줄어든다면, 렌더러를 확인해 보시기 바랍니다.

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