The Life Unwired with Ben Combee (unwiredben) wrote,
The Life Unwired with Ben Combee

On Safari, URL Redirection, Instagram OAuth, and Fragments

I've been building a Pebble watch app, Phantom Camera, and I published it earlier today on the Pebble store.  A few minutes later, a fellow developer said that the configuration page wasn't working on iOS.

This led to an afternoon-long exploration.

My searching led to a WebKit bug - - which indicated that Safari didn't preserve URL fragments across a redirect.  So, if you navigate to foo/a.html#42 and foo's server redirects you to foo/b.html, you'll not have that #42 applied when the browser loads the b.html page.  However, this didn't seem to apply, as Instagram was putting the hash in the URL it sent.

My authentication with Instagram uses redirection.  I send the user to a URL on the Instagram site, they handle having the user log in and allow my app, and the server then uses a HTTP 302 redirection to return them to my page with the token in the fragment.

On Android and in Firefox and Chrome, I was seeing this working fine.  I'd get the token, JavaScript in the page would read it from the window.location, and all would be fine.  On iOS Safari, the user would see the "authorize" button again.  When I tested manually, I'd see the page load with no token in the URL.

After lots of testing various things, I found myself looking in the network monitor tab in Firefox again, and I noticed an extra 302 redirect.  It turns out that my page was hosted at, but I'd specified in the URLs for Instagram.  My web host did a 302 redirect to, and that second redirect was losing the hash with the authentication token.

Chaning my redirect URL to use directly fixed it, and now its working on all the platforms.
Tags: pebble, webdev

  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 1 comment