hls.jsとWASMを用いて、鍵を配信せずに暗号化した動画を配信する (& ctf4b 作問後記)

2023-06-12 2023-06-12

ishikawaryusei

こんにちは、M1のxryuseixです。今回はSECCON Beginners CTF(ctf4b)で出題した問題「[misc] drmsaw」を通じて、鍵を配信せずに暗号化した動画を配信する手法について説明します。

CTF問題の概要

問題文

DRMSAW Movie Playerは著作権を重視したセキュアな動画再生プラットフォームです。もしあなたが動画をダウンロードできたら、フラグと交換しましょう。
この動画をダウンロードできますか? ダウンロードできたらそのファイルを送信してください:

Webサイト

解説(writeup)
https://qiita.com/xryuseix/items/1c03bcb43eee608dcb59#misc-drmsaw-17solved-221pt

問題文に書いてある通り動画がダウンロードできればフラグが手に入ります。

このページにアクセスすると、動画関係のファイルとして以下のファイルをダウンロードします。

main.wasm
hls.js@latest
video.m3u8
video0.ts
video1.ts
video2.ts
enc.key

これは、hls.jsを用いて、動画をいくつかのセグメント(*.ts)に分解し、それぞれを暗号化して送信していることがわかります。後述しますが、本来はvideo.m3u8にプレイリストが記載されており、ここに鍵または鍵のURLが記載されています。しかし、ここにはURI="video://hello_where_is_my_key?"というダミーのURLしか書かれていません。また、enc.keyに鍵が、入っていそうですが、実際にはダミーの鍵しか入っていません。

本問は2つのフェーズで構成されています。

暗号化鍵を入手する
動画のセグメントをダウンロードし、復元する

また、フロントエンドのJSはこのようになっています。

const keyUrl = "/enc.key";
class CustomLoader extends Hls.DefaultConfig.loader {
    constructor(config) {
        super(config);
        this.context = { url: keyUrl };
        const load = this.load.bind(this);
        this.load = function (context, config, callbacks) {
            if (context.type === "manifest") {
                const onSuccess = callbacks.onSuccess;
                callbacks.onSuccess = function (response, stats, context) {
                    response.data = response.data.replace(
                        /#EXT-X-KEY:METHOD=.*,URI=".*"/,
                        `#EXT-X-KEY:METHOD=AES-128,URI="${keyUrl}"`
                    );
                    onSuccess(response, stats, context);
                };
            } else {
                if (context.url.endsWith(keyUrl)) {
                    window.gContext = context
                    hlscotext.load(context);
                    context = window.gContext;
                }
                window.globalContext = null;
            }
            return load(context, config, callbacks);
        };
    }
}

function mediaPlayer() {
    const video = document.getElementById("video");
    if (!video) {
        return;
    }
    if (typeof Hls !== "undefined" && Hls.isSupported()) {
        const hls = new Hls({ loader: CustomLoader });
        const streamUrl = "/public/videos/video.m3u8";
        hls.loadSource(streamUrl);
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
            hls.attachMedia(video);
            video.addEventListener("canplay", () => {
                console.info("The video can play!");
            });
        });
    } else {
        alert("sorry, your browser does not support.");
    }
}

const initWasm = async () => {
    console.log("wasm loading: start!");
    try {
        const go = new Go();
        const response = await fetch("/main.wasm");
        const buffer = await response.arrayBuffer();
        const result = await WebAssembly.instantiate(buffer, go.importObject);
        go.run(result.instance);
        console.log("wasm loading: finished!");
    } catch (e) {
        alert("sorry, your browser does not support wasm.");
    }
};
initWasm().then(() => {
    mediaPlayer();
});

暗号化鍵はこの箇所でWASM側から挿入されているため、プロキシやJSオーバーライドを用いてJSを書き換えて、contextから鍵を入手することができます。

if (context.url.endsWith(keyUrl)) {
  window.gContext = context
  hlscotext.load(context);
  context = window.gContext;
}

また、最終的にはこのようなコードで動画をダウンロードできます。

import subprocess
import requests

APP_URL = "http://drmsaw.beginners.seccon.games"

def download():
    subprocess.run(["wget", f"{APP_URL}/public/videos/video0.ts"])
    subprocess.run(["wget", f"{APP_URL}/public/videos/video1.ts"])
    subprocess.run(["wget", f"{APP_URL}/public/videos/video2.ts"])

def make_key():
    key = [99, 9, 61, 110, 94, 114, 119, 194, 42, 163, 63, 8, 97, 114, 131, 41]
    with open("enc.key", "wb") as f:
        f.write(bytes(key))

def make_m3u8():
    m3u8 = """#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-KEY:METHOD=AES-128,URI="file:///app/enc.key",IV=0x00000000000000000000000000000000
#EXTINF:3.040000,
file:///app/video0.ts
#EXTINF:3.040000,
file:///app/video1.ts
#EXTINF:2.280000,
file:///app/video2.ts
#EXT-X-ENDLIST
"""

    with open("video.m3u8", "w") as f:
        f.write(m3u8)

def combine():
    subprocess.run(["ffmpeg", "-allowed_extensions", "ALL", "-i", "./video.m3u8", "-c", "copy", "video.mp4", "-y"])

def upload():
    mimetype = "video/mp4"
    file = {'video': ('file', open('./video.mp4', 'rb'), mimetype)}
    res = requests.post(f"{APP_URL}/flag", files=file).text
    print(res)

if __name__ == "__main__":
    download()
    make_key()
    make_m3u8()
    combine()
    upload()

hls.jsで動画配信機能を作成する

こんな感じのコードを書けば良いです。streamUrlだけ場合によって変えます。

<video id="video" width="90%" controls></video>
<script>
function mediaPlayer() {
  const video = document.getElementById("video");
  if (!video) {
    return;
  }
  if (typeof Hls !== "undefined" && Hls.isSupported()) {
    const hls = new Hls();
    const streamUrl = "/public/videos/video.m3u8";
    hls.loadSource(streamUrl);
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      hls.attachMedia(video);
      video.addEventListener("canplay", () => {
        console.info("The video can play!");
      });
    });
  } else {
    alert("sorry, your browser does not support.");
  }
}
mediaPlayer()
</script>

m3u8ファイルや鍵ファイルはこのようなDockerfileで作成できます。

From node:18 AS ts-builder

COPY app/package.json app/tsconfig* app/yarn.lock app/video.mp4 /app/
COPY app/src/ /app/src/

WORKDIR /app

RUN apt-get update && apt-get install -y ffmpeg

RUN mkdir dist
RUN yarn
RUN yarn build

RUN cd ./public/videos && ffmpeg -i ../../video.mp4 -c copy -f hls -hls_time 3 -hls_list_size 0 -muxdelay 0 -hls_flags split_by_time video.m3u8

hls.jsで動画を暗号化したまま配信する

先ほどのDockerfileの最後の行を以下のように変えます。するとm3u8に鍵ファイルのURIが記載され、xhrで取得し、勝手に復号してくれます。

RUN openssl rand -out enc.key 16
RUN echo "/public/videos/enc.key\nenc.key" > ./public/videos/enc.keyinfo
RUN cd ./public/videos && ffmpeg -i ../../video.mp4 -c copy -hls_key_info_file enc.keyinfo -f hls -hls_time 3 -hls_list_size 0 -muxdelay 0 -hls_flags split_by_time video.m3u8

WASMを用いて鍵を配信せずに暗号化した動画を配信する

ここからが本題です。先ほど「CTF問題の概要」で紹介した、Javascriptを用いて、WASM内で鍵ファイルの中身をすり替えます。WASMはgoで書きました。

package main

import (
	"strings"
	"syscall/js"
)

var keyUrl = "/enc.key"
var cnt = 0
var intervalId js.Value

func Load(this js.Value, args []js.Value) interface{} {
	window := js.Global()
	key := [16]byte{99, 9, 61, 110, 94, 114, 119, 194, 42, 163, 63, 8, 97, 114, 131, 41}
	bytes := window.Get("Uint8Array").New(len(key))
	js.CopyBytesToJS(bytes, key[:])
	window.Get("gContext").Get("keyInfo").Get("decryptdata").Set("key", bytes)

	intervalId = window.Call("setInterval", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		if strings.HasSuffix(window.Get("gContext").Get("url").String(), keyUrl) {
			window.Get("gContext").Get("keyInfo").Get("decryptdata").Set("key", bytes)
		}
		cnt += 1
		if cnt > 1000 {
			window.Call("clearInterval", intervalId)
			window.Set("gContext", nil)
		}
		return nil
	}), 10)
	return nil
}

func main() {
	c := make(chan struct{})
	js.Global().Set("hlscotext", js.ValueOf(
		map[string]any{
			"load": js.FuncOf(Load),
		},
	))
	<-c
}

注目すべき箇所はここです。ここでsyscall/jsを用いてwindow.gContext.keyInfo.decryptdata.keyを書き換えています。window.gContextは私が定義した変数ですが、hls.jsではこのkeyInfoに鍵情報を保持しています。

window.Get("gContext").Get("keyInfo").Get("decryptdata").Set("key", bytes)

最後、Dockerfileでmulti-stage buildをします。

# build wasm
FROM golang:1.18 AS wasm-builder

WORKDIR /app
COPY wasm .

RUN GOOS=js GOARCH=wasm go build -o main.wasm main.go

# build app
From node:18 AS ts-builder

COPY app/package.json app/tsconfig* app/yarn.lock app/video.mp4 /app/
COPY app/src/ /app/src/
COPY app/tools/ /app/tools/
COPY app/public/videos/_enc.key /app/public/videos/enc.key

WORKDIR /app

RUN apt-get update && apt-get install -y ffmpeg

RUN mkdir dist
RUN yarn
RUN yarn build

RUN echo "video://hello_where_is_my_key?\nenc.key" > ./public/videos/enc.keyinfo
RUN cd ./public/videos && ffmpeg -i ../../video.mp4 -c copy -hls_key_info_file enc.keyinfo -f hls -hls_time 3 -hls_list_size 0 -muxdelay 0 -hls_flags split_by_time video.m3u8

RUN cd ./public/videos && rm enc.key enc.keyinfo && echo "This key is a dummy. How can it be played without the key file?" > enc.key

# Run Express
FROM node:18

COPY app/public/index.html app/public/wasm_exec.js /app/public/

COPY --from=wasm-builder /app/main.wasm /app/public/
COPY --from=ts-builder /app/dist/ /app/dist/
COPY --from=ts-builder /app/node_modules/ /app/node_modules/
COPY --from=ts-builder /app/public/videos/ /app/public/videos/

RUN apt-get update && apt-get install -y ffmpeg

WORKDIR /app

CMD ["node", "dist/index.js"]

以上！！簡単にhls.jsとWASMを用いて、鍵を配信せずに暗号化した動画を配信することができました。以前より複製は困難になりましたが、今のままではCTFに出題されるほど脆弱なので、issueも立ってるので公式に対応してもらえたら嬉しいなと思っています。