chzzk-bypass/timemachine.js

// 치지직 라이브 응답을 가로채 타임머신 기능을 강제로 활성화한다.
// 스트리머가 타임머신을 꺼둔 방송에서도 플레이어에 되감기(seek) UI 를 표시하고,
// 가능하면 DVR 매니페스트(URL) 까지 함께 갈아끼워 실제 되감기도 동작하도록 만든다.
//
// 동작 원리
//   - 치지직 웹 플레이어는 `api.chzzk.naver.com/service/v3.2/channels/{id}/live-detail`
//     응답의 `content.timeMachineActive` / `content.timeMachinePlayback` 플래그 두 개로
//     되감기 UI 노출 여부를 결정한다.
//   - 같은 채널의 `live-playback-json` 엔드포인트는 DVR 가능한 HLS 매니페스트 URL 을
//     항상 돌려준다. ChzzkDownloader 의 `--stream force-timemachine` 옵션이 쓰는
//     바로 그 엔드포인트다.
//   - 따라서 `live-detail` 응답을 가로채서 (1) 두 플래그를 강제로 true 로 만들고,
//     (2) `livePlaybackJson` 안의 매니페스트 URL 을 `live-playback-json` 응답으로
//     교체하면, 스트리머 설정과 무관하게 되감기 UI 와 실제 seek 동작 모두 살아난다.
//
// 치지직 React 앱은 axios 기반이라 실제 요청은 `XMLHttpRequest` 로 나가고, 일부 경로는
// `fetch` 도 쓴다. 그래서 두 경로 모두 후킹한다.
// manifest 의 `world: "MAIN"`, `run_at: "document_start"` 덕분에 페이지 자체 스크립트가
// 실행되기 전에 후킹할 수 있다.

(function () {
  'use strict';

  const TAG = '[chzzk-bypass:timemachine]';
  // 치지직은 `service/v3.2/...` 처럼 minor 가 붙은 버전을 쓴다. 점(.) 포함 허용.
  const LIVE_DETAIL_RE = /^https:\/\/api\.chzzk\.naver\.com\/service\/v[\d.]+\/channels\/([^\/?#]+)\/live-detail/;

  // 시점/빌드별로 다른 버전이 응답하므로 순차 시도한다.
  const PLAYBACK_JSON_VERSIONS = ['v3.2', 'v3.1', 'v3', 'v2', 'v1'];

  function log() {
    try {
      // eslint-disable-next-line no-console
      console.log.apply(console, [TAG].concat(Array.prototype.slice.call(arguments)));
    } catch (_) {}
  }

  // 원본 fetch 를 캡처. 이후 후킹된 fetch 가 재귀 호출되지 않도록 내부 호출도 이걸 쓴다.
  const originalFetch = window.fetch.bind(window);

  function urlOf(input) {
    try {
      if (typeof input === 'string') return input;
      if (!input) return '';
      // Request 객체
      if (typeof input.url === 'string') return input.url;
      // URL 객체
      if (typeof input.href === 'string') return input.href;
      return String(input);
    } catch (_) { return ''; }
  }

  async function fetchPlaybackJson(channelId) {
    for (const ver of PLAYBACK_JSON_VERSIONS) {
      try {
        const url = `https://api.chzzk.naver.com/service/${ver}/channels/${channelId}/live-playback-json`;
        const resp = await originalFetch(url, { credentials: 'include' });
        if (!resp.ok) continue;
        const json = await resp.json();
        const playback = json && json.content && json.content.playbackJson;
        if (playback) {
          log('playback-json hit via', ver);
          return playback;
        }
      } catch (e) {
        log('playback-json fetch error on', ver, e);
      }
    }
    return null;
  }

  // livePlaybackJson 은 외부에선 JSON 문자열로 들어오지만, 가끔 이미 파싱된
  // 객체 형태로 들어오는 빌드도 있다. 두 경우 모두 처리한다.
  function setLivePlaybackJson(content, replacement) {
    if (typeof content.livePlaybackJson === 'string') {
      content.livePlaybackJson = typeof replacement === 'string'
        ? replacement
        : JSON.stringify(replacement);
    } else {
      content.livePlaybackJson = typeof replacement === 'string'
        ? JSON.parse(replacement)
        : replacement;
    }
  }

  // 파싱된 live-detail JSON 객체를 in-place 로 패치. 변경 여부 반환.
  async function patchLiveDetailData(data, channelIdFromUrl) {
    const content = data && data.content;
    if (!content) return false;

    // 치지직 live-detail 응답에는 두 개의 별개 플래그가 존재한다.
    //   - timeMachineActive    : 채널/방송 단위 타임머신 활성 여부
    //   - timeMachinePlayback  : 플레이어가 실제 되감기 UI 를 켤지 결정하는 플래그
    // 둘 중 어느 하나라도 false 면 UI 가 안 뜨므로 둘 다 true 로 만든다.
    // (참고: github.com/jaesung9507/nvver chzzk/live.go LiveDetail 구조체)
    const alreadyOn = content.timeMachineActive === true && content.timeMachinePlayback === true;
    const channelId = (content.channel && content.channel.channelId) || channelIdFromUrl;

    if (alreadyOn) {
      log('timeMachine already active for', channelId, '— passthrough');
      return false;
    }

    log('forcing timeMachine ON for', channelId);
    content.timeMachineActive = true;
    content.timeMachinePlayback = true;

    // DVR 매니페스트로 교체 시도. 실패해도 플래그는 살려서 UI 만이라도 노출.
    if (channelId) {
      const playback = await fetchPlaybackJson(channelId);
      if (playback) {
        setLivePlaybackJson(content, playback);
        log('livePlaybackJson swapped for DVR manifest');
      } else {
        log('playback-json unavailable; UI shown but seek may not work');
      }
    }
    return true;
  }

  // -------- fetch hook --------
  window.fetch = async function patchedFetch(input, init) {
    const url = urlOf(input);
    const match = url && url.match(LIVE_DETAIL_RE);
    if (!match) return originalFetch(input, init);

    const response = await originalFetch(input, init);
    try {
      const data = await response.clone().json();
      const changed = await patchLiveDetailData(data, match[1]);
      if (!changed) return response;

      const newBody = JSON.stringify(data);
      const headers = new Headers(response.headers);
      headers.set('content-length', String(new Blob([newBody]).size));
      return new Response(newBody, {
        status: response.status,
        statusText: response.statusText,
        headers,
      });
    } catch (e) {
      log('fetch patch failed, returning original', e);
      return response;
    }
  };

  // -------- XHR hook --------
  // 치지직 React 앱은 axios 를 쓰므로 live-detail 은 XHR 로 나간다. fetch 만 후킹하면
  // 아무 일도 일어나지 않는다 (실제 콘솔 로그에서 확인).
  //
  // 전략: live-detail URL 이면 원본 XHR.send 는 호출하지 않고, 내부적으로 fetch 로 같은
  // 요청을 직접 날려 응답을 받아 패치한 뒤, defineProperty 로 XHR 의 응답 관련 속성을
  // 덮어쓰고 readystatechange/load/loadend 이벤트를 합성 발화한다.
  const XHRProto = XMLHttpRequest.prototype;
  const origOpen = XHRProto.open;
  const origSend = XHRProto.send;
  const origSetRequestHeader = XHRProto.setRequestHeader;

  XHRProto.open = function patchedOpen(method, url) {
    try {
      this.__cb_url = typeof url === 'string' ? url : (url && url.toString ? url.toString() : '');
      this.__cb_method = method;
      this.__cb_headers = {};
      this.__cb_intercept = false;
      if (this.__cb_url) {
        const m = this.__cb_url.match(LIVE_DETAIL_RE);
        if (m) {
          this.__cb_intercept = true;
          this.__cb_channel = m[1];
        }
      }
    } catch (_) {}
    return origOpen.apply(this, arguments);
  };

  XHRProto.setRequestHeader = function patchedSetRequestHeader(name, value) {
    try {
      if (this.__cb_intercept) {
        this.__cb_headers[name] = value;
      }
    } catch (_) {}
    return origSetRequestHeader.apply(this, arguments);
  };

  function setProp(obj, key, value) {
    try {
      Object.defineProperty(obj, key, { configurable: true, writable: true, value });
    } catch (_) {}
  }

  function synthesizeXHRResponse(xhr, fetchResp, text) {
    // 응답 본문/메타 덮어쓰기. readyState/status 등은 prototype 의 getter 라서
    // instance 에 data property 로 정의하면 shadow 된다.
    setProp(xhr, 'readyState', 4);
    setProp(xhr, 'status', fetchResp.status);
    setProp(xhr, 'statusText', fetchResp.statusText || '');
    setProp(xhr, 'responseText', text);
    setProp(xhr, 'responseURL', xhr.__cb_url);

    const rt = xhr.responseType || '';
    let response;
    if (rt === '' || rt === 'text') {
      response = text;
    } else if (rt === 'json') {
      try { response = JSON.parse(text); } catch (_) { response = null; }
    } else if (rt === 'arraybuffer') {
      response = new TextEncoder().encode(text).buffer;
    } else if (rt === 'blob') {
      response = new Blob([text], { type: fetchResp.headers.get('content-type') || 'application/json' });
    } else {
      response = text;
    }
    setProp(xhr, 'response', response);

    // 응답 헤더 메서드
    const headerLines = [];
    fetchResp.headers.forEach((v, k) => headerLines.push(k + ': ' + v));
    const headerBlob = headerLines.join('\r\n');
    setProp(xhr, 'getAllResponseHeaders', function () { return headerBlob; });
    setProp(xhr, 'getResponseHeader', function (name) { return fetchResp.headers.get(name); });
  }

  function dispatchXHREvents(xhr) {
    try { xhr.dispatchEvent(new Event('readystatechange')); } catch (_) {}
    try { xhr.dispatchEvent(new ProgressEvent('load')); } catch (_) {}
    try { xhr.dispatchEvent(new ProgressEvent('loadend')); } catch (_) {}
  }

  XHRProto.send = function patchedSend(body) {
    if (!this.__cb_intercept) {
      return origSend.apply(this, arguments);
    }

    const xhr = this;
    const channelId = xhr.__cb_channel;
    log('XHR live-detail intercepted for', channelId);

    (async function () {
      let resp;
      let text = '';
      try {
        resp = await originalFetch(xhr.__cb_url, {
          method: xhr.__cb_method || 'GET',
          headers: xhr.__cb_headers || {},
          credentials: 'include',
          body: body && xhr.__cb_method && xhr.__cb_method.toUpperCase() !== 'GET' ? body : undefined,
        });
        text = await resp.text();
      } catch (e) {
        log('XHR underlying fetch failed', e);
        try { xhr.dispatchEvent(new ProgressEvent('error')); } catch (_) {}
        try { xhr.dispatchEvent(new ProgressEvent('loadend')); } catch (_) {}
        return;
      }

      try {
        let data = null;
        try { data = JSON.parse(text); } catch (_) {}
        if (data) {
          const changed = await patchLiveDetailData(data, channelId);
          if (changed) text = JSON.stringify(data);
        }
      } catch (e) {
        log('XHR patch step failed, returning original body', e);
      }

      synthesizeXHRResponse(xhr, resp, text);
      dispatchXHREvents(xhr);
    })();
  };

  log('hooks installed (fetch + XHR)');
})();