Page MenuHomePhabricator

Image Browsing: iOS 12, 15 have CORS failures if wiki is on HTTP
Closed, DuplicatePublic1 Estimated Story Points

Description

(after applying T406365 fix) In local testing with iOS 12 and 15 devices, we seem to have some failures in the CORS anonymous loads of images (needed to get at the cross-origin data to calculate average color and crop position). This may be inconsistent and depend on config and factors, but seems to be the case when redirects get involved:

on iOS 12:

[Error] Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
	getColor (load.php:10:643)
	compute (load.php:38:794)
	onLoad (load.php:38:1046)
[Error] Error: FastAverageColor: security error (CORS) for resource http://upload.wikimedia.org/wikipedia/commons/thumb/5/56/GrandCanyon.NASA.2014.jpg/300px-GrandCanyon.NASA.2014.jpg.
[Error] Cross-origin redirection to https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Canyon_River_Tree_%28165872763%29.jpeg/1280px-Canyon_River_Tree_%28165872763%29.jpeg denied by Cross-Origin Resource Sharing policy: Origin http://moya.local:8080 is not allowed by Access-Control-Allow-Origin.
[Error] Cannot load image http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Canyon_River_Tree_%28165872763%29.jpeg/1280px-Canyon_River_Tree_%28165872763%29.jpeg due to access control checks.
[Error] Failed to load resource: Cross-origin redirection to https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Canyon_River_Tree_%28165872763%29.jpeg/1280px-Canyon_River_Tree_%28165872763%29.jpeg denied by Cross-Origin Resource Sharing policy: Origin http://moya.local:8080 is not allowed by Access-Control-Allow-Origin. (1280px-Canyon_River_Tree_(165872763).jpeg, line 0)
[Error] [SmartCrop] error: – EncodingError: Access control error.

on iOS 15:

[Error] Cross-origin redirection to http://upload.wikimedia.org/wikipedia/commons/thumb/5/56/GrandCanyon.NASA.2014.jpg/300px-GrandCanyon.NASA.2014.jpg denied by Cross-Origin Resource Sharing policy: Origin http://moya.local:8080 is not allowed by Access-Control-Allow-Origin. Status code: 301
[Error] Cannot load image http://upload.wikimedia.org/wikipedia/commons/thumb/5/56/GrandCanyon.NASA.2014.jpg/300px-GrandCanyon.NASA.2014.jpg due to access control checks.
[Error] Failed to load resource: Cross-origin redirection to http://upload.wikimedia.org/wikipedia/commons/thumb/5/56/GrandCanyon.NASA.2014.jpg/300px-GrandCanyon.NASA.2014.jpg denied by Cross-Origin Resource Sharing policy: Origin http://moya.local:8080 is not allowed by Access-Control-Allow-Origin. Status code: 301 (300px-GrandCanyon.NASA.2014.jpg, line 0)
[Error] Cross-origin redirection to http://upload.wikimedia.org/wikipedia/commons/thumb/5/56/GrandCanyon.NASA.2014.jpg/1280px-GrandCanyon.NASA.2014.jpg denied by Cross-Origin Resource Sharing policy: Origin http://moya.local:8080 is not allowed by Access-Control-Allow-Origin. Status code: 301
[Error] Cannot load image http://upload.wikimedia.org/wikipedia/commons/thumb/5/56/GrandCanyon.NASA.2014.jpg/1280px-GrandCanyon.NASA.2014.jpg due to access control checks.
[Error] Failed to load resource: Cross-origin redirection to http://upload.wikimedia.org/wikipedia/commons/thumb/5/56/GrandCanyon.NASA.2014.jpg/1280px-GrandCanyon.NASA.2014.jpg denied by Cross-Origin Resource Sharing policy: Origin http://moya.local:8080 is not allowed by Access-Control-Allow-Origin. Status code: 301 (1280px-GrandCanyon.NASA.2014.jpg, line 0)
[Error] [SmartCrop] error: – EncodingError: Access control error.

Event Timeline

Change #1193479 had a related patch set uploaded (by Bvibber; author: Bvibber):

[mediawiki/extensions/ReaderExperiments@master] Image browsing: Fix for CORS image loads on iOS 12, 15

https://gerrit.wikimedia.org/r/1193479

egardner triaged this task as High priority.Oct 6 2025, 4:20 PM
egardner set the point value for this task to 1.

Change #1193479 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Image browsing: Fix for CORS image loads on iOS 12, 15

https://gerrit.wikimedia.org/r/1193479

Change #1194189 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/ReaderExperiments@master] Only target protocol-relative urls

https://gerrit.wikimedia.org/r/1194189

Change #1194189 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Image browsing: Fix for CORS image loads on iOS 12, 15

https://gerrit.wikimedia.org/r/1194189

QA on beta

Steps:

  1. Navigate to a wiki page on beta and enable image browsing and minerva skin via URL params https://en.wikipedia.beta.wmcloud.org/wiki/Berlin?imageBrowsing=true&useskin=minerva
  2. The image browsing feature should be visible under the article title.

QA:

  • Verify that there are no errors in the browser console, specifically any CORS-related error.
  • Verify that images are loading as expected.

Findings

Note: I'm only able to test iOS 12 on-device. Simulator allows versions iOS 15-18, but 15 is unsupported on my MacBook.

iOS 12

  • No errors in the console when navigating to https and images load as expected.
  • CORS errors are present in the console when navigating to http, page redirects to https, and images load as expected. Screenshot below from Safari on iOS 12 iPad developer tools.
    T406377 QA_on-device_iPad iOS12.png (1,984×1,272 px, 549 KB)

cc: @bvibber are these findings expected?

@lwatson thanks! let me double-check those remaining errors

@lwatson ok, confirmed those results are as expected -- the remaining errors in console are additional problems that happen on 12 that didn't happen on 15. So that is as expected -- it skips over the redirect, loads the images, and then the color detection still errors out. ;)

Do you need another set of eyes to confirm the expected behavior of iOS 15? If not, then I'm happy to move this to signoff.

@bvibber @lwatson, do you want me to test this on a specific iOS version/device on browserstack?