もうコロナ収束しても出社する気がない streampack 木村です。

こういったご時世を反映してか、ライブ配信案件がかなり増加してきています。

HTTP ベースのストリーミングは基本、来るものは拒まずなので、何かで制限をかけてあげないといけないのですが、お手軽案として、CloudFront を利用した Signed Cookie (署名付き cookie) の簡単な例をご紹介します。

構成

使用するリソースは以下です。

MediaLive
MediaStore
S3
CloudFront

前提

MediaLive、MediaStore、S3、CloudFront については既に構築済みでストリーミングができる状態にあるところから開始します。
CloudFront には独自ドメインを設定しています。（タダで取得した streampack.ga）

手順

それではさっそくまいりましょう。

CloudFront キーペアの作成

まずは CF のキーペアを作成します。ローカルで作る方法もありますが、AWS コンソールから発行することもできます。（要 root アカウント）

【作成方法】
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/private-content-trusted-signers.html

出来上がった プライベートキー と アクセスキーID は大切に保存しておきましょう。

カスタムポリシーステートメントの用意

署名付き cookie で利用するポリシーを JSON ファイルとして作成します。

設定するパラメータは必要最低限として、これを policy.json として保存します。

{"Statement":[{"Resource":"http*://*.streampack.ga/*","Condition":{"DateLessThan":{"AWS:EpochTime":1621555191}}}]}

Items	Values
Resource	対象となるホスト、パスを指定（ワイルドカード可）
AWS:EpochTime	有効期限を UNIXTIME で指定

1. ポリシーステートメントを base64 エンコード

下記コマンドを実行して結果をメモしておきましょう。

$ cat ./policy.json | openssl base64 | tr '+=/' '-_~'

2. ポリシーステートメントを署名して base64 エンコード

下記コマンドを実行して結果をメモしておきましょう。

$ cat ./policy.json | openssl sha1 -sign ./[privatekey].pem | openssl base64 | tr '+=/' '-_~'

3. cookie をセットする

上記を結果を用いてセットする cookie を作成します。
Player が CF にアクセスするときに下記 cookie を渡すことにより、認証をパスすることができます。

cookie	value
CloudFront-Key-Pair-Id	アクセスキーID
CloudFront-Policy	上記１の結果
CloudFront-Signature	上記２の結果

CloudFront 設定

Origins 設定

今回、マルチオリジンを利用して、Player と HLS 取得先をそれぞれ設定します。

Behaviors 設定

HTML５ Player を S3 から（Default）
HLS は MediaStore から（ts と m3u8）取得するように設定します。

Restrict Viewer Access 設定

Behaviors の ts と m3u8 設定で Restrict Viewer Access を有効にします。
Default はそのまま無効とします。これは HTML を読み込ませて cookie を取得される為です。

Player の用意

今回 HTML で javascript を使用して cookie をセットし、同時に HTML5 Player も埋め込んでしまいます。

Player 例：

<!DOCTYPE html>
<html>
<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.86/clappr.min.js"></script>
</head>
<body>
  <div id="player"></div>
  <script>
	document.cookie = "CloudFront-Key-Pair-Id=XXXXXXXXXXXXXXXXXXXX; path=/";
	document.cookie = "CloudFront-Policy=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX; path=/";
	document.cookie = "CloudFront-Signature=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX; path=/";
    var player = new Clappr.Player({
      source: "https://xxx.streampack.ga/xxx/index.m3u8",
      parentId: "#player"
    });
  </script>
</body>

document.cookie に上記で作成した cookie を指定し、ついでに path=/ も付与することで、サイト全体がこの cookie の対象となります。

source には CloudFront 経由の MediaStore の HLS URL を指定します。

視聴

S3 にアップした HTML ファイルに CF 経由でアクセスします。
Behaviors Default には制限をかけていないので、HTML ファイルまでは誰でもアクセスできます。

ブラウザがこの HTML を読み込む際に、cookie を取得して、続く m3u8 と ts のリクエストの際に、この cookie を付与することにより、CF の署名付き cookie が認証されて視聴が可能となります。

ちなみに同じ HTML から document.cookie 部分を削除すると CF に怒られて視聴不可になります。

当たり前だけど URL 直打ちも拒否ります！

kimura7:~ kimura$ curl https://xxx.streampack.ga/xxx/index.m3u8
<?xml version="1.0" encoding="UTF-8"?>
<Error><Code>AccessDenied</Code><Message>Access Denied</Message><RequestId>D601B63B9BB1393C</RequestId><HostId>qV0Y6iA+8rZx0Q8TM/pn+r22UyykEKnsdyPUHmkFjRd4v8Y/7BHH3gM6prUe6v8d/zxHjSNjXz0=</HostId></Error>

まとめ

今回は超絶、全部手作業ですが、最小構成の場合は結構簡単に設定することができます。

これで ffmpeg -i -movflags faststart.... な人はサヨウナラです。

参考

cookie 生成にあたり、@suhirotakaさんが作成された下記の投稿が大変参考になりました。