Closed Bug 1393586 Opened 5 years ago Closed 3 years ago

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

Categories

(Web Compatibility :: Desktop, defect, P3)

Firefox 62
x86_64
Windows 10
defect

Tracking

(Not tracked)

RESOLVED WORKSFORME

People

(Reporter: dholbert, Unassigned)

References

(Blocks 1 open bug, )

Details

(Whiteboard: [tp-content][tp-social])

User Story

facebook.com

Attachments

(3 files)

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.
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.
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).
Whiteboard: tp-product tp-base
Flags: needinfo?(pdolanjski)
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.
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.
Component: Tracking Protection → Desktop
Flags: needinfo?(pdolanjski)
Product: Firefox → Tech Evangelism
Priority: -- → P5
Blocks: tpimages
No longer blocks: tp-breakage
Component: Desktop → Tracking Protection
Priority: P5 → P3
Product: Tech Evangelism → Firefox
Whiteboard: tp-product tp-base → tp-needsrepro
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.)
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
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")
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.
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
User Story: (updated)
Component: Tracking Protection → Desktop
OS: Unspecified → Windows 10
Product: Firefox → Tech Evangelism
Hardware: Unspecified → x86_64
Whiteboard: tp-needsrepro → [tp-content][tp-social]
Version: unspecified → Firefox 62
Product: Tech Evangelism → Web Compatibility

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.

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).

Status: NEW → RESOLVED
Closed: 3 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.