کروم کار کرد. فایرفاکس از کار افتاد.
من یک صفحه مشابه را در دو مرورگر در کنار هم دیدم.
در کروم: صفحه به شکلی عالی کار میکرد. تصاویر، دکمهها و لیست کاملی از نتایج را داشت.
در فایرفاکس: صفحه خالی بود. کارتهای جایگزین (placeholder) بدون تصویر و پیامی مبنی بر «۰ نتیجه یافت شد» نمایش داده میشد.
کد یکسان بود. URL یکسان بود. سرور هم مشکلی نداشت.
مشکل از مرورگر بود.
فایرفاکس از Enhanced Tracking Protection استفاده میکند. بسیاری از کاربران همچنین از ابزارهایی مانند uBlock Origin استفاده میکنند. این ابزارها درخواستهای ارسالی به دامنههایی را که فکر میکنند ردیاب (tracker) هستند، مسدود میکنند.
اپلیکیشن من دادهها را از یک دامنه Supabase دریافت میکرد. از نظر فایرفاکس، آن دامنه شبیه به یک ردیاب شخص ثالث (third-party tracker) به نظر میرسید. مرورگر درخواست را حتی قبل از اینکه از سیستم خارج شود، مسدود کرد.
چون عملیات fetch با شکست مواجه شد، کد من حالت جایگزین (fallback state) را نشان داد. برنامه کرش نکرد. خطایی هم در کنسول نمایش داده نشد. فقط یک صفحه خالی نشان داده شد.
این موضوع باعث ایجاد یک نقطه کور دوگانه شد:
- مرورگر توسعه من (Chrome) به شکلی عالی کار میکرد. من هرگز متوجه این باگ نشدم.
- ابزار تحلیل (analytics) من از همان دامنه استفاده میکرد. کاربرانی که نمیتوانستند محتوا را ببینند، ردیابی هم نمیشدند. آنها نامرئی بودند.
من این مشکل را با تغییر از یک درخواست شخص ثالث (third-party) به یک درخواست شخص اول (first-party) حل کردم.
به جای فراخوانی مستقیم دامنه فروشنده، از یک reverse proxy استفاده کردم. من API را از طریق دامنه خودم هدایت کردم.
قبل: mysite.com فراخوانی میکند xxxx.supabase.co (مسدود شده)
بعد: mysite.com فراخوانی میکند mysite.com/sb-api (قابل اعتماد)
حالا مرورگر یک درخواست هممنشأ (same-origin) را میبیند. با فراخوانی دادهها مانند بخشی از خودِ سایت برخورد میکند.
اگر با مشکلات مشابهی روبرو شدید، این سه نکته را به خاطر بسپارید:
• مراقب websockets خود باشید. بازنویسی ساده مسیرها (path rewrites) ممکن است اتصالات بلادرنگ (realtime) را از کار بیندازد. • کلیدهای ذخیرهسازی احراز هویت (auth storage keys) خود را ثابت نگه دارید. تغییر URL میتواند نحوه ذخیرهسازی نشستهای ورود (login sessions) توسط مرورگر را تغییر دهد. • محتوای خود را پیشرندر (Prerender) کنید. اجازه ندهید صفحه شما کاملاً به JavaScript وابسته باشد. اگر مرورگری اسکریپت شما را مسدود کرد، کاربر همچنان باید محتوای اصلی را در HTML ببیند.
از این فرض که «اگر در کروم کار میکند، برای همه کار میکند» دست بردارید. با افزونههای حریم خصوصی (privacy extensions) فعال، تست کنید.