Cross site HTTP Auth via JavaScript

The best way to authenticate against another website is of course OAuth. But sometimes such an mechanism is not provided. E.g. Magnatune.com currently only supports HTTP Auth. Now that is something completely different, you might say (no communication between the two web servers possible). Well, once authenticated via HTTP Auth with Magnatune.com any site can embed a HTML5 audio element to play the member streams instead of just the free versions. So to enable a member feature in my Magnatune Player Greattune Player I came up with a hack to authenticate against Magnatune via JavaScript. Actually it's several hacks for different browsers and browser versions.

HTTP Auth behaves very differently in different browsers. All non-WebKit browsers show an Auth dialog box when you embed any content from a site that requires the user to be authenticated. WebKit/Chrome does not do that because users might think this box belongs to the website they are on and not to the third party website. (HTTP Auth sessions can be used for user tracking.) Instead it just fails to embed the resource.

So for Firefox, Opera and Internet Explorer I wrote this code:

I needed to embed some resource from streams.magnatune.com to trigger the HTTP Auth dialog. http://magnatune.com/info/changed.txt just contains a decimal number so it is a valid JavaScript and I could embed it with a script tag.

If this script tag's onload fires this means the login was ok. onerror will be fired if the login was not ok because scripts may not be transferred with the HTTP status 401. And even if they could be transferred that way the returned document contains HTML which would raise a JavaScript SyntaxError and will fire the onerror event on the window object.

But only IE>=9 supports the onload and onerror events on script elements, so I just use onreadystatechange for older IEs. Note that in this case I cannot detect if login failed (it will always give the readyState "complete"). But I just don't care for those old IEs.

With this I managed to force the browser's HTTP Auth dialog box and could even detect if login was successful (except for old IEs). But in Chrome/WebKit this did not work. Instead I wrote my own credentials dialog in HTML and used the http://username:password@domain/ syntax to force the browser to login.

But this URL syntax can be used even better for user tracking, because it does not even trigger a dialog box, so this feature was removed in Chrome 19. This meant I had to come up with yet another trick. So no embedded resource shows the HTTP Auth dialog, but when I open a new window on streams.magnatune.com Chrome did display the HTTP Auth overlay. But I don't get any load/error events from such a child window, so what to do? Incidentally Magnatune has a page that accepts an url query parameter and redirects to that url when login was successful. So I wrote this code:

login.html just sets MagnatuneLoginSuccess to true and closes the child window again:

I don't say this is pretty, but it works good enough. See the full source here.

Comments

Post a Comment

Popular posts from this blog

Save/download data generated in JavaScript

Because I was bored I wrote a HTML5 player for Magnatune : Magnatune Player Greattune Player [ repo ]. Besides learning jQuery , HTML5 audio and HTML Drag and Drop I also developed a method to save playlists to files. Everything except the search is implemented in JavaScript, so the server never knows the playlist. Because I didn't want to send the playlist to the server just so the user can download it I investigated what methods there are to save data generated in JavaScript. I came up with the solution presented here. It does not use Flash or a echo server and is therefore supported in every recent browser except Internet Explorer before the version 10.
Read more

Reverse engineering a simple game archive

Image
Sometimes I like to poke around in the files of the games I bought on Steam, just for fun or maybe to listen to the game music. Most game engines put the game files in their own proprietary archive files, so I started to reverse engineer those formats, at least to the point where I could extract the files. Some game archive file formats proved to be so simple that I was able to easily write the archives, too. So I thought I write down how I did it, maybe someone else finds this useful? The main tools I use are a hex editor ( bless ) and Python . Short detour: I'm not 100% satisfied with bless, though. Let me show you what I mean: I would like those fields in the status bar to be text fields that I can edit, making it easy to select a certain area of the file when I know the size in bytes. If anyone knows a (Linux) hex editor that does that let me know! But what I do like about bless is that it displays the bytes at the cursor in all possible number formats and it's dy...
Read more

How to write a binary file format

Recently I wrote a small tool ( mediaextract ) that can extract several file formats from arbitrary binary files. While writing this I had to look at many file format specifications. It quickly came apparent to me what are the dos and what the don'ts when it comes to binary file formats and their documentations, so I thought I summarize them here.
Read more