2004032 - www.deezer.com - The thumbnails for songs and albums do not load when in desktop mode

Status: NEW

(Web Compatibility :: Site Reports, defect, P2)

Description

[Raul Bucata]

Environment:
Operating system: Android 13
Firefox version: Firefox Mobile 145.0

Steps to reproduce:

1. Navigate to: https://www.deezer.com/en/channels/japanesemusic
2. Request desktop site and observe the thumbnails

Expected Behavior:
Thumbnails images are loading

Actual Behavior:
Thumbnails images are missing

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/191826

Comment 1

[Raul Bucata]

The unsupported banner is present on all browsers.

Comment 2

[Raul Bucata]

Attachment: Chr vs ff android

Comment 3

[Kagami Rosylight [:saschanaz] (they/them)]

Also some SW fetch and CORS error observed, which is not seen in Chrome.

Failed to load ‘https://cdn-assets.dzcdn.net/common/js/gdpr-appliance.js’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘[Object]’. service-worker.19c23996c3a000000000.js:1:94909
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-assets.dzcdn.net/common/js/gdpr-appliance.js. (Reason: CORS request did not succeed). Status code: (null).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.segment.com/v1/projects/VyJDmr2wHu0SDrieAdHE8tIX2Gi2WgUL/settings. (Reason: CORS request did not succeed). Status code: (null).
Failed to load ‘https://auth.deezer.com/login/renew?jo=p&rto=c&i=c’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘[Object]’. service-worker.19c23996c3a000000000.js:1:94909
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://auth.deezer.com/login/renew?jo=p&rto=c&i=c. (Reason: CORS request did not succeed). Status code: (null).
Failed to load ‘https://auth.deezer.com/login/anonymous?jo=p&rto=c’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘[Object]’. service-worker.19c23996c3a000000000.js:1:94909
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://auth.deezer.com/login/anonymous?jo=p&rto=c. (Reason: CORS request did not succeed). Status code: (null).

In this case it doesn't seem to request the right images at all though. It only requests the default-empty images (which also shows CORS error in parent process network tab.)

Needs more look.

Comment 4

[Kagami Rosylight [:saschanaz] (they/them)]

Err, forget about the images not being requested:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/cover/766ad395c48398c1276d36fce522ab18/528x528-000000-80-0-0.jpg. (Reason: CORS request did not succeed). Status code: (null).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/cover/c52bc5d7bf470cd03417e3b29b2f476c/528x528-000000-80-0-0.jpg. (Reason: CORS request did not succeed). Status code: (null).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/cover/2d5c0b1226c8f8b36f1dd5856e3d42d7/528x528-000000-80-0-0.jpg. (Reason: CORS request did not succeed). Status code: (null).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/cover/d853334e112b6bf801827c4f19357d71/528x528-000000-80-0-0.jpg. (Reason: CORS request did not succeed). Status code: (null).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/cover/5066b17385f6cf13b8185dcc66081ff3/528x528-000000-80-0-0.jpg. (Reason: CORS request did not succeed). Status code: (null).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/cover/b93e6ce6a75e977a4c216407296c4ec3/528x528-000000-80-0-0.jpg. (Reason: CORS request did not succeed). Status code: (null).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/cover/1486ff7847fe0b701e22a02422a97cb8/528x528-000000-80-0-0.jpg. (Reason: CORS request did not succeed). Status code: (null).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/playlist/0c27752ca8b915995673f37ddd3ef92e/528x528-000000-80-0-0.jpg. (Reason: CORS request did not succeed). Status code: (null).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/playlist/e92c61c31a7fe3b3b6251448a3a73b53/528x528-000000-80-0-0.jpg. (Reason: CORS request did not succeed). Status code: (null).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/playlist/36192684ab54222986162fa645a62a5e/528x528-000000-80-0-0.jpg. (Reason: CORS request did not succeed). Status code: (null).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/playlist/b5b2938fd59449c9b4ab08cad2d72956/528x528-000000-80-0-0.jpg. (Reason: CORS request did not succeed). Status code: (null).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/playlist/7c249cf887f0df48317cc30742b59c88/528x528-000000-80-0-0.jpg. (Reason: CORS request did not succeed). Status code: (null).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/playlist/3676952f32c32978634152613e63b4b4/528x528-000000-80-0-0.jpg. (Reason: CORS request did not succeed). Status code: (null).

Comment 5

[Kagami Rosylight [:saschanaz] (they/them)]

And I see a bunch of this:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/cover/ab67a06dcb5eec3a2b727652fad80e8c/528x528-000000-80-0-0.jpg. (Reason: header ‘user-agent’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/cover/766ad395c48398c1276d36fce522ab18/528x528-000000-80-0-0.jpg. (Reason: header ‘user-agent’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/cover/c52bc5d7bf470cd03417e3b29b2f476c/528x528-000000-80-0-0.jpg. (Reason: header ‘user-agent’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/cover/2d5c0b1226c8f8b36f1dd5856e3d42d7/528x528-000000-80-0-0.jpg. (Reason: header ‘user-agent’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/cover/5066b17385f6cf13b8185dcc66081ff3/528x528-000000-80-0-0.jpg. (Reason: header ‘user-agent’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/cover/d853334e112b6bf801827c4f19357d71/528x528-000000-80-0-0.jpg. (Reason: header ‘user-agent’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn-images.dzcdn.net/images/cover/b93e6ce6a75e977a4c216407296c4ec3/528x528-000000-80-0-0.jpg. (Reason: header ‘user-agent’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).

Indeed this fails (only the user-agent header matters, everything else in the option doesn't matter, but anyway the following is what's being called):

fetch("https://cdn-images.dzcdn.net/images/cover/c997e029f707e332f94754b48226e80e/528x528-000000-80-0-0.jpg", { cache: "default", credentials: "same-origin", integrity: "", method: "GET", mode: "cors", redirect: "follow", referrer: "https://www.deezer.com/", headers: { accept: "image/avif,image/webp,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5", "accept-language": "en-DE,ja-JP;q=0.9", "user-agent": "Mozilla/5.0 (X11; Linux x86_64; rv:149.0) Gecko/20100101 Firefox/149.0" } })

Access-Control-Allow-Headers header only includes Range. Interestingly this call fails on desktop too with the exact same reason, even if the page doesn't break. (You need to check the parent process network tab to see the failure, because SW returns an OK response with a default gray image on failure.) Chrome always succeeds regardless of desktop or mobile.

But user-agent is something we send anyway. Why is it a problem when it's explicitly set, while accept is okay?

I'm not sure where and how we are checking this, so NI'ing Eden. (I wonder we have relevant WPT failure?)