Como funciona a ferramenta de mapeamento OSINT?
A aba Informações é um gráfico de nós. Cada nó representa uma informação: uma conta do Instagram, um número de telefone, uma placa de carro, um membro da família. Arraste uma alça para outro nó para conectá-los. Solte a alça em um espaço vazio para criar um novo nó já conectado (estilo Blender); clicar com o botão direito faz o mesmo sem arrastar. Cada tipo de informação tem seus próprios campos de formulário e um ícone de marca, e você também pode adicionar seus próprios ícones.
A aba Mapa permite marcar locais clicando no marcador. Coloque um marcador em qualquer lugar e, se o local for reconhecido pelo geocodificador (uma cafeteria, uma escola, um parque), o nome, o endereço e um ícone correspondente serão preenchidos automaticamente. Há uma barra de pesquisa para encontrar um local pelo nome. Os marcadores podem ser vinculados a identificadores; assim, um marcador de cafeteria pode conter a informação "marcado aqui por @johndoe em 14 de março" com a respectiva conta do Instagram. Escolha entre o Google Maps (dados de pontos de interesse mais completos, requer uma chave de API) ou o OpenStreetMap (sem chave, sem necessidade de cadastro) clicando no ícone de engrenagem.
Tudo é salvo em um único .osint.jsonarquivo que você pode guardar em qualquer lugar, compartilhar ou controlar por versão.
| Componente | Ferramenta |
|---|---|
| interface do usuário | React 18, Vite |
| Gráfico de nós | @xyflow/react |
| Mapas | @vis.gl/react-google-maps, leaflet+react-leaflet |
| Estado | Contexto React (sem Redux / sem bibliotecas de armazenamento) |
| Armazenar | Arquivos JSON locais (projetos) + localStorage(configurações, ícones personalizados) |
Você precisará do Node 18+ e do npm.
git clone https://github.com/anonymousRAID/OSINT-Mapping-Tool
cd OSINT-Mapping-Tool
npm install
npm run devEm seguida, abra http://localhost:5173 .
Para criar um pacote de produção:
npm run build # writes to ./dist
npm run preview # serves ./dist on port 4173Você só precisa disso se quiser usar o modo Google Maps. Se preferir ignorar o Google Cloud completamente, acesse o modo OpenStreetMap . Sua chave fica armazenada apenas no seu navegador e nunca é enviada ou compartilhada com terceiros.
No Console do Google Cloud, selecione ou crie um projeto e:
- Em APIs e Serviços → Biblioteca , habilite a API Maps JavaScript , a API Geocoding e a API Places . A API Maps JS é obrigatória; as outras duas permitem o preenchimento automático de endereços e a detecção de tipos de locais.
- Em APIs e Serviços → Credenciais , crie uma chave de API.
- Nessa chave, defina Restrições de aplicativo → Referenciadores HTTP e adicione
http://localhost:5173/*para desenvolvimento. Essa é a única maneira de manter a chave segura caso ela vaze. - Opcional: crie um ID de mapa em Gerenciamento de mapas → Estilos de mapa para personalizar o estilo. Sem um, você verá um aviso no console, mas o aplicativo ainda funcionará.
Duas maneiras de inserir a chave no aplicativo:
No aplicativo: Cole o endereço na tela de configurações da aba Mapa e clique em Salvar. Ele será salvo localStorage. Se você já prosseguiu sem um endereço, o ícone de engrenagem no canto superior esquerdo abre as mesmas configurações.
Arquivo de configuração: Copie o modelo:
cp public/app.config.example.json public/app.config.jsonEm seguida, preencha os valores:
{
"googleMaps": {
"apiKey": "AIzaSyD…",
"mapId": "abc123def456…"
}
}public/app.config.jsonEstá ignorado pelo Git, então mesmo se você enviar commits, não haverá vazamento de memória.
Se ambas as opções estiverem definidas, localStoragea que estiver definida prevalece. Desmarque a opção clicando no ícone de engrenagem para retornar ao arquivo original.
Não quer lidar com o Google Cloud? Abra as configurações da aba Mapa (ícone de engrenagem) e mude o provedor para OpenStreetMap . Os tiles vêm do openstreetmap.org e a busca/geocodificação reversa é feita pelo Nominatim. Sem chave, sem cadastro e sua área de visualização permanece a mesma ao trocar de abas. A detecção de pontos de interesse é menos precisa que a do Google, e o cartão de informações de cada marcador não exibe detalhes em tempo real do local (classificação, horário de funcionamento etc.) — todo o resto funciona da mesma forma.
Clique em Salvar no canto superior direito e o projeto será baixado como <name>.osint.json. Clique em Abrir Projeto na tela inicial para ler um arquivo semelhante. O formato é JSON simples com uma versão de esquema, portanto, os arquivos antigos continuarão sendo carregados após as atualizações.
Enquanto você trabalha, o aplicativo também tira um instantâneo periódico para o seu navegador localStorage. Se você acidentalmente tocar na seta para voltar sem salvar (isso já aconteceu comigo mais de uma vez), o projeto aparecerá em "Continuar recentes" na tela inicial com um indicador de "não salvo". Selecione-o e você voltará para onde estava. Até 5 projetos recentes são mantidos por navegador.
.osint.jsontambém é ignorado pelo Git, então colocar um arquivo na pasta do repositório não resultará em commits.
Vinte tipos de identificadores integrados nas categorias Social, Contato, Pessoal, Veículo e Outros, cada um com seus próprios campos tipados (Instagram: nome de usuário, seguidores, publicações, biografia; Veículo: marca, modelo, ano, cor, proprietário; etc.).
Conexões:
- Arraste uma alça de um nó para outro para conectá-los.
- Arraste para um espaço vazio para abrir uma janela pop-up de adição rápida (isso também cria automaticamente a conexão com o novo nó).
- Clique com o botão direito do mouse na tela para abrir a mesma janela pop-up, porém sem o fio.
Ícones:
- Ícones de marcas para plataformas comuns (Instagram, Facebook, X/Twitter, YouTube, TikTok, LinkedIn, Snapchat, Discord, Telegram, Google, Spotify, WhatsApp).
- Faça o upload dos seus próprios arquivos. Eles são armazenados por navegador, ficando disponíveis em todos os projetos da mesma instalação.
Atalhos de edição (desativados quando você está digitando em um campo ou quando uma janela modal está aberta):
Ctrl/Cmd + ZDesfazerCtrl/Cmd + Shift + ZouCtrl/Cmd + Yrefazer. Até 20 ações armazenadas na memória.Ctrl/Cmd + C / VPara copiar/colar os nós selecionados.Ctrl/Cmd + Dduplicar.DelouBackspaceremove a seleção (um nó ou uma aresta).
Selecione vários itens com uma ferramenta de seleção retangular ou Shift+click. Qualquer ação realizada em uma seleção múltipla conta como uma etapa de desfazer.
Clique em qualquer lugar para marcar um ponto. Se o local for conhecido — um Ponto de Interesse do Google no modo Google, um registro do Nominatim no modo OSM — o nome, o endereço e um ícone correspondente serão preenchidos automaticamente. Caso contrário, você receberá as coordenadas e preencherá o restante.
Dez ícones de locais integrados (café, comida, academia, casa, cinema, parque, parque de diversões, escola, compras, roupas, biblioteca) com versões claras e escuras que se alternam conforme o tema. O ícone e a cor podem ser personalizados para cada marcador.
Clicar em um marcador abre um cartão com suas anotações (data da visita, com quem você estava, anotações livres), os identificadores vinculados a ele e um link para o mapa em tempo real. No modo Google, o cartão também mostra todos os detalhes do local que o Google tem registrados (classificação, horário de funcionamento, telefone, site).
Uma opção "Conectar pinos" na barra lateral desenha uma linha tracejada entre os pinos na ordem em que foram adicionados. A cor da linha é personalizável.
Os marcadores podem ser vinculados a um ou mais identificadores, cada vínculo com uma breve descrição ("fez check-in no Instagram", "proprietário registrado", "endereço anterior"). Clique em um chip de identificação no cartão de um marcador para acessar a aba Informações com esse nó destacado. Ao passar o cursor sobre um identificador na barra lateral da aba Informações, os marcadores vinculados a ele pulsam no mapa.
src/
components/ UI components (tabs, modals, pickers)
context/ ProjectContext, NodeHistoryContext, NavigationContext, …
images/
icons/ place-type pin icons (light + dark)
node_icons/ brand icons for identifiers
styles/ global + theme CSS
utils/ projectIO, customIcons, appConfig, recentProjects
identifierTypes.js identifier type registry + resolvers
identifierIcons.js identifier brand-icon registry
mapIcons.js place-type icon registry + Google-types mapping
pinColors.js pin color palette
App.jsx landing ↔ project view gate
main.jsx provider stack + root render
public/
app.config.example.json template for your API key (committed)
app.config.json your real key (gitignored)
Não há backend nem análises. No modo Google, as únicas chamadas de saída são as solicitações da API de tiles/Places que o navegador faz com sua própria chave. No modo OpenStreetMap, elas são direcionadas para openstreetmap.org para tiles e nominatim.openstreetmap.org para buscas — as mesmas solicitações que você faria usando os sites diretamente.
Suas configurações e biblioteca de ícones personalizados ficam armazenadas localStorageneste navegador. Os arquivos do projeto ( *.osint.json) ficam no disco em que você os salvou. Para apagar tudo, limpe os dados do site para a origem em que você está executando e exclua os .osint.jsonarquivos.
O repositório .gitignoremantém app.config.jsonregistros *.osint.jsonde commits fora do escopo, portanto, trabalhar acidentalmente dentro da pasta clonada não exporá sua chave ou sua pesquisa.
GPL-3.0 .
Pull requests são bem-vindos. A única regra rígida é: não adicione nada que envie dados para fora da máquina do usuário. Nada de análises, sincronização remota ou rastreamento de terceiros. Se você não tiver certeza se algo ultrapassa esses limites, abra uma issue primeiro.
Comentários
Postar um comentário