Chrome hoạt động. Firefox trống rỗng.
Tôi đã gặp một lỗi rất kỳ lạ. Tôi mở cùng một trang web trên hai trình duyệt cạnh nhau.
Trên Chrome, mọi thứ đều hoạt động. Tôi thấy hình ảnh, nút bấm và dữ liệu. Trên Firefox, tôi không thấy gì cả. Tôi chỉ thấy các thẻ trống và một thông báo ghi "0 kết quả được tìm thấy."
Cùng một URL. Cùng một bản build. Cùng một máy tính.
Nguyên nhân là một lỗi gần như không thể tìm thấy trong quá trình phát triển. Trình duyệt đã chặn các lệnh gọi API của chính tôi. Tôi chỉ phát triển trên trình duyệt duy nhất không chặn chúng.
Vấn đề: Trang web sử dụng JavaScript để lấy dữ liệu từ một tên miền bên thứ ba (Supabase). Firefox sử dụng tính năng Bảo vệ chống theo dõi nâng cao (Enhanced Tracking Protection). Nhiều người dùng cũng sử dụng các trình chặn quảng cáo như uBlock Origin. Các công cụ này nhận diện tên miền bên thứ ba và chặn yêu cầu ngay cả trước khi nó rời khỏi máy tính.
Mã nguồn không bị lỗi (crash). Nó cũng không hiển thị lỗi đỏ trong console. Lệnh fetch đơn giản là không trả về gì cả. Sau đó, mã của tôi hiển thị trạng thái "trống" (empty state) như đã được lập trình. Với một người quan sát thông thường, trang web trông vẫn ổn. Nó chỉ trông có vẻ trống rỗng.
Lỗi này không thể nhìn thấy được vì hai lý do:
- Tôi phát triển trên Chrome, trình duyệt cho phép lệnh gọi đó.
- Công cụ phân tích (analytics) của tôi cũng sử dụng cùng một tên miền API. Những người dùng không thấy được nội dung cũng không được tính vào dữ liệu của tôi.
Cách tôi đã khắc phục:
Tôi đã sử dụng một reverse proxy để chuyển yêu cầu sang phía được tin cậy.
Thay vì: mysite.com -> xxxx.supabase.co (Bên thứ ba / Bị chặn)
Tôi đã chuyển sang: mysite.com -> mysite.com/sb-api (Bên thứ nhất / Được tin cậy)
Bằng cách định tuyến API thông qua tên miền của chính mình, trình duyệt sẽ coi yêu cầu đó là một phần của chính trang web. Firefox sẽ không còn coi đó là một trình theo dõi nữa.
Ba điều cần lưu ý nếu bạn sử dụng phương pháp này:
- Kiểm tra websockets của bạn. Việc viết lại (rewrite) đơn giản có thể làm hỏng các tính năng thời gian thực.
- Cố định khóa lưu trữ xác thực (auth storage key). Việc thay đổi URL có thể làm thay đổi cách trình duyệt lưu trữ phiên đăng nhập.
- Giữ các lệnh gọi phía máy chủ (server-side) ở dạng trực tiếp. Bạn không cần proxy cho mã nguồn không chạy trên trình duyệt.
Bài học rút ra: Đừng mặc định rằng "nếu nó chạy được trên Chrome, nghĩa là nó đã chạy tốt."
Hãy kiểm tra trang web của bạn trên Firefox với các cài đặt quyền riêng tư nghiêm ngặt và một trình chặn quảng cáo. Đó chính là điểm mù thực sự của bạn.