1393586 - Tracking Protection prevents my account avatar-image from showing up, on Spotify (because its URL is at graph.facebook.com)

Status: RESOLVED WORKSFORME

(Web Compatibility :: Desktop, defect, P3)

Description

[Daniel Holbert [:dholbert]]

STR:
 0. Have a Spotify account (and let it take your profile picture from Facebook - I think this involves linking it to your Facebook account, or something like that.)

 1. Enable Tracking Protection (in my case, I set it to "Always" in Preferences |Privacy|Tracking Protection, which is a Nightly-only option I think)

 2. Visit https://www.spotify.com/us/account/overview/ and log in (if you're not already logged in)

 3. Look at the upper-right corner of the page.

ACTUAL RESULTS:
Your username is printed twice. (The one on the left is actually alt-text for your avatar image, which failed to load because it was blocked by Tracking protection.)

See attached screenshot -- in my case, "dholbert" is printed twice, awkwardly superimposed.

EXPECTED RESULTS:
I want my avatar image to have loaded (rather than the left instance of the username), as it does when Tracking Protection is off.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot with wide window (with 2 copies of username, overlapping)

The UI is different depending on your window size -- I'll show both versions of the breakage.

First, here's the version with a wide window.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot with skinnier window (with 1 copy of username, overlapping Spotify's hamburger menu)

Here's the "mobile" UI that appears if you have a skinnier window.
 
The problematically overlapping username shown here is really just alt-text for the avatar image that Tracking Protection blocked (just as with the previous screenshot).

Comment 3

[Rebecca Billings [:rbillings]]

Tested on 58.0a1 with TP enabled. Able to view account overview with no duplicate or overlapping names/images. However I am unable to connect to Facebook, getting the error "Sorry there has been a temporary error, please try again later." on multiple browsers [is not a Firefox or TP issue] so I cannot verify the avatar part. The page continues to block many resources with TP.

Comment 4

[François Marier [:francois]]

Since the blocked image is using a tracking domain on the Disconnect list, the only thing that could be done is to convince Facebook to move these static images to a domain they don't use for tracking.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: updated screenshot (June 2018)

Here's a screenshot of what this looks like now. (It still happens, though the lower right thing now says "Profile" rather than my username.)

Comment 6

[Sergiu Logigan [:sergiu]]

I wonder why I am getting this: http://prntscr.com/kg6luc
I cannot connect with Facebook on either Nightly 63 or Chrome, even though I have Spotify connected to the FB test account: http://prntscr.com/kg6mbs

Comment 7

[Daniel Holbert [:dholbert]]

Could you file a new bug for that?  It seems likely to be different from this bug.

(If it's caused by tracking protection, then there's a chance they've got a similar root cause; but still probably best to track "cannot login" independently from "image fails to load")

Comment 8

[Sergiu Logigan [:sergiu]]

Looks like I don't know how this works.

You have to "Sign Up With Facebook" first.
https://www.spotify.com/ro/signup/
And then the Sign In with facebook, will work.

Comment 9

[Sergiu Logigan [:sergiu]]

This is related to `tpimages` breakage.

Looking at the devtools console, here are the blocked resources:

The resource at “https://graph.facebook.com/700409416974181/picture?width=64&height=64” was blocked because tracking protection is enabled.[Learn More] overview
The resource at “https://www.google-analytics.com/analytics.js” was blocked because tracking protection is enabled.[Learn More] overview
The resource at “https://www.googletagmanager.com/gtm.js?id=GTM-7BJJ” was blocked because tracking protection is enabled.[Learn More] overview
The resource at “https://tapestry.tapad.com/tapestry/1?ta_partner_id=950&ta_redirect=https%3A%2F%2Ft.myvisualiq.net%2Fsync%3Fprid%3D1001%26ao%3D0%26pruuid%3DTAPAD_%24%7BIDS%3Akey%7D” was blocked because tracking protection is enabled.[Learn More] overview
The resource at “https://static.hotjar.com/c/hotjar-444446.js?sv=6” was blocked because tracking protection is enabled.[Learn More] overview
The resource at “https://bcp.crwdcntrl.net/5/c=10105/tp=VSIQ/tpid=00f78c14-4e60-4faa-958c-e82f1be5a1b3” was blocked because tracking protection is enabled.[Learn More] overview
The resource at “https://idsync.rlcdn.com/420356.gif?partner_uid=00f78c14-4e60-4faa-958c-e82f1be5a1b3” was blocked because tracking protection is enabled.[Learn More] overview
The resource at “https://dpm.demdex.net/ibs:dpid=125310&dpuuid=00f78c14-4e60-4faa-958c-e82f1be5a1b3&redir=https%3A%2F%2Ft.myvisualiq.net%2Fsync%3Fprid%3DAOEPNR1%26ao%3D0%26pruuid%3D%24%7BDD_UUID%7D” was blocked because tracking protection is enabled.[Learn More] overview
The resource at “https://ad.doubleclick.net/ddm/ad/N51703.547841VISUALIQINC/B11317491.151316478;sz=1x1;u=https%3A%2F%2Fwww.spotify.com%2Fro%2Faccount%2Foverview%2F%23_%3D_|VIQ_00f78c14-4e60-4faa-958c-e82f1be5a1b3|;ord=88648668167831180” was blocked because tracking protection is enabled.[Learn More] overview
The resource at “https://tags.bluekai.com/site/21398?id=00f78c14-4e60-4faa-958c-e82f1be5a1b3” was blocked because tracking protection is enabled.[Learn More] overview
The resource at “https://www.facebook.com/tr?id=1901136573502950&ev=PageView&cd[order_id]=00f78c14-4e60-4faa-958c-e82f1be5a1b3” was blocked because tracking protection is enabled.[Learn More] overview 

So these are the domains to test:
graph.facebook.com
www.google-analytics.com
www.googletagmanager.com
tapestry.tapad.com
static.hotjar.com
bcp.crwdcntrl.net
idsync.rlcdn.com
dpm.demdex.net
ad.doubleclick.net
tags.bluekai.com
www.facebook.com

I opened the URL in a fresh browser profile (Firefox Nightly 63, uMatrix installed, normal mode) and loaded the page. The profile picture did NOT load correctly.

I disabled the Spoof Referrer option in uMatrix and then *WHITELISTED*:

-all the CSS (in order to load the page)
-graph.facebook.com
-platform-lookaside.fbsbx.com

After this, the profile picture was correctly loaded.
The other resources didn't help.

https://prnt.sc/kgxzlv

facebook.com can be found in the disconnect-blacklist.json and disconnect-entitylist.json.

So in conclusion:

facebook.com - Social = [tp-content][tp-social]
platform-lookaside.fbsbx.com - Not listed

Comment 10

[Thomas Wisniewski [:twisniewski]]

I can't seem to find the way to link a Facebook account to my Spotify profile so that I can log in with Facebook (there is no "social" account setting that I can see, like their FAQ instructs), so I'm stuck here.

Comment 11

[Daniel Holbert [:dholbert]]

IIRC it used to be effectively required to link your facebook account in order to create a spotify account (I wouldn't have linked them otherwise), but maybe that's changed!

In any case: I think spotify may have changed their UI so that this is no longer a problem. I don't see my avatar photo anywhere in their UI now (including on the Android mobile app). In the top-right of the screen where I was hitting this before, there's now just a generic "line-drawing-person-from-the-shoulders-up" icon alongside my username, and no double-username / alt-text / blocked images that I'm noticing (none of the problems in the original screenshots).