Wavethrough – Stealing data from remote sites through (fake) wav files

Jake Archibald discovered a really nice browser bug (which is fixed by now) by which he was able to steal data from remote sites by loading it in as a (fake) wav file.

The exploit works as follows:

  1. Make a request to evil-script, using a Content-Range header to suggest there’s more data to be loaded afterwards.
  2. Have evil-script return a valid WAV PCM header block, but also have it return a Redirect response header to the cross-origin (!) location you want to read out.
  3. Since a Content-Range header was used, the browser will make a second request to fetch the rest of the data.
    • A browser susceptible to this exploit will actually make the request to the remote location defined in the Redirect header.
    • Good browsers will stop here, throwing a CORS error.
  4. Store the returned data in an <audio> element.
  5. Play back the audio fragment, and meanwhile read out its data using a ScriptProcessorNode.

Not all browsers were affected by this bug: in Firefox you could only get the length of the returned content, and it was only in Edge that Jake was able to read out the actual contents of the generated wav file. Here’s a video of Edge (warning: as it’s raw data you’ll only hear glitches and stuff … you might want to turn down the volume):

Nice find Jake!

A shame the process of reporting this bug with the Edge team didn’t go that smooth though (details in Jake’s post). I’m confident the Edge team will adjust / already have adjusted a few things internally to prevent this obstacle course from happening again.

Jake Archibald: “I discovered a browser bug” →

Other neat hacks that recently made rounds was this one, using the W3C Ambient Light Sensor API and this one using mix-blend-mode. Always fun to see smart people find a way to abuse a new technology that seems safe at first 🙂

Simple REST API Explorer

Just pushed a new project to GitHub named Simple REST API Explorer, a simple way to showcasing and exploring all endpoints of your RESTful API.

The demo allows you to call some Twitter API endpoints a sample RESTful API I’ve quickly knocked up as the Twitter API is rather unstructured. Update the index.html file to reflect your own API endpoints. All the rest will go automagically.

Some notes that go with this first version:

  • Only tested with APIs returning JSON or JSONP.
  • Custom headers don’t work with JSONP. If you do need both JSONP and an API-Key: ask your API provider to enable CORS so you can switch to JSON.
  • Only GET supported (for now?) Already fixed 😉

Simple REST API Explorer Demo →
Simple REST API Explorer Source (GitHub) →

Using CORS with All (Modern) Browsers

Cross-Origin Resource Sharing (CORS) works by adding a special header to responses from a server to the client. If a response contains the Access-Control-Allow-Origin header, and if the browser supports CORS, then there is a chance you can load the resource directly with Ajax – no need for a proxy or JSONP hacks.

Using CORS with All (Modern) Browsers →