𝗖𝗵𝗿𝗼𝗺𝗲 𝗪𝗼𝗿𝗸𝗲𝗱. 𝗙𝗶𝗿𝗲𝗳𝗼𝘅 𝗪𝗮𝘀 𝗘𝗺𝗽𝘁𝘆.
ഞാൻ ഒരു വിചിത്രമായ ബഗ് കണ്ടു. ഒരേ പേജ് തന്നെ രണ്ട് ബ്രൗസറുകളിൽ അടുത്തടുത്തായി ഞാൻ തുറന്നു.
Chrome-ൽ എല്ലാം ശരിയായി പ്രവർത്തിച്ചു. ചിത്രങ്ങളും ബട്ടണുകളും ഡാറ്റയും എല്ലാം ഞാൻ കണ്ടു. എന്നാൽ Firefox-ൽ ഒന്നും തന്നെ ഉണ്ടായിരുന്നില്ല. ശൂന്യമായ കാർഡുകളും "0 results found" എന്ന സന്ദേശവും മാത്രമാണ് ഞാൻ കണ്ടത്.
ഒരേ URL തന്നെയായിരുന്നു. ഒരേ ബിൽഡ് തന്നെയായിരുന്നു. ഒരേ മെഷീൻ തന്നെയായിരുന്നു.
ഡെവലപ്മെന്റ് സമയത്ത് കണ്ടെത്താൻ ഏതാണ്ട് അസാധ്യമായ ഒരു ബഗ് ആയിരുന്നു ഇതിന് കാരണം. ബ്രൗസർ എന്റെ സ്വന്തം API കോളുകളെ ബ്ലോക്ക് ചെയ്യുകയായിരുന്നു. അവ ബ്ലോക്ക് ചെയ്യാത്ത ഒരൊറ്റ ബ്രൗസറിൽ മാത്രമാണ് ഞാൻ ഡെവലപ്മെന്റ് നടത്തിയിരുന്നത്.
പ്രശ്നം: പേജ് ഒരു തേർഡ് പാർട്ടി ഡൊമെയ്നിൽ (Supabase) നിന്ന് ഡാറ്റ എടുക്കാൻ JavaScript ഉപയോഗിക്കുന്നു. Firefox 'Enhanced Tracking Protection' ഉപയോഗിക്കുന്നു. പല ഉപയോക്താക്കളും uBlock Origin പോലുള്ള ആഡ് ബ്ലോക്കറുകളും ഉപയോഗിക്കുന്നുണ്ട്. ഈ ടൂളുകൾ തേർഡ് പാർട്ടി ഡൊമെയ്നിനെ തിരിച്ചറിയുകയും കമ്പ്യൂട്ടറിൽ നിന്ന് റിക്വസ്റ്റ് പുറത്തേക്ക് പോകുന്നതിന് മുമ്പ് തന്നെ അത് ബ്ലോക്ക് ചെയ്യുകയും ചെയ്യുന്നു.
കോഡ് ക്രാഷ് ആയില്ല. കൺസോളിൽ ചുവന്ന നിറത്തിലുള്ള എററുകളും ഒന്നും കാണിച്ചില്ല. fetch ഒന്നും തന്നെ തിരികെ നൽകിയില്ല. തുടർന്ന് എന്റെ കോഡ് നിർദ്ദേശിച്ചതനുസരിച്ച് ഒരു "empty state" കാണിച്ചു. പുറമെ നിന്ന് നോക്കുന്ന ഒരാൾക്ക് പേജ് ശരിയാണെന്ന് തോന്നും, പക്ഷേ അത് ശൂന്യമായിട്ടാണ് കാണപ്പെട്ടത്.
ഈ ബഗ് രണ്ട് കാരണങ്ങളാൽ ശ്രദ്ധയിൽപ്പെട്ടില്ല:
- ഞാൻ ഡെവലപ്മെന്റ് ചെയ്തത് Chrome-ൽ ആയിരുന്നു, അത് ആ കോൾ അനുവദിച്ചിരുന്നു.
- എന്റെ അനലിറ്റിക്സും അതേ API ഡൊമെയ്ൻ തന്നെ ഉപയോഗിച്ചിരുന്നു. ഉള്ളടക്കം കാണാൻ കഴിയാത്ത ഉപയോക്താക്കളെ എന്റെ ഡാറ്റയിൽ എണ്ണാൻ കഴിയില്ലായിരുന്നു.
ഞാൻ ഇത് എങ്ങനെ പരിഹരിച്ചു:
റിക്വസ്റ്റിനെ വിശ്വസനീയമായ വശത്തേക്ക് (trusted side) മാറ്റുന്നതിനായി ഞാൻ ഒരു റിവേഴ്സ് പ്രോക്സി (reverse proxy) ഉപയോഗിച്ചു.
ഇതിന് പകരം:
mysite.com -> xxxx.supabase.co (Third-party / Blocked)
ഞാൻ മാറിയത് ഇങ്ങോട്ടാണ്:
mysite.com -> mysite.com/sb-api (First-party / Trusted)
API എന്റെ സ്വന്തം ഡൊമെയ്നിലൂടെ റൂട്ട് ചെയ്തതുകൊണ്ട്, ആ റിക്വസ്റ്റ് സൈറ്റിന്റെ തന്നെ ഭാഗമാണെന്ന് ബ്രൗസർ കരുതുന്നു. അതിനാൽ Firefox അതിനെ ഒരു ട്രാക്കറായി (tracker) കാണുന്നില്ല.
ഈ രീതി ഉപയോഗിക്കുകയാണെങ്കിൽ ഓർമ്മിക്കേണ്ട മൂന്ന് കാര്യങ്ങൾ:
- നിങ്ങളുടെ websockets പരിശോധിക്കുക. ലളിതമായ റീറൈറ്റുകൾ (rewrites) റിയൽ-ടൈം ഫീച്ചറുകളെ തകരാറിലാക്കിയേക്കാം.
- നിങ്ങളുടെ auth storage key ഉറപ്പുവരുത്തുക. URL മാറ്റുന്നത് ബ്രൗസർ ലോഗിൻ സെഷനുകൾ സൂക്ഷിക്കുന്ന രീതിയെ ബാധിച്ചേക്കാം.
- സെർവർ സൈഡ് കോളുകൾ നേരിട്ട് തന്നെ നിലനിർത്തുക. ബ്രൗസറിൽ പ്രവർത്തിക്കാത്ത കോഡുകൾക്ക് പ്രോക്സി ആവശ്യമില്ല.
പാഠം: "Chrome-ൽ പ്രവർത്തിക്കുന്നുണ്ടെങ്കിൽ എല്ലാം ശരിയാണ്" എന്ന് കരുതുന്നത് നിർത്തുക.
കർശനമായ പ്രൈവസി സെറ്റിംഗുകളും ആഡ് ബ്ലോക്കറുമുള്ള Firefox-ൽ നിങ്ങളുടെ സൈറ്റ് പരിശോധിക്കുക. അതാണ് നിങ്ങളുടെ യഥാർത്ഥ ശ്രദ്ധിക്കാതെ പോകുന്ന ഭാഗം (blind spot).