janhalendk/reactUm projeto OSINT que explora como extrair dados do React
Esta ferramenta é um userscript rápido e simples para o Tampermonkey que investiga alguns níveis de profundidade em qualquer página React e procura uma ou mais frases fornecidas pelo usuário.
A ferramenta facilita encontrar o lugar certo no DOM onde o React anexa grandes pedaços de dados JSON.
Encontrar esses lugares manualmente pode ser muito demorado, pois depende muito do desenvolvedor, da versão do React e da complexidade de um determinado site como os dados são armazenados e repassados.
Este userscript tem como objetivo tornar esse processo muito mais fácil.
Abaixo está um vídeo do script em uso.
Para mais contexto sobre como e por que este trabalho foi feito, consulte o tutorial sobre o mesmo assunto em outra parte deste repositório.
Copie o userscript deste repositório e siga as instruções na documentação do Tampermonkey sobre como instalar o script.
A ideia principal é que você selecione Create a new userscript, apague qualquer boilerplate que o Tampermonkey sugerir, cole o userscript e salve. Pronto, está tudo certo.
Quando instalado, o userscript fornece um menu de contexto do botão direito com dois botões, que devem estar habilitados em todos os sites que usam React (caso encontre algum em que isso não aconteça, por favor me avise):
reactPropsreactFiberIsso pode ser visto abaixo.
Os botões recebem o nome de duas propriedades internas que o React anexa aos nós HTML no DOM comum. O React as usa para repassar dados internamente, para construir a página, para manter o estado da página em sincronia com o seu Virtual DOM (VDOM), para reagir a ações do usuário etc.
É também por meio dessas propriedades que podemos acessar e despejar dados brutos em massa. Inclusive uma quantidade enorme de dados que de outra forma não ficam expostos no DOM.
Para usar a ferramenta, basta abrir o console JavaScript nas ferramentas do desenvolvedor e escolher uma das duas opções. Se uma não lhe der nenhum dado, tente a outra. Como foi dito, o que funciona parece depender muito do site específico.
Neste exemplo, estou procurando dados sobre os vídeos do TikTok do SANS Institute. Como entrada, forneci uma das frases — four days — encontrada sob o primeiro dos vídeos:
A entrada que você fornece ao userscript é convertida para minúsculas e tem os espaços em branco removidos antes da comparação com o conteúdo anexado como propriedades nos nós HTML, então é só digitar o que quiser, na verdade.
Se quiser, você também pode usar várias frases; basta separá-las com vírgula. Se você quisesse segmentar vários vídeos no exemplo do TikTok, poderia usar four days,congratulations,thank you.
O script usa OR, e não AND, como operador de busca.
Você também pode usar um caractere curinga *, que despejará tudo.
Um pequeno aviso sobre isso, no entanto:
Fazer uma busca com * pode fazer suas ferramentas do desenvolvedor travarem, simplesmente porque isso pode facilmente despejar dezenas de milhares de linhas de dados. Portanto, use esse recurso apenas como último recurso. Especialmente no Facebook, você ficará soterrado em dados se fizer isso.
De modo geral, coisas úteis para pesquisar seriam determinados nomes de usuário / IDs de usuário que você sabe que devem estar presentes — ou, se você sabe que existe alguma propriedade em algum lugar chamada videoData, basta usá-la.
Ao disparar o script no TikTok (reactProps), um monte de dados é registrado no console JavaScript — e também na sua área de transferência. Na parte inferior, você verá uma contagem de quantas correspondências os padrões de busca retornaram (5 neste caso).
Se quiser explorar os dados JSON, basta colá-los em um editor — de preferência um que suporte JSON e destaque de sintaxe. Isso torna a análise muito mais fácil.
O recurso realmente interessante, no entanto — se você planeja criar ferramentas baseadas em React para o site específico — não é o despejo na área de transferência. Além de despejar os dados, o script também registra tanto o nó HTML que gerou a correspondência quanto o caminho exato da propriedade onde a correspondência foi encontrada.
Esse recurso resolve um dos verdadeiros incômodos ao tentar mapear o VDOM do React para o DOM comum, com o qual — ao contrário do VDOM — podemos interagir usando JavaScript puro.
Neste caso, a saída nos diz que os dados que queremos estão anexados como propriedades, entre outros, no nó HTML <div class="css-x6y88p-DivItemContainerV2 e19c29qe8"> como uma propriedade no caminho: __reactProps$xunlb5k9rwt | children | 1 | props.
Ter esse conhecimento significa que agora sabemos exatamente qual nó — e em qual caminho — podemos buscar os dados.
O | é apenas um separador que escolhi. Ao converter isso em um script, substitua-o pela notação de ponto, assim __reactProps$xunlb5k9rwt.children[1].props — ou pela notação de colchetes, assim ["__reactProps$xunlb5k9rwt"]["children"][1]["props"].
Como observado no tutorial sobre React em outra parte deste repositório, a parte __reactProps tem uma string de 10 caracteres que é gerada aleatoriamente a cada carregamento da página.
Consulte o tutorial para ver um exemplo prático de como extrair a chave de que você precisa de um dos nós HTML.
O que o script realmente faz é descer alguns níveis em cada propriedade da categoria escolhida (__reactFiber ou __reactProps) e tentar converter tudo dentro para JSON (JSON.stringify()). Se os objetos internos contiverem referências circulares (o que muitos terão), eles não podem ser analisados como JSON. Tentar convertê-los gerará um erro que é capturado, e o loop simplesmente ignorará isso e continuará.
No momento, o script também só analisa propriedades de tags <div> e <article>. Se você perceber que ele deixa passar algo por esse motivo, por favor me avise. Isso é definitivamente um trabalho em andamento.
O script também não faz recursão muito profunda nas propriedades. Primeiro, sou péssimo em recursão. Segundo, não estou tão interessado em coisas profundamente aninhadas nas propriedades, já que construir algo em cima disso tem maior probabilidade de quebrar devido a mudanças até mesmo pequenas nas plataformas que se deseja atingir. Pela minha experiência, deve ser possível encontrar os dados próximos ao nó HTML.
Este script é apenas para fins educacionais. Não abuse dele. Comporte-se. Seja gentil. E não infrinja nenhuma lei.