𝗖𝗵𝗿𝗼𝗺𝗲 𝗪𝗼𝗿𝗸𝗲𝗱. 𝗙𝗶𝗿𝗲𝗳𝗼𝘅 𝗙𝗮𝗶𝗹𝗲𝗱.
Tôi đã xem cùng một trang web trên hai trình duyệt đặt cạnh nhau.
Trong Chrome: Trang web hoạt động hoàn hảo. Nó có đầy đủ hình ảnh, nút bấm và danh sách kết quả.
Trong Firefox: Trang web trống trơn. Nó chỉ hiển thị các thẻ giữ chỗ (placeholder) không có hình ảnh và một thông báo nói rằng tìm thấy 0 kết quả.
Mã nguồn vẫn vậy. URL vẫn vậy. Máy chủ vẫn hoạt động bình thường.
Vấn đề nằm ở trình duyệt.
Firefox sử dụng Enhanced Tracking Protection. Nhiều người dùng cũng sử dụng các công cụ như uBlock Origin. Các công cụ này chặn các yêu cầu gửi đến các tên miền mà chúng cho là trình theo dõi (trackers).
Ứng dụng của tôi lấy dữ liệu từ một tên miền Supabase. Đối với Firefox, tên miền đó trông giống như một trình theo dõi bên thứ ba. Trình duyệt đã chặn yêu cầu ngay cả trước khi nó rời khỏi máy tính.
Vì lệnh fetch thất bại, mã của tôi đã hiển thị trạng thái dự phòng (fallback state). Nó không bị lỗi (crash). Nó cũng không hiển thị lỗi trong console. Nó chỉ hiển thị một trang trống.
Điều này tạo ra một "điểm mù kép":
- Trình duyệt phát triển của tôi (Chrome) hoạt động hoàn hảo. Tôi chưa bao giờ thấy lỗi này.
- Công cụ phân tích (analytics) của tôi cũng sử dụng cùng tên miền đó. Những người dùng không thể thấy nội dung cũng không thể bị theo dõi. Họ trở nên vô hình.
Tôi đã khắc phục điều này bằng cách chuyển từ yêu cầu bên thứ ba (third-party request) sang yêu cầu bên thứ nhất (first-party request).
Thay vì gọi trực tiếp đến tên miền của nhà cung cấp, tôi đã sử dụng một reverse proxy. Tôi điều hướng API thông qua tên miền của chính mình.
Trước: mysite.com gọi xxxx.supabase.co (Bị chặn) Sau: mysite.com gọi mysite.com/sb-api (Được tin cậy)
Giờ đây, trình duyệt thấy một yêu cầu cùng nguồn gốc (same-origin request). Nó coi việc gọi dữ liệu như một phần của chính trang web đó.
Nếu bạn gặp phải các vấn đề tương tự, hãy nhớ ba điều sau:
• Chú ý đến websockets của bạn. Việc viết lại đường dẫn (path rewrites) đơn giản có thể làm hỏng các kết nối thời gian thực (realtime). • Cố định các khóa lưu trữ xác thực (auth storage keys). Việc thay đổi URL có thể làm thay đổi cách trình duyệt lưu trữ các phiên đăng nhập. • Prerender nội dung của bạn. Đừng để trang web phụ thuộc hoàn toàn vào JavaScript. Nếu trình duyệt chặn script của bạn, người dùng vẫn nên thấy được nội dung cốt lõi trong HTML.
Đừng mặc định rằng nếu nó chạy được trên Chrome thì nó sẽ chạy được với tất cả mọi người. Hãy kiểm tra với các tiện ích mở rộng về quyền riêng tư đã được bật.