janhalendk/reactA OSINT project that explores how to dump data from React
이 도구는 Tampermonkey용 빠르고 조잡한 유저스크립트로, 모든 React 페이지의 내부를 몇 단계 들어가 사용자가 제공한 하나 이상의 문구를 검색합니다.
이 도구는 React가 대량의 JSON 데이터를 붙이는 DOM의 정확한 위치를 쉽게 찾을 수 있게 해줍니다.
이러한 위치를 수동으로 찾는 것은 데이터가 어떻게 저장되고 전달되는지가 개발자, React 버전, 특정 사이트의 복잡성에 크게 좌우되기 때문에 매우 시간이 많이 걸릴 수 있습니다.
이 유저스크립트는 이 과정을 훨씬 쉽게 만들어 주는 것을 목표로 합니다.
아래는 스크립트를 사용하는 영상입니다.
이 작업의 방법과 이유에 대한 자세한 배경은 이 저장소의 다른 곳에 있는 같은 주제의 튜토리얼을 참조하세요.
이 저장소에서 유저스크립트를 복사하고 Tampermonkey 문서의 지침에 따라 스크립트를 설치하세요.
요점은 새 유저스크립트 만들기를 선택하고, Tampermonkey가 제안하는 보일러플레이트를 모두 삭제한 다음, 유저스크립트를 붙여넣고 저장을 누르면 됩니다. 그러면 준비 완료입니다.
설치가 완료되면 이 유저스크립트는 두 개의 버튼이 있는 오른쪽 클릭 컨텍스트 메뉴를 제공하며, React를 사용하는 모든 사이트에서 활성화되어야 합니다 (그렇지 않은 사이트를 발견하시면 알려주세요):
reactPropsreactFiber아래에서 이를 확인할 수 있습니다.
버튼 이름은 React가 일반 DOM의 HTML 노드에 붙이는 두 개의 내부 속성 이름을 딴 것입니다. React는 이를 사용하여 데이터를 내부적으로 전달하고, 페이지를 구성하고, 페이지 상태를 자체 가상 DOM(VDOM)과 동기화된 상태로 유지하며, 사용자 작업에 반응하는 등의 작업을 합니다.
또한 이 속성들을 통해 원시 데이터를 대량으로 접근하고 덤프할 수 있습니다. 그중에는 평소 DOM에 노출되지 않는 엄청난 양의 데이터도 있습니다.
도구를 사용하려면 개발자 도구에서 JavaScript 콘솔을 열고 두 옵션 중 하나를 선택하기만 하면 됩니다. 하나가 데이터를 주지 않으면 다른 것을 시도해 보세요. 앞서 말했듯이 어떤 것이 작동하는지는 특정 웹사이트에 크게 의존하는 것 같습니다.
이 예시에서는 SANS Institute의 TikTok 동영상에 대한 데이터를 찾고 있습니다. 입력으로 첫 번째 동영상 아래에서 찾은 문구 중 하나인 four days를 제공했습니다:
유저스크립트에 입력하는 내용은 HTML 노드에 속성으로 붙은 콘텐츠와 비교되기 전에 소문자로 변환되고 공백이 제거됩니다. 그러니 원하는 대로 입력하면 됩니다.
원한다면 여러 문구를 사용할 수도 있습니다. 쉼표로 구분하기만 하면 됩니다. TikTok 예시에서 여러 동영상을 대상으로 하려면 four days,congratulations,thank you처럼 할 수 있습니다.
스크립트는 검색 연산자로 AND가 아닌 OR을 사용합니다.
와일드카드 *를 사용할 수도 있는데, 이 경우 모든 것을 덤프합니다.
그래도 한 가지 작은 경고가 있습니다:
* 검색을 하면 수만 개의 데이터 행이 쉽게 덤프될 수 있기 때문에 개발자 도구가 충돌할 수도 있습니다. 그러니 그 기능은 최후의 수단으로만 사용하세요. 특히 Facebook에서는 그렇게 하면 데이터에 파묻힐 것입니다.
일반적으로 검색하면 유용한 것들은 사이트에 분명히 있을 것으로 아는 특정 사용자 이름 / 사용자 ID이거나, 어딘가에 videoData라는 속성이 있다는 것을 안다면 그냥 그것을 사용하면 됩니다.
TikTok에서 스크립트(reactProps)를 실행하면 많은 데이터가 JavaScript 콘솔에 기록되고 클립보드에도 복사됩니다. 아래쪽에는 검색 패턴이 몇 개의 적중을 찾았는지에 대한 개수가 표시됩니다 (이 경우 5개).
JSON 데이터를 탐색하려면 편집기에 붙여넣기만 하면 됩니다. 가능하면 JSON과 구문 강조를 지원하는 편집기를 권장합니다. 그러면 훨씬 쉽게 살펴볼 수 있습니다.
하지만 특정 웹사이트를 대상으로 하는 React 기반 도구를 만들 계획이라면, 정말 좋은 기능은 클립보드 덤프가 아닙니다. 스크립트는 데이터를 덤프하는 것 외에도 일치하는 HTML 노드와 일치가 발견된 정확한 속성 경로를 모두 기록합니다.
이 기능은 React의 VDOM을 일반 DOM에 매핑하려고 할 때의 실제 골칫거리 중 하나를 해결합니다. 우리는 VDOM과 달리 일반 DOM을 vanilla JavaScript로 상호작용할 수 있습니다.
이 경우 출력은 우리가 원하는 데이터가 HTML 노드 <div class="css-x6y88p-DivItemContainerV2 e19c29qe8">에 속성으로 붙어 있으며, 경로 __reactProps$xunlb5k9rwt | children | 1 | props의 속성임을 알려줍니다.
이 정보를 알면 이제 정확히 어떤 노드에서, 그리고 어떤 경로에서 데이터를 가져올 수 있는지 알게 됩니다.
|는 제가 선택한 구분 기호일 뿐입니다. 이것을 스크립트로 변환할 때는 점 표기법 __reactProps$xunlb5k9rwt.children[1].props 또는 대괄호 표기법 ["__reactProps$xunlb5k9rwt"]["children"][1]["props"]처럼 바꾸면 됩니다.
이 저장소의 다른 곳에 있는 React 튜토리얼에서 언급했듯이 __reactProps 부분에는 페이지가 로드될 때마다 무작위로 생성되는 10자 문자열이 있습니다.
HTML 노드 중 하나에서 필요한 키를 가져오는 방법에 대한 작동 예시는 튜토리얼을 참조하세요.
스크립트가 실제로 하는 일은 선택한 범주(__reactFiber 또는 __reactProps)의 각 속성을 몇 단계 깊이 들어가 그 안의 모든 것을 JSON(JSON.stringify())으로 변환하려고 시도하는 것입니다. 내부의 객체에 순환 참조가 포함되어 있으면 (많은 객체가 그럴 것입니다) JSON으로 파싱할 수 없습니다. 변환을 시도하면 오류가 발생하고 이를 잡아내어 루프는 그냥 무시하고 계속 진행합니다.
현재 스크립트는 또한 <div> 및 <article> 태그의 속성만 봅니다. 이런 이유로 무언가를 놓치는 것을 발견하면 알려주세요. 이것은 매우 진행 중인 작업입니다.
또한 이 스크립트는 속성을 매우 깊이 재귀하지 않습니다. 첫째, 저는 재귀를 잘 못합니다. 둘째, 대상으로 하는 플랫폼이 아주 조금만 변경되어도 깨질 가능성이 높은 속성 깊숙이 중첩된 것에는 별로 관심이 없습니다. 제 경험상 HTML 노드 가까이에서 데이터를 찾을 수 있어야 합니다.
이 스크립트는 교육 목적으로만 제공됩니다. 남용하지 마세요. 예의 바르게 행동하세요. 친절하세요. 그리고 법을 어기지 마세요.