피드로 돌아가기
Why Reddit, IndieHackers, and Twitter Lexical Editors Block Programmatic Input
Dev.toDev.to
Frontend

Lexical Editor의 State Machine 기반 입력 차단 분석 및 우회 전략

Why Reddit, IndieHackers, and Twitter Lexical Editors Block Programmatic Input

孫昊2026년 5월 6일5intermediate

Context

Reddit 등 현대적 Rich-text Editor인 Lexical은 DOM을 State의 단순 투영체로 활용하는 아키텍처를 채택함. 이로 인해 외부에서 수행하는 DOM Mutation이 내부 State와 불일치하여 즉시 롤백되는 구조적 제약이 존재함.

Technical Solution

  • DOM 직접 수정 방식의 한계: innerText 수정 시 Lexical Reconciler가 State mismatch를 감지하여 변경 사항을 무시하는 구조
  • Synthetic Event 차단: isTrusted 플래그가 없는 JS 생성 이벤트는 Lexical의 Input Listener 단계에서 필터링 처리
  • Browser Level Event 활용: Playwright의 keyboard.type을 통해 Chromium 입력 파이프라인 수준에서 isTrusted: true 이벤트 생성 시도
  • CDP(Chrome DevTools Protocol) 직접 제어: Input.dispatchKeyEvent를 사용하여 브라우저 하위 시스템에서 이벤트를 전송함으로써 Anti-bot 탐지 우회
  • 하이브리드 워크플로우 설계: 자동화 가능 영역(Title)과 사용자 개입 영역(Body Paste)을 분리하여 신뢰성 확보

1. Rich-text Editor 자동화 시 DOM 수정 대신 내부 Editor Instance API 접근 가능 여부 확인

2. Synthetic Event 차단 여부를 확인하고 CDP 수준의 하드웨어 이벤트 시뮬레이션 검토

3. Anti-bot 탐지 패턴(이벤트 발생 간격 및 순서) 분석을 통한 Human-like 인터랙션 설계

4. 기술적 한계가 명확한 경우 Clipboard API를 활용한 사용자 최종 승인 단계 도입

원문 읽기