Đã đăng vào khoảng 7 giờ trước 2 phút đọc

Xây dựng Engine đồng bộ trình duyệt thời gian thực qua Native CDP: Tạm biệt Selenium/Playwright và vượt mọi rào cản Cloudflare Turnstile

## Đặt vấn đề: Nỗi ám ảnh mang tên Selenium, Playwright và Anti-Bot

Nếu đã từng xây dựng các hệ thống điều khiển hoặc đồng bộ trình duyệt đa luồng (Multi-instance Browser Synchronization) bằng các framework quen thuộc như **Selenium**, **Puppeteer** hay **Playwright**, chắc hẳn bạn đã từng đụng phải những "bức tường lửa" khó chịu:

1. **Bị phát hiện tự động hóa (Bot Signatures)**: Các framework trên luôn chèn driver hoặc runtime bridge làm lộ cờ `navigator.webdriver = true`, thay đổi prototype của DOM và để lộ các biến môi trường đặc trưng của bot.
2. **"Tắc thở" trước Cloudflare Turnstile & CAPTCHA**: Chỉ cần một trang web bật Cloudflare Turnstile, Cloudflare 5s Challenge, reCAPTCHA v3 hay hCaptcha, toàn bộ các cửa sổ phụ sẽ lập tức bị chặn (block IP hoặc freeze verification).
3. **Độ trễ và sai lệch tọa độ**: Khi người dùng cuộn trang nhanh, vẽ Canvas thời gian thực hoặc gõ tiếng Việt Telex/VNI, các giải pháp dispatch event thông thường gây ra hiện tượng lệch toạ độ (drift), mất chữ hoặc treo luồng (thread contention).

Để giải quyết triệt để bài toán này, mình đã thiết kế và mã nguồn mở **BrowserSync** — một Realtime Browser Synchronization Engine hiệu năng cao, điều khiển trực tiếp qua **Chrome DevTools Protocol (CDP)** nguyên bản mà không thông qua bất kỳ tầng trung gian WebDriver nào.

---

## 💡 Tại sao CDP nguyên bản lại "vượt mặt" Selenium/Playwright?

Khác với các công cụ tự động hóa thông thường, **BrowserSync** kết nối trực tiếp vào cổng WebSocket debug của các phiên trình duyệt Chromium thật (Google Chrome / Microsoft Edge):

* **Zero-Automation Footprint**: Trình duyệt chạy hoàn toàn tự nhiên, `navigator.webdriver` luôn là `false`, giữ trọn vẹn thông số phần cứng, fingerprint GPU và profile của người dùng thật.
* **Vượt CAPTCHA & Cloudflare Turnstile tự nhiên**: Mọi thao tác chuột, bàn phím và scroll được capture từ Master và dispatch sang các Slaves dưới dạng input event cấp thấp của hệ điều hành qua CDP `Input.dispatchMouseEvent` / `Input.dispatchKeyEvent`. Trình duyệt slave coi đây là tương tác thật 100%, từ đó vượt qua các bài test tương tác của Cloudflare một cách nhẹ nhàng.

![Demo Vượt Cloudflare Turnstile](https://raw.githubusercontent.com/vinzh05/BrowserSync/main/assets/captcha-bypass-demo.png)
*Minh chứng: BrowserSync vượt qua Cloudflare Turnstile đồng thời trên nhiều cửa sổ phụ (Slaves).*

---

## 🏛️ Kiến Trúc Cốt Lõi Của BrowserSync

Dự án được xây dựng song song trên cả hai nền tảng **C# (.NET 9)** và **Python 3 (Asyncio & WebSockets)** với kiến trúc 3-Plane cấp công nghiệp:

```text
[Master Controller (Capture Plane)]
   ├── CDP Observer & TargetManager
   └── DOM Instrumentation Script ──(bindingCalled)──┐
                                                     │
[BrowserSync Protocol Core]                          ▼
   ├── GlobalSequencer (Monotonic Epoch + Seq) <─────┘
   ├── EventJournal RingBuffer (50,000 slots)
   └── SequenceCoordinator (3-Lane Routing + Barrier)
         │                   │
  (Data Plane)         (Control Plane Router)
         │                   │
         ▼                   ▼
[Slaves Execution Pool (Replay & Dispatch Plane)]
   ├── SyncDispatcher
   ├── SlaveNode #1 (StreamController + Actor)
   └── SlaveNode #2 (StreamController + Actor)

1. Phân tách 3 mặt phẳng giao thức (3-Plane Protocol Separation)

Data Plane (23 Semantic Sync Events): Bao gồm click, input, scroll, navigate... được cấp phát số thứ tự GlobalSequence tăng đơn điệu, lưu vào bộ đệm vòng EventJournal (50.000 slots) và định tuyến theo độ ưu tiên.
Control Plane (ControlMessage): Các bản tin Heartbeat, ClockSync, BackpressureSignal chạy out-of-band, không tiêu tốn sequence và không gây ô nhiễm journal.
Recovery Plane (RecoveryMessage): Tự động phát hiện gói tin bị mất (Gap) và gửi yêu cầu replay chính xác từ RAM.

2. Định tuyến 3 làn & Rào chắn kích thước (Viewport Ordering Barrier)

Lane 0 (Lossless FIFO): Ưu tiên tuyệt đối cho các action sống còn (MouseDown, MouseUp, KeyDown, TextInput, Navigate).
Lane 1 (High-Fidelity Motion): Tối ưu cho vẽ Canvas realtime, kéo thả (Drag & Drop) và cảm ứng đa điểm.
Lane 2 (Adaptive Coalescing): Tự động gộp các event ViewportResize và chuột di chuyển nhàn rỗi.

Rào chắn thứ tự (Barrier): Hệ thống bắt buộc phải flush xong kích thước viewport mới nhất trước khi giải phóng sự kiện click kế tiếp, triệt tiêu 100% lỗi lệch toạ độ khi phóng to/thu nhỏ cửa sổ.

3. Đồng bộ ngữ nghĩa DOM & Hỗ trợ gõ tiếng Việt Telex/VNI (IME)

Định danh DOM element bằng thuộc tính bền vững data-browser-sync-id, không sợ vỡ layout khi DOM thay đổi động.
Tách biệt rõ ràng giữa FocusChanged, SelectionChanged (bôi đen / vị trí con trỏ), EditableStateChanged (giá trị input đã commit) và ImeComposition (tổ hợp phím gõ tiếng Việt), giúp việc gõ văn bản qua Telex/VNI trên Master được đồng bộ mượt mà sang các Slaves mà không bị dính chữ hay mất dấu.

🚀 Trải Nghiệm & Chạy Thử Nhanh

Mã nguồn mở hoàn toàn trên GitHub với đầy đủ bộ test suite đạt 100% Pass Rate (34 tests xUnit trên .NET 9 và 12 tests pytest trên Python 3).

Yêu cầu môi trường:

Windows 10 / 11 hoặc Windows Server.
.NET 9.0 SDK hoặc Python 3.10+ (cài websockets, pytest).
Trình duyệt Google Chrome hoặc Microsoft Edge.

1-Click Launch (Khởi động tức thì):

Chỉ cần clone repo về và click đúp vào file batch tương ứng:

Chạy bản C# .NET 9: .\Start-BrowserSync-CSharp.bat
Chạy bản Python 3: .\Start-BrowserSync-Python.bat

🔗 Mã Nguồn Dự Án

Toàn bộ kiến trúc, tài liệu chi tiết (tiếng Anh, tiếng Việt, tiếng Trung) và mã nguồn đã được public tại:

👉 GitHub Repository: https://github.com/vinzh05/BrowserSync

Nếu bạn thấy dự án hữu ích hoặc muốn đóng góp thêm tính năng, đừng quên để lại một ⭐ Star trên GitHub nhé! Mọi đóng góp và thảo luận kiến trúc luôn được hoan nghênh.

Browser Chrome DevTools