AES Encryption Examples

AES-128 encryption provides content protection for HLS streams. The player supports authentication through the aesToken option, which adds an Authorization Bearer header to key requests.

Browser Limitations

Some browsers (iOS Safari and Chrome) restrict modifications to key request headers made by the player. In these browsers, the aesToken option will not work. You must implement a proxy server solution to handle AES content decryption in these cases.

Using aesToken Option

The player provides an aesToken option that automatically adds the authentication token as an Authorization Bearer header to key requests. This works in browsers that allow header modifications (Firefox, Edge, etc.).

Setup Code

const mediaSource = {
  id: 'aes-demo',
  src: 'https://your-cdn.com/stream/master.m3u8',
  type: 'application/x-mpegURL',
  title: 'AES Encrypted Stream'
};

const options = {
  aesToken: 'YOUR_AUTH_TOKEN'  // Token will be added as Authorization Bearer header
};

player.setup(mediaSource, options);

Proxy Server Solution (iOS & Chrome)

For browsers that restrict header modifications (iOS Safari, Chrome), the aesToken option will not work. You must implement your own proxy server to handle authentication.

Setup Code

function shouldUseProxy() {
  const isIOS = !!navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
  const isChrome = !!navigator.userAgent.toLowerCase().includes('chrome');

  return isIOS || isChrome;
}

const token = 'YOUR_AUTH_TOKEN';
const streamUrl = 'https://your-cdn.com/stream/master.m3u8';
const proxyUrl = 'https://your-proxy.com/stream';

let mediaSource;
let options = {};

if (shouldUseProxy()) {
  // iOS and Chrome: Use proxy server, token in URL
  // Player's aesToken option won't work in these browsers
  mediaSource = {
    id: 'aes-demo',
    src: `${proxyUrl}/master.m3u8?token=${token}`,
    type: 'application/x-mpegURL',
    title: 'AES Encrypted Stream'
  };
  // No aesToken option - proxy handles everything
} else {
  // Firefox, Edge, etc.: Use player's aesToken option
  mediaSource = {
    id: 'aes-demo',
    src: streamUrl,
    type: 'application/x-mpegURL',
    title: 'AES Encrypted Stream'
  };

  options = {
    aesToken: token  // Player adds this as Authorization Bearer header
  };
}

player.setup(mediaSource, options);

Ravnur Media Services

Simple. Reliable. Flexible.

RMS provides a proxy server implementation that customers can use for handling AES-encrypted content across all browsers.

Learn more about Ravnur Media Services