Images won't load on iPad OS but loads fine on iPhone iOS

PS: Tried to find on the forum relatable topics before posting.

So, my images loads on iPhone iOS, but it doesn’t load on iPad iOS, why?

Proposition

Do Cloudflare image serve different formats based on the User-Agent, or why am I getting a 403 Forbidden while on a iPhone device User-Agent it replies with 200 no problem?

Disclousure

The bug was repported by one of my customers, with an actual iPad iOS. And I could easily reproduce the problem on MacOS Safari with Responsive Design Mode that allows me to “emulate” iPhones and iPads on many iOS versions. The above was used as iOS 13 and iOS 14

iPad :no_entry_sign:

request

:method: GET
:scheme: https
:authority: imagedelivery.net
:path: /path-hidden/path-hidden/large
Accept: image/webp,image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5
Accept-Encoding: gzip, deflate, br
Host: imagedelivery.net
User-Agent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.1 Safari/605.1.15"
Accept-Language: pt-BR,pt;q=0.9
Referer: hidden-url
Connection: keep-alive

response

:status: 403
Content-Type: text/html; charset=UTF-8
Content-Encoding: gzip
Expires: Thu, 01 Jan 1970 00:00:01 GMT
Referrer-Policy: same-origin
Cache-Control: private, max-age=0, no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Date: Tue, 23 Aug 2022 21:03:23 GMT
Vary: Accept-Encoding
X-Frame-Options: SAMEORIGIN
Alt-Svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400
Server: cloudflare
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
cf-ray: 73f6cb69dba5a586-GRU

iPhone :white_check_mark:
request

:method: GET
:scheme: https
:authority: imagedelivery.net
:path: /path-hidden/path-hidden/large
Accept: image/webp,image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5
Accept-Encoding: gzip, deflate, br
Host: imagedelivery.net
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 13_1_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.1 Mobile/15E148 Safari/604.1
Accept-Language: pt-BR,pt;q=0.9
Referer: hidden-url
Connection: keep-alive

response

:status: 200
Content-Type: image/webp
Access-Control-Allow-Origin: *
Vary: Accept, Accept-Encoding
Content-Security-Policy: default-src 'none'; navigate-to 'none'; form-action 'none'
Accept-Ranges: bytes
Cache-Control: max-age=14400
Date: Tue, 23 Aug 2022 21:09:14 GMT
Content-Length: 150746
X-Content-Type-Options: nosniff
ETag: "cfmVqWrYJnFJEkLBGBuCP5oA"
Alt-Svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400
Server: cloudflare
cf-cache-status: MISS
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
cf-bgj: imgq:86,h2pri
cf-ray: 73f6d3ff8d3fa52f-GRU
cf-images: internal=ok/- q=0 n=77 c=0 v=2022.8.4 l=150746

cUrl samples

I copied the cUrl command from the Safari devtools, and the only difference seem to be the User-Agent:

iPad cUrl
curl 'https://imagedelivery.net/path/hidden/large' \ -X 'GET' \ -H 'Accept: image/webp,image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5' \ -H 'Accept-Encoding: gzip, deflate, br' \ -H 'Host: imagedelivery.net' \ -H 'User-Agent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.1 Safari/605.1.15"' \ -H 'Accept-Language: pt-BR,pt;q=0.9' \ -H 'Referer: X' \ -H 'Connection: keep-alive' --output test.webp

iPhone cUrl

curl 'https://imagedelivery.net/path/hidden/large' \
-X 'GET' \
-H 'Accept: image/webp,image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5' \
-H 'Accept-Encoding: gzip, deflate, br' \
-H 'Host: imagedelivery.net' \
-H 'User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 13_1_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.1 Mobile/15E148 Safari/604.1' \
-H 'Accept-Language: pt-BR,pt;q=0.9' \
-H 'Referer: X' \
-H 'Connection: keep-alive' --output test.webp

Other example

I’ve tried to load this website url on iPad iOS “THE FORUM WONT ALLOW ME TO SHARE A URL” and it returned the error:

What happened? The owner of this website (www.learningcontainer.com) has banned your access based on your browser's signature (73f6f236be64a57f-ua60).

While on iPhone iOS it loaded the page with no issue.

FWIW this isn’t a reliable way of testing since Cloudflare can see that your User-Agent doesn’t match the browser’s signature, which can lead to the WAF kicking in & blocking your request.

The error you posted about accessing www.learningcontainer.com would push me towards that theory.

I agree it is not a reliable way of testing.
Although it reproduced the issue which was first found in the wild by an actual customer on an iPad iOS that couldn’t load the website images.

I’m installing xcode tooling to use its emulator, in the meanwhile Safari devtools helped me reproduce the issue, and I think safari devtools uses the same user agent as an actual iPad iOS safari use.

I wish there were a better explanation for this issue.

This topic was automatically closed after 15 days. New replies are no longer allowed.