Esta é uma aplicação web Front-end pura, concebida como prova de conceito (PoC) para um Trabalho de Conclusão de Curso (Tese de Graduação). O objetivo é criar uma ferramenta de auxílio no processo de análise de vulnerabilidades e Mapeamento de Superfície de Ataque utilizando metodologias de OSINT (Open Source Intelligence).
A interface é fortemente inspirada no Obsidian, focada em um ambiente escuro (Dark Mode), mapeamento visual de entidades através de grafos (nós e conexões) e documentação atrelada a cada entidade.
O projeto foi planejado para ser hospedado no GitHub Pages, portanto, não possui servidor back-end ou banco de dados. Toda a manipulação de estado e armazenamento de dados ocorrerá do lado do cliente (Client-side) e através de arquivos locais.
- Linguagens Base: HTML5, CSS3, JavaScript Puro (Vanilla JS).
- Visualização do Grafo: Biblioteca
vis-network(via CDN) para renderizar a rede de nós interativos. - Armazenamento/Persistência: Importação e Exportação de arquivos
.jsondiretamente pelo navegador do usuário. - Renderização de Texto (Opcional):
marked.js(via CDN) para permitir formatação Markdown dentro do editor.
Como a aplicação não possui dependências de back-end, banco de dados ou processos de build (compilação), a inicialização para testes no seu PC local é extremamente simples. Você tem duas opções:
- Clone ou extraia o download deste repositório em uma pasta na sua máquina local.
- Entre na pasta raiz do projeto (
OSINTree). - Dê um duplo clique no arquivo
index.htmlpara abri-lo diretamente no seu navegador (Chrome, Firefox, Edge, etc.).
Executar um servidor local evita bloqueios de segurança do navegador (CORS) ao manipular arquivos para importação/exportação.
- Via Python (Requer Python instalado):
- Abra o terminal (Prompt de Comando / PowerShell) na pasta do projeto.
- Execute o comando:
python -m http.server 8000 - Abra seu navegador e digite o endereço:
http://localhost:8000
- Via VS Code:
- Abra a pasta do projeto no VS Code.
- Instale a extensão Live Server.
- Clique com o botão direito no arquivo
index.htmle selecione "Open with Live Server" (ou clique no botão "Go Live" na barra inferior do editor).
A interface deve ser dividida em um layout responsivo de 3 painéis (utilizando CSS Grid ou Flexbox), similar a uma IDE ou ao Obsidian:
1.Área do Grafo (Visão Principal - Esquerda/Centro): Um painel amplo onde a árvore de nós interativos (Graph View) será renderizada. 2.Aba de Ferramentas (Painel Inferior Esquerdo ou Lateral): Uma lista de acesso rápido a ferramentas de OSINT (ex: Wireshark, Nmap, ExploitDB, Shodan). 3.Aba de Página/Editor (Painel Direito): Um painel dinâmico que exibe e permite a edição de informações (título, descrição, observações) atreladas ao nó atualmente selecionado no grafo.
- Visualização: O usuário deve visualizar um mapa mental/grafo onde cada círculo (nó) representa uma entidade (ex: Esfera Física, Endereços, Esfera Digital, Servidores).
- Interatividade: Ao clicar em um nó do grafo, o painel de edição (Aba de Página) deve ser atualizado instantaneamente para exibir os dados daquele nó específico.
- Estilização de Nós: Os nós devem suportar cores diferentes para categorizar os tipos de entidades (conforme o print de referência).
- Vinculação: Cada nó possui um ID único. O editor deve salvar as informações de texto (Título, Descrição, Observações) vinculadas a esse ID.
- Autosave em Memória: Quando o usuário digitar algo no painel do editor, a alteração deve ser salva automaticamente na estrutura de dados do JavaScript (em memória).
- Exportar (Download): Um botão que pega todo o estado da aplicação (nós do grafo, conexões e os textos das páginas) e faz o download na máquina do usuário como um arquivo
investigacao.json. - Importar (Upload): Um botão para carregar um arquivo
.jsonpreviamente salvo, que irá sobrescrever o estado atual, reconstruir o grafo na tela e restaurar os textos.
A aplicação deve ser orientada pelo seguinte estado global (State), que servirá de base para a exportação e importação:
{
"project_name": "Instituição XYZ",
"nodes": [
{ "id": 1, "label": "Entidade Alvo", "color": "#a89fdf" },
{ "id": 2, "label": "Esfera Física", "color": "#ff4d4d" },
{ "id": 3, "label": "Esfera Digital", "color": "#0000ff" }
],
"edges": [
{ "from": 1, "to": 2 },
{ "from": 1, "to": 3 }
],
"pages": {
"1": {
"title": "Entidade Alvo",
"content": "Esta é a instituição alvo XYZ onde faremos um mapeamento..."
},
"2": {
"title": "Esfera Física",
"content": "Observações sobre a área de atuação física..."
}
}
}
## ✨ Funcionalidades
### ✅ Já Implementadas
- [x] Layout responsivo com 3 painéis e tema escuro (Dark Mode).
- [x] Renderização inicial do grafo interativo (`vis-network`) utilizando dados em memória.
- [x] Seleção de nós no grafo com atualização dinâmica da aba de edição de propriedades.
- [x] Salvamento automático (Autosave em memória) ao editar informações de uma entidade no painel.
### ⏳ A Fazer (To-Do)
- [ ] Sistema de exportação do estado atual (Grafo + Páginas) para arquivo `.json`.
- [ ] Sistema de importação para restaurar o estado da aplicação a partir de um arquivo `.json`.
- [] Suporte a formatação rica em Markdown (ex: `marked.js`) no painel do editor.
- [] Lógica para criar, editar e remover dinamicamente novos nós e conexões pela interface.
- [ ] Adição da lista de atalhos rápidos para ferramentas de OSINT.
- [] Polimento final de interface (Scrollbars customizados, destaques de hover, botões).
### 🔄 Atualizações Recentes
- **Estrutura Inicial do Grafo:** A árvore padrão de inicialização foi ajustada. A aplicação carrega por padrão 1 nó raiz (`-target-`) e 4 ramificações obrigatórias (`-DIGITAL-`, `-HUMAN-`, `-ECOSYSTEM-`, `-PHYSICAL-`), otimizando o fluxo inicial para investigações de superfície de ataque.