Chrome ਕੰਮ ਕਰ ਰਿਹਾ ਸੀ। Firefox ਫੇਲ ਹੋ ਗਿਆ।

ਮੈਂ ਦੋ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਇੱਕੋ ਪੇਜ ਨੂੰ ਆਮਣੇ-ਸਾਹਮਣੇ ਦੇਖਿਆ।

Chrome ਵਿੱਚ: ਪੇਜ ਬਿਲਕੁਲ ਸਹੀ ਚੱਲ ਰਿਹਾ ਸੀ। ਇਸ ਵਿੱਚ ਤਸਵੀਰਾਂ, ਬਟਨ ਅਤੇ ਨਤੀਜਿਆਂ ਦੀ ਪੂਰੀ ਸੂਚੀ ਸੀ।

Firefox ਵਿੱਚ: ਪੇਜ ਖਾਲੀ ਸੀ। ਇਸ ਵਿੱਚ ਬਿਨਾਂ ਤਸਵੀਰਾਂ ਵਾਲੇ ਪਲੇਸਹੋਲਡਰ ਕਾਰਡ ਦਿਖਾਈ ਦਿੱਤੇ ਅਤੇ ਇੱਕ ਸੁਨੇਹਾ ਆਇਆ ਕਿ 0 ਨਤੀਜੇ ਮਿਲੇ ਹਨ।

ਕੋਡ ਉਹੀ ਸੀ। URL ਵੀ ਉਹੀ ਸੀ। ਸਰਵਰ ਵੀ ਠੀਕ ਸੀ।

ਸਮੱਸਿਆ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਸੀ।

Firefox 'Enhanced Tracking Protection' ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਬਹੁਤ ਸਾਰੇ ਉਪਭੋਗਤਾ uBlock Origin ਵਰਗੇ ਟੂਲਸ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰਦੇ ਹਨ। ਇਹ ਟੂਲਸ ਉਹਨਾਂ ਡੋਮੇਨਾਂ ਨੂੰ ਬਲਾਕ ਕਰ ਦਿੰਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਉਹ ਟ੍ਰੈਕਰ ਮੰਨਦੇ ਹਨ।

ਮੇਰੀ ਐਪ ਨੇ Supabase ਡੋਮੇਨ ਤੋਂ ਡਾਟਾ ਫੈਚ (fetch) ਕੀਤਾ ਸੀ। Firefox ਲਈ, ਉਹ ਡੋਮੇਨ ਇੱਕ third-party tracker ਵਾਂਗ ਲੱਗ ਰਿਹਾ ਸੀ। ਬ੍ਰਾਊਜ਼ਰ ਨੇ ਮਸ਼ੀਨ ਤੋਂ ਬਾਹਰ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਹੀ ਰਿਕਵੈਸਟ ਨੂੰ ਬਲਾਕ ਕਰ ਦਿੱਤਾ।

ਕਿਉਂਕਿ fetch ਫੇਲ ਹੋ ਗਿਆ ਸੀ, ਮੇਰੇ ਕੋਡ ਨੇ fallback state ਦਿਖਾਈ। ਇਹ ਕ੍ਰੈਸ਼ ਨਹੀਂ ਹੋਇਆ। ਇਸਨੇ ਕੰਸੋਲ (console) ਵਿੱਚ ਕੋਈ ਐਰਰ ਨਹੀਂ ਦਿਖਾਇਆ। ਇਸਨੇ ਸਿਰਫ਼ ਇੱਕ ਖਾਲੀ ਪੇਜ ਦਿਖਾਇਆ।

ਇਸ ਨਾਲ ਇੱਕ ਦੋਹਰੀ ਅਣਦੇਖੀ (double blind spot) ਪੈਦਾ ਹੋ ਗਈ:

ਮੈਂ ਇਸ ਨੂੰ third-party ਰਿਕਵੈਸਟ ਤੋਂ first-party ਰਿਕਵੈਸਟ ਵਿੱਚ ਬਦਲ ਕੇ ਠੀਕ ਕੀਤਾ।

ਵੈਂਡਰ ਡੋਮੇਨ ਨੂੰ ਸਿੱਧਾ ਕਾਲ ਕਰਨ ਦੀ ਬਜਾਏ, ਮੈਂ ਇੱਕ reverse proxy ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਮੈਂ API ਨੂੰ ਆਪਣੇ ਖੁਦ ਦੇ ਡੋਮੇਨ ਰਾਹੀਂ ਰੂਟ (route) ਕੀਤਾ।

ਪਹਿਲਾਂ: mysite.com calls xxxx.supabase.co (Blocked) ਬਾਅਦ ਵਿੱਚ: mysite.com calls mysite.com/sb-api (Trusted)

ਹੁਣ, ਬ੍ਰਾਊਜ਼ਰ ਇੱਕ same-origin ਰਿਕਵੈਸਟ ਦੇਖਦਾ ਹੈ। ਇਹ ਡਾਟਾ ਕਾਲ ਨੂੰ ਸਾਈਟ ਦੇ ਹੀ ਇੱਕ ਹਿੱਸੇ ਵਜੋਂ ਮੰਨਦਾ ਹੈ।

ਜੇਕਰ ਤੁਸੀਂ ਅਜਿਹੀਆਂ ਸਮੱਸਿਆਵਾਂ ਦਾ ਸਾਹਮਣਾ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਹਨਾਂ ਤਿੰਨ ਗੱਲਾਂ ਨੂੰ ਯਾਦ ਰੱਖੋ:

• ਆਪਣੇ websockets 'ਤੇ ਨਜ਼ਰ ਰੱਖੋ। ਸਧਾਰਨ path rewrites ਰੀਅਲ-ਟਾਈਮ ਕਨੈਕਸ਼ਨਾਂ ਨੂੰ ਤੋੜ ਸਕਦੇ ਹਨ। • ਆਪਣੀਆਂ auth storage keys ਨੂੰ ਪਿੰਨ (pin) ਕਰੋ। URL ਬਦਲਣ ਨਾਲ ਬ੍ਰਾਊਜ਼ਰ ਲੌਗਇਨ ਸੈਸ਼ਨਾਂ ਨੂੰ ਕਿਵੇਂ ਸਟੋਰ ਕਰਦਾ ਹੈ, ਇਹ ਬਦਲ ਸਕਦਾ ਹੈ। • ਆਪਣੇ ਕੰਟੈਂਟ ਨੂੰ prerender ਕਰੋ। ਆਪਣੇ ਪੇਜ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ JavaScript 'ਤੇ ਨਿਰਭਰ ਨਾ ਰਹਿਣ ਦਿਓ। ਜੇਕਰ ਕੋਈ ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਡੀ ਸਕ੍ਰਿਪਟ ਨੂੰ ਬਲਾਕ ਕਰਦਾ ਹੈ, ਤਾਂ ਉਪਭੋਗਤਾ ਨੂੰ HTML ਵਿੱਚ ਮੁੱਖ ਕੰਟੈਂਟ ਫਿਰ ਵੀ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ।

ਇਹ ਮੰਨਣਾ ਬੰਦ ਕਰੋ ਕਿ ਜੇਕਰ ਇਹ Chrome ਵਿੱਚ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ, ਤਾਂ ਇਹ ਸਾਰਿਆਂ ਲਈ ਕੰਮ ਕਰੇਗਾ। ਪ੍ਰਾਈਵੇਸੀ ਐਕਸਟੈਂਸ਼ਨਾਂ (privacy extensions) ਨੂੰ ਚਾਲੂ ਰੱਖ ਕੇ ਟੈਸਟ ਕਰੋ।

ਸਰੋਤ: https://dev.to/henry_dan_81513dd35a2f540/chrome-showed-the-data-firefox-showed-nothing-the-api-was-being-blocked-4mpn