XHR 후킹 추가: 치지직이 axios 로 부르는 live-detail 도 가로채도록 수정
문제: v1.1.0 의 fetch 후킹은 작동(`fetch hook installed` 로그 확인)했지만 실제 라이브 페이지에서 `forcing timeMachine ON` 로그가 한 번도 안 떴음. 콘솔 스택트레이스에 `XMLHttpRequest.send` 와 `xhr @ main.d2cbcc55.js` 가 반복 등장해 치지직 React 앱이 axios over XHR 로 live-detail 을 호출하는 것이 확인됨 → fetch 만 후킹한 v1.1.0 은 무용지물이었음. 수정: - timemachine.js: XMLHttpRequest 의 open/setRequestHeader/send 를 후킹. live-detail URL 이면 native send 대신 우리가 fetch 로 직접 요청을 날리고, 응답을 patchLiveDetailData 로 패치한 뒤 defineProperty 로 readyState/status/responseText/response/responseURL 등을 덮어쓰고 readystatechange/load/loadend 이벤트를 합성 발화. responseType (text/json/arraybuffer/blob) 별 response 값도 맞춰 만든다. - fetch 후킹도 유지 (혹시 일부 경로가 fetch 쓸 수 있음). - 로그 메시지를 `hooks installed (fetch + XHR)` 로 변경하고 XHR 진입 지점에 `XHR live-detail intercepted for <channelId>` 진단 로그 추가. - urlOf() 헬퍼로 string/Request/URL 입력을 일관 처리. - manifest 버전 1.1.0 → 1.1.1. - README 동작 방식 설명/확인 로그 갱신.
This commit is contained in:
Claude (chzzk-bypass owner)
210
timemachine.js
210
timemachine.js
@@ -3,17 +3,20 @@
|
||||
// 가능하면 DVR 매니페스트(URL) 까지 함께 갈아끼워 실제 되감기도 동작하도록 만든다.
|
||||
//
|
||||
// 동작 원리
|
||||
// - 치지직 웹 플레이어는 `api.chzzk.naver.com/service/vN/channels/{id}/live-detail`
|
||||
// 응답의 `content.timeMachineActive` 플래그로 되감기 UI 노출 여부를 결정한다.
|
||||
// - 치지직 웹 플레이어는 `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 로 만들고,
|
||||
// - 따라서 `live-detail` 응답을 가로채서 (1) 두 플래그를 강제로 true 로 만들고,
|
||||
// (2) `livePlaybackJson` 안의 매니페스트 URL 을 `live-playback-json` 응답으로
|
||||
// 교체하면, 스트리머 설정과 무관하게 되감기 UI 와 실제 seek 동작 모두 살아난다.
|
||||
//
|
||||
// 치지직 React 앱은 axios 기반이라 실제 요청은 `XMLHttpRequest` 로 나가고, 일부 경로는
|
||||
// `fetch` 도 쓴다. 그래서 두 경로 모두 후킹한다.
|
||||
// manifest 의 `world: "MAIN"`, `run_at: "document_start"` 덕분에 페이지 자체 스크립트가
|
||||
// 실행되기 전에 fetch 를 후킹할 수 있다.
|
||||
// 실행되기 전에 후킹할 수 있다.
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
@@ -32,8 +35,21 @@
|
||||
} 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 {
|
||||
@@ -67,17 +83,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function patchLiveDetail(response, channelIdFromUrl) {
|
||||
let data;
|
||||
try {
|
||||
data = await response.clone().json();
|
||||
} catch (e) {
|
||||
log('response is not JSON, passthrough');
|
||||
return response;
|
||||
}
|
||||
|
||||
// 파싱된 live-detail JSON 객체를 in-place 로 패치. 변경 여부 반환.
|
||||
async function patchLiveDetailData(data, channelIdFromUrl) {
|
||||
const content = data && data.content;
|
||||
if (!content) return response;
|
||||
if (!content) return false;
|
||||
|
||||
// 치지직 live-detail 응답에는 두 개의 별개 플래그가 존재한다.
|
||||
// - timeMachineActive : 채널/방송 단위 타임머신 활성 여부
|
||||
@@ -89,7 +98,7 @@
|
||||
|
||||
if (alreadyOn) {
|
||||
log('timeMachine already active for', channelId, '— passthrough');
|
||||
return response;
|
||||
return false;
|
||||
}
|
||||
|
||||
log('forcing timeMachine ON for', channelId);
|
||||
@@ -106,44 +115,159 @@
|
||||
log('playback-json unavailable; UI shown but seek may not work');
|
||||
}
|
||||
}
|
||||
|
||||
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,
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
// -------- fetch hook --------
|
||||
window.fetch = async function patchedFetch(input, init) {
|
||||
let url = '';
|
||||
try {
|
||||
url = typeof input === 'string'
|
||||
? input
|
||||
: (input && input.url) || '';
|
||||
} catch (_) { url = ''; }
|
||||
|
||||
const url = urlOf(input);
|
||||
const match = url && url.match(LIVE_DETAIL_RE);
|
||||
if (!match) {
|
||||
return originalFetch(input, init);
|
||||
}
|
||||
if (!match) return originalFetch(input, init);
|
||||
|
||||
let response;
|
||||
const response = await originalFetch(input, init);
|
||||
try {
|
||||
response = await originalFetch(input, init);
|
||||
} catch (e) {
|
||||
throw e;
|
||||
}
|
||||
const data = await response.clone().json();
|
||||
const changed = await patchLiveDetailData(data, match[1]);
|
||||
if (!changed) return response;
|
||||
|
||||
try {
|
||||
return await patchLiveDetail(response, match[1]);
|
||||
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('patch failed, returning original response', e);
|
||||
log('fetch patch failed, returning original', e);
|
||||
return response;
|
||||
}
|
||||
};
|
||||
|
||||
log('fetch hook installed');
|
||||
// -------- 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)');
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user