Page MenuHomePhabricator

d:User:Lectrician1/discographies3.js & d:User:Lectrician1/embeds.js no longer working following CSP deployment
Open, Needs TriagePublic

Description

Following the deployment of Wikimedia's Content-Security-Policy, the following user-script(s) are no longer fully working:

(I don't use these scripts, but splitting this out of a user-report at T419154#11687907 to prevent someone else from needing to file a task about this when we've already been made aware of it on-Phab. cc @Moebeus @Lectrician1 FYI)


Loading discographies3.js while viewing https://www.wikidata.org/wiki/Q17544624 results in the following CSP errors in my browser's console:

Loading the stylesheet 'https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css' violates the following Content Security Policy directive: [...]
Loading the script 'https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js' violates the following Content Security Policy directive: [...]

embeds.js is un-minified, and (from reading the code) seems like it could be making requests to:

  • open.spotify.com
  • embed.music.apple.com
  • embed.podcasts.apple.com
  • www.youtube.com
  • widget.deezer.com
  • genius.com
  • w.soundcloud.com
  • embed.tidal.com
  • platform.twitter.com
  • www.facebook.com
  • player.vimeo.com
  • store.steampowered.com
  • www.kickstarter.com
  • www.pinterest.com
  • assets.pinterest.com
  • www.mixcloud.com
  • music.amazon.com
  • www.iheart.com
  • www.tiktok.com
  • www.nfb.ca

(Side-note: Writing out this list of domain-names above is making me wonder even more about whether, at least in the medium/long-term, MediaWiki will need a better way of dealing with the CSP implications of on-wiki scripts that call to external sites. Some variation of this idea noted by @Bawolff (AIUI, for gadgets/scripts to be able to tell MediaWiki what external sites they'll be calling) seems like an interesting possible idea on its face, to think about.)

Event Timeline

Thank you for this Kitten! 🙏

Loading discographies3.js while viewing https://www.wikidata.org/wiki/Q17544624 results in the following CSP errors in my browser's console:
Loading the stylesheet 'https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css' violates the following Content Security Policy directive: [...]
Loading the script 'https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js' violates the following Content Security Policy directive: [...]

Is that the same library as available on the Toolforge CDNjs mirror? Not the same version, most recent there is 1.10.21, but perhaps that helps?

https://tools-static.wmflabs.org/cdnjs/ajax/libs/datatables/1.10.21/js/dataTables.jqueryui.js

Although I see now T419318: Loading scripts or stylesheets from https://tools-static.wmflabs.org/cdnjs/ generates CSP warning 🤔

Is that the same library as available on the Toolforge CDNjs mirror? Not the same version, most recent there is 1.10.21, but perhaps that helps?

I wouldn't personally be sure, to be honest - I'm not familiar with the script myself, so I wouldn't know whether or not using that version on the Toolforge mirror would make a difference. (Also, it seems like it'd probably need a Wikidata intadmin to make such a change, as FWICS @Lectrician1 hasn't been active for a few months).

We are generally trying to unbreak things, but this is a pretty heavy set of domains. Could someone provide a little rationale for why all of these domains need to be pulled in live client-side?

I don't use this userscript, so I will defer in large part to those that do (e.g. @Moebeus). However, IIUC, embeds.js pulls in such a large set of domains precisely because its purpose seems to be to display embedded frames for a wide variety of external platforms.
E.g., temporarily disabling CSP locally & loading the script while viewing Taylor Swift's Wikidata item results in at least the following embedded frames being added for Amazon Music/SoundCloud/Spotify/Deezer/TikTok:

screenshot_amazonmusic.png (840×1 px, 254 KB)
screenshot_soundcloud.png (826×1 px, 278 KB)
screenshot_spotify.png (1×1 px, 235 KB)
screenshot_deezer.png (840×1 px, 401 KB)
screenshot_tiktok.png (1×1 px, 462 KB)

(As a side-note, it seems like some of these frames pull in external resources from other, additional domains. So it might be that just allowlisting the ones listed in the description may not be enough to fully unbreak embeds.js. I don't know what the solution is here, but I'm saying this as it feels important to point out the possible disruption that may be being caused by the recent start of CSP enforcement, especially as it doesn't currently seem like there's necessarily a good solution for this sort of userscript. :/)

Maybe it might help splitting up these two? The more important one by far is really the discographies3.js script.
I understand the embedding script might be less feasible given the nature of what it does and all the whitelisting required.