Setting Authorisation on Mp3 Files for Streaming

Question

I would like to host some mp3 files for playing via a basic html5 audio player on a webpage that requires a log in, but the mp3 cant be publicly accessible.

My first thought was to setup a subdomain and use basic auth so that I can pass the credentials in the url, but it turns out this doesnt work in chrome and a auth message pops up for the user asking for credentials.

Since then I've been trying a few methods, such as proxing the request via php or having php stream the audio for me, but I cant seem to get it to work. Regardless of the guide or tutorial I have found on the subject, I am left with a message from the browser saying the mime type is invalid. I've tried playing with the response headers and tweaking scripts or libs I have found, but i'm at a bit of a loss.

Any suggestions about how to achieve this would be great.

Answer 1

There are two general ways to handle this. Both have many specific implementations.

Method 1: Validate the credentials for each media file request

It's identical to handling any other request to your application. However you're doing your login authorization, handle your MP3s the same way.

Method 2: Pre-sign URLs

This is a readily available option if you're using a CDN. Your application generates URLs and signs them with a hash of the essential parts of the URL and a secret. The CDN knows (or can otherwise validate) that the URL was signed with an authorized secret, and doesn't need to re-validate. This is performant, and ensures a proper separation of duties between systems. As a bonus, these URLs can be set up to work only for a few minutes. It's like generating a password for each and every individual file that only works for one person (ideally), and only for a short period of time before automatically rotating to a new password. Your application effectively gives out this password (the signature) every time it generates a URL.