0

With a given url like www.example.com i want to extract the apple touch icon by e.g. searching the dom for this attribute:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">

The Problem is that example.com doesn't provide this tag on the normal website, just on the mobile m.example.com website. I think they use server side device detection and add this tag only on mobile devices. Any idea on how i could get this icons on such websites?

Mantsch
  • 43
  • 4
  • 1
    Server-side redirects are probably using the `User-Agent` HTTP header to detect iOS and forward to the mobile site response, and if you're doing this from the front end, you won't be able to set that particular header via XHR for security reasons. You would need to set up a proxy service on your back-end to set the `User-Agent` header, make the request and then return it to your JS function. – Barney Dec 08 '13 at 19:37

1 Answers1

1

If example.com has a m.example.com mobile version, they are probably redirecting mobile phone users using User Agent sniffing.

The website's server basically looks at your request's User-Agent HTTP header and matches it against a set of values to detect mobile browsers. Here is an example of how it is done in Apache:

RewriteCond %{HTTP_HOST} ^(www\.)?example\.com$ [NC]
RewriteCond %{HTTP_USER_AGENT} (.*)iPhone(.*) [NC,OR]
RewriteRule ^ http://m.example.com [L,QSA]

The good news is you can fool the server into serving you m.example.com by setting the header yourself. Here is an example with curl :

curl facebook.com

curl facebook.com -L -A "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"

The first one will retrieve the HTML for facebook.com, the second one sets the User-Agent header to the iPhone's value. Note that we must use the -L option in order for curl to follow the redirect from facebook.com to m.facebook.com.

Thibaud Colas
  • 1,248
  • 1
  • 16
  • 24