Page MenuHomePhabricator

Wordmark SVG failing to load in preview header
Closed, ResolvedPublicBUG REPORT

Assigned To
Authored By
eamedina
Apr 2 2024, 4:57 PM
Referenced Files
F53206453: 2024-05-14_09-27-56.png
May 14 2024, 4:32 PM
F53206442: 2024-05-14_09-27-30.png
May 14 2024, 4:32 PM
F53206424: 2024-05-14_09-27-03.png
May 14 2024, 4:32 PM
F51059739: 2024-05-08_09-21-15.png
May 8 2024, 4:29 PM
F51059588: 2024-05-08_09-21-31.png
May 8 2024, 4:29 PM
F51059426: 2024-05-08_09-17-46.png
May 8 2024, 4:29 PM
F50808548: 2024-05-07_15-09-53.png
May 7 2024, 10:20 PM
F44614646: image.png
Apr 5 2024, 7:52 AM

Description

At least one Wikipedia wordmark SVG is not loading in this Diff article:

https://diff.wikimedia.org/2024/03/28/future-audiences-update-insights-from-exploring-social-apps-and-chatgpt-and-what-were-learning-about-future-readers/

image.png (1×1 px, 1 MB)

This is the background image url that's set: https://wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg (this link loads correctly by itself on a browser).

Error on console

image.png (342×2 px, 333 KB)

image.png (120×1 px, 61 KB)

Task Description:

QA Results - Diff.Wikipedia

ACStatusDetails
1T361626#9796078

Event Timeline

Adding Diff-blog to see if the CSP can be adjusted to allow img-src from wikimedia.org. Note that *.wikimedia.org is already allowed but it doesn't appear to be sufficient.

Thanks for the head's up. I'll look into this for Diff. We recently tightened security settings across the site and it's probably due to those changes.

I'm going to park this in "code review" on the Inuka board until the settings change on the diff blog.

Summary of the steps:

  1. Wikipedia Preview was updated to load wordmark images from wikimedia.org/... instead of wikipedia.org/.... It seems to make more sense. This has not been released in a new version of Wikipedia Preview or it's corresponding Wordpress plugin. Release date is TBD.
  2. Diff CSP needs to be updated to allow loading images from wikimedia.org

Diff CSP has been updated to allow loading of media from *.wikipedia.org (wikimedia.org was already in the list). Images from Wikipedia Preview are now working on Diff.

Diff CSP has been updated to allow loading of media from *.wikipedia.org (wikimedia.org was already in the list). Images from Wikipedia Preview are now working on Diff.

Thanks!

@SBisson Wikipedia wordmark SVG is loading in this Diff article but is it supposed to be in night mode?

Status:
Environment: diff.wikimedia
OS: macOS Sonoma 14.4.1
Browser: Chrome 124
Skins. n/a
Device: MBA M2
Emulated Device:: n/a
Test Links:
https://diff.wikimedia.org/2024/03/28/future-audiences-update-insights-from-exploring-social-apps-and-chatgpt-and-what-were-learning-about-future-readers/

❓AC1: https://phabricator.wikimedia.org/T361626

2024-05-07_15-09-53.png (1×2 px, 487 KB)

@SBisson I forgot I had dark mode in my settings. The task in hand is fine as seen below but what do you think of what it looks like in Firefox when compared to Chrome and Safari? Firefox is scrollable, while the other 2 browsers are not.

Status:
Environment: diff.wikimedia
OS: macOS Sonoma 14.4.1
Browser: Chrome 124
Skins. n/a
Device: MBA M2
Emulated Device:: n/a
Test Links:
https://diff.wikimedia.org/2024/03/28/future-audiences-update-insights-from-exploring-social-apps-and-chatgpt-and-what-were-learning-about-future-readers/

❓AC1: https://phabricator.wikimedia.org/T361626

ChromeSafariFirefox
2024-05-08_09-17-46.png (574×996 px, 277 KB)
2024-05-08_09-21-31.png (466×813 px, 192 KB)
2024-05-08_09-21-15.png (560×911 px, 334 KB)

@SBisson I created a separate task for the scrollbars for Firefox T364881: Scrollbars are visible during Wikipedia Preview in diff.wikipedia for Firefox. As for this task, Wordmark SVG is now loading in preview header as seen from the screenshots below. I will move this to design sign-off. Thanks for all your work!

Status: ✅PASS
Environment: diff.wikimedia
OS: macOS Sonoma 14.4.1
Browser: Chrome 124, Firefox 125, Safari 17.4.1
Skins. n/a
Device: MBA M2
Emulated Device:: n/a
Test Links:
https://diff.wikimedia.org/2024/03/28/future-audiences-update-insights-from-exploring-social-apps-and-chatgpt-and-what-were-learning-about-future-readers/

✅AC1: https://phabricator.wikimedia.org/T361626

ChromeSafariFirefox
2024-05-14_09-27-03.png (573×937 px, 270 KB)
2024-05-14_09-27-30.png (469×878 px, 189 KB)
2024-05-14_09-27-56.png (533×989 px, 212 KB)