🥙 Hls 인증

🍕 Hls에서 token 담아서 전달

hls에서 이번에 http header에 토큰을 전달해야 하는 상황이 발생하였다. 인증은 사실 어느 프로그램이나 필요한 부분이다. 다행히 hls.js에서는 http header을 커스텀 할 수 있다.

 

Hls.js에서 Header Custom 하기

xhrSetup 옵션을 통해 setRequestHeader 함수를 통해 헤더에 담아서 보내는 것이 가능하다.

하지만 ios/safari는 Hls.js를 사용할 수 없고, m3u8확장자를 지원하지만, Http header를 커스텀하는 것은 어렵다.

그리하여 쿼리스트링 방식으로 전달하는 방법 뿐이었다. 보안적으로는 안전하지는 않지만, 현재로서는 커스텀하는 방법이 존재 하지 않기 때문에 쿼리스트링으로 처리하였다.

function initHls() {
    if (Hls.isSupported()) {
        hls = new Hls({
            autoStartLoad: false,
            maxBufferSize: 320 * 1000 * 1000,
            liveSyncDurationCount: 1,
            highBufferWatchdogPeriod: 1,
            nudgeMaxRetry: 99,
            lowLatencyMode: false,
            xhrSetup: (xhr) => {
            	/* xhrSetup 옵션을 통해 token 추가 */
                xhr.setRequestHeader("x-auth-token", "token");
            },
        });
        hls.loadSource(videoSrc);
        hls.attachMedia(video);
        hls.startLoad();
    }else {
        video.src = `${videoSrc}?x-auth-token=token`;
    } 
}