Como o navegador carrega uma página
Fluxo de exibição de uma página Web pelo navegador
Uma página Web não aparece simplesmente do jeito que é no momento em que você digita uma URL no navegador.
Na prática, uma sequência de processos ocorre em ordem: interpretação da URL, obtenção do endereço IP por DNS, conexão ao servidor, estabelecimento de um canal seguro por HTTPS, envio de uma requisição HTTP, recebimento da resposta do servidor e processamento de exibição pelo navegador.
No entanto, nem sempre todos os processos são realizados do zero a cada vez. O resultado de DNS pode estar em cache, um canal de comunicação já conectado pode ser reutilizado, ou dados podem ser carregados do cache do navegador.
Este artigo organiza, sem entrar demais em detalhes de especificação, o que acontece até uma página Web aparecer, seguindo o fluxo real da comunicação.
O que acontece depois de inserir uma URL
Por exemplo, suponha que você digite a string https[:]//example.com na barra de endereços do navegador.
O navegador primeiro verifica a string inserida.
Ele decide se aquilo é uma palavra-chave de busca ou a URL de um site; se for uma URL, interpreta o destino de acesso.
Uma URL contém principalmente as seguintes informações.
| Elemento | Exemplo | Significado |
|---|---|---|
| Esquema | https | Indica por qual método comunicar |
| Nome de host | example.com | Indica o nome do site ao qual se quer conectar |
| Número de porta | 443 | Indica a qual janela de comunicação conectar. Muitas vezes é omitido |
| Caminho | /about | Indica qual lugar no servidor está sendo solicitado |
| String de consulta | ?id=10 | Passa informações adicionais ao servidor |
| Fragmento | #section | Indica uma posição dentro da página. Normalmente não é enviado ao servidor |
A URL é uma forma que facilita para humanos indicarem um site.
Mas, para encontrar a contraparte da comunicação na rede, no fim é necessário um endereço IP.
Por isso, o navegador avança para o processo de procurar o endereço IP a partir do nome de host.
Procurar o endereço IP por DNS
O navegador não consegue se conectar ao servidor apenas com o nome example.com.
É aí que o DNS é usado.
DNS é o mecanismo que associa nomes de domínio a endereços IP.
O navegador ou o OS primeiro verifica se um resultado de DNS permanece dentro dele. Se o mesmo domínio foi acessado no passado, pode ser possível obter o endereço IP a partir do cache DNS.
Se não houver informação no cache, ele consulta um resolvedor DNS. O resolvedor DNS procura o endereço IP correspondente ao domínio de destino, consultando vários servidores DNS conforme necessário.
| Etapa | O que acontece | Objetivo |
|---|---|---|
| 1 | O navegador ou OS verifica o cache | Confirmar se é possível reutilizar um endereço IP consultado antes |
| 2 | Consulta um resolvedor DNS | Procurar o endereço IP correspondente ao nome de domínio |
| 3 | Obtém registros A ou AAAA | Obter o destino IPv4 ou IPv6 |
| 4 | Decide o destino usando o endereço IP | Identificar a contraparte real da comunicação |
O endereço IP obtido aqui não é necessariamente fixo.
Mesmo para o mesmo nome de domínio, endereços IP diferentes podem ser retornados por influência de região, configurações de DNS, balanceamento de carga, CDN e outros fatores.
Conectar ao servidor
Quando o endereço IP é conhecido, o navegador se conecta ao servidor que possui esse endereço IP.
Na comunicação Web, não só o endereço IP de destino importa; o número de porta também é importante.
Normalmente, HTTP usa a porta 80, e HTTPS usa a porta 443.
| Método de comunicação | Número de porta principal | Significado |
|---|---|---|
| HTTP | 80 | Usada com frequência para comunicação Web não criptografada |
| HTTPS | 443 | Usada com frequência para comunicação Web protegida por TLS |
Em HTTP/1.1 e HTTP/2, normalmente TCP é usado para a conexão ao servidor.
Por outro lado, em HTTP/3, usa-se um mecanismo chamado QUIC, que funciona sobre UDP.
Este artigo não entra nos detalhes de HTTP/2 ou HTTP/3, mas o ponto importante é que o navegador cria um canal de comunicação com o servidor usando endereço IP e número de porta.
Além disso, uma nova conexão nem sempre é criada a cada vez. Quando uma conexão com o mesmo servidor já permanece, o navegador pode reutilizar a conexão existente.
Criar um canal seguro com HTTPS
Quando a URL começa com https, o navegador se comunica com o servidor por HTTPS.
HTTPS é comunicação HTTP protegida por TLS.
TLS tem principalmente os seguintes papéis.
| Papel | Significado | Importância |
|---|---|---|
| Criptografia | Dificultar que terceiros leiam o conteúdo da comunicação | Protege senhas e conteúdo de páginas |
| Detecção de adulteração | Verificar se o conteúdo foi alterado no caminho da comunicação | Facilita impedir alteração por intermediários |
| Confirmação da contraparte | Confirmar se o destino é o servidor do domínio pretendido | Ajuda contra sites falsos e ataques de intermediário |
O ponto importante aqui é que HTTPS não é apenas "um mecanismo para criptografar a comunicação".
O navegador verifica o certificado apresentado pelo servidor e valida se esse certificado é válido para o nome de domínio acessado.
Com essa verificação, o navegador pode julgar que "há alta probabilidade de que a parte à qual estou conectado seja a parte pretendida".
No entanto, mesmo usando HTTPS, nem todas as informações relacionadas à comunicação ficam ocultas.
Por exemplo, endereço IP de destino, momento em que a comunicação ocorreu e volume de comunicação não são coisas que HTTPS sozinho consiga esconder completamente.
Além disso, dependendo do ambiente, informações relacionadas ao nome de domínio de destino podem ficar visíveis no caminho da comunicação.
Ou seja, HTTPS é muito importante para proteger o conteúdo da comunicação e confirmar a contraparte, mas não é um mecanismo que garanta anonimato completo.
Solicitar a página por HTTP/HTTPS
Quando o canal seguro é criado, o navegador solicita a página ao servidor.
Essa solicitação é chamada de requisição HTTP.
No caso de HTTPS, o conteúdo da requisição HTTP é enviado em estado protegido por TLS.
Por exemplo, o navegador pode enviar informações como as seguintes ao servidor.
| Informação | Significado | Complemento |
|---|---|---|
| Método | Qual operação se quer realizar | GET é usado com frequência para obter páginas |
| Caminho | Qual página ou dado se quer | / ou /about, por exemplo |
| Host | A qual domínio a requisição se destina | Também é usado quando um único IP trata vários sites |
| User-Agent | Informações como navegador e OS | Usado para identificar ambiente e ajustar exibição |
| Accept-Language | Idioma preferido | Usado para decisões como exibir página em japonês |
| Referer | De qual página veio | Pode não ser enviado dependendo de configurações e especificações |
| Informação de identificação salva pelo site | Usado para manter estado de login e configurações |
O servidor olha essa requisição e decide quais dados devolver.
Mesmo acessando a mesma URL, o conteúdo retornado pode mudar conforme estado de login, Cookie, configuração de idioma, tipo de dispositivo e outros fatores.
O servidor devolve dados
O servidor que recebeu a requisição do navegador devolve uma resposta HTTP.
A resposta HTTP inclui status code, cabeçalhos, corpo e outros elementos.
| Elemento | Exemplo | Significado |
|---|---|---|
| Status code | 200 | Indica se a requisição foi bem-sucedida, se houve erro etc. |
| Cabeçalho | Content-Type | Indica tipo de dado, política de cache e informações semelhantes |
| Corpo | HTML etc. | Dados principais que o navegador realmente usa |
O centro de uma página Web é o HTML, mas só o HTML nem sempre completa a página inteira.
Muitas páginas Web são exibidas combinando vários dados.
| Dado | Papel |
|---|---|
| HTML | Representa a estrutura da página |
| CSS | Define aparência, como cor, margens, posicionamento e tamanho do texto |
| JavaScript | Executa processamento e mudanças dinâmicas na página |
| Imagem | Exibe fotos, ícones, diagramas e similares |
| Fonte | Ajusta a aparência das letras |
| Vídeo / áudio | Reproduz conteúdo de mídia |
O navegador recebe primeiro o HTML e, em seguida, obtém adicionalmente CSS, JavaScript, imagens, fontes e outros elementos indicados nesse HTML.
Por isso, mesmo ao abrir uma única página Web, muitas vezes ocorrem várias requisições HTTP na prática.
O navegador exibe na tela
Ao receber dados do servidor, o navegador os transforma em uma forma que pode ser exibida na tela.
Em linhas gerais, ocorrem processos como os seguintes.
| Etapa | O que acontece |
|---|---|
| Análise do HTML | Lê a estrutura da página |
| Aplicação do CSS | Aplica regras de aparência |
| Cálculo de layout | Decide onde colocar cada elemento |
| Desenho | Exibe texto, imagens, fundos e outros elementos na tela |
| Execução de JavaScript | Altera conteúdo ou comportamento da página conforme necessário |
O ponto a guardar aqui é que o navegador não recebe do servidor uma tela já pronta.
O servidor devolve materiais como HTML, CSS, JavaScript e imagens.
O navegador interpreta esses materiais e monta a página de acordo com seu próprio tamanho de tela, configurações e recursos compatíveis.
Por isso, a mesma página Web pode aparecer de forma diferente conforme PC, smartphone, tipo de navegador, largura da tela e configurações.
Mesmo uma página gera várias comunicações
Um ponto importante na exibição de páginas Web é que, mesmo abrindo uma única página, o destino de comunicação não é necessariamente um só.
Mesmo que o corpo da página seja obtido de example.com, imagens, anúncios, análise de acesso, fontes externas, scripts externos e outros elementos podem ser carregados de domínios diferentes.
| Destino de comunicação | Objetivo | Exemplo |
|---|---|---|
| Servidor do corpo da página | Obter HTML | Corpo do texto e estrutura da página |
| Servidor de distribuição de imagens | Obter imagens | Imagens do artigo e ícones |
| Servidor de anúncios | Exibir anúncios | Banners e scripts de anúncio |
| Servidor de análise | Medir situação de acesso | Tags de análise de acesso |
| Servidor de fontes externas | Carregar fontes | Web fonts |
| Servidor de scripts externos | Adicionar funções | Widgets incorporados e componentes de UI |
Do ponto de vista do usuário, parece apenas que "uma página foi aberta", mas por trás pode haver comunicação com vários servidores.
Além disso, comunicações adicionais podem ocorrer não só logo depois de abrir a página, mas também por gatilhos como rolagem, clique em botões, busca, preenchimento de formulários e reprodução de vídeo.
Em páginas Web recentes, também é comum carregar inicialmente apenas os dados mínimos e obter dados adicionais conforme a operação do usuário.
O cache pode omitir comunicações
Ao exibir uma página Web, nem todos os dados são necessariamente obtidos do servidor a cada vez.
O navegador pode salvar temporariamente imagens, CSS, JavaScript e outros dados obtidos no passado.
Isso é chamado de cache.
Quando o cache está ativo, o navegador pode usar dados salvos no dispositivo em vez de obter novamente os mesmos dados do servidor.
| Alvo | Efeito do cache |
|---|---|
| Resultado de DNS | Reduz o trabalho de consultar novamente o endereço IP a partir do nome de domínio |
| Imagem | Evita baixar a mesma imagem várias vezes |
| CSS | Permite reutilizar arquivos relacionados à aparência da página |
| JavaScript | Permite usar o mesmo script sem obtê-lo novamente |
| Conexão | Em alguns casos, permite reutilizar um canal de comunicação existente |
O cache é importante para aumentar a velocidade de exibição e reduzir o volume de comunicação.
No entanto, ao pensar em anonimato e privacidade, também é preciso prestar atenção a informações que permanecem no navegador, como cache e Cookies.
Pontos importantes ao pensar em anonimato
Ao pensar em anonimato, é importante entender que abrir uma página Web não é uma única comunicação simples.
No acesso Web, vários elementos estão envolvidos: DNS, endereço IP, HTTPS, Cookie, User-Agent, Referer, scripts externos, cache e outros.
Mesmo que o conteúdo da comunicação seja protegido por HTTPS, endereço IP de destino, timing da comunicação, volume de comunicação, cabeçalhos enviados pelo navegador, identificação por Cookie e comunicações adicionais com servidores externos se tornam problemas por outros ângulos.
| Ponto de vista | O que verificar |
|---|---|
| DNS | Que nome de domínio foi consultado |
| Endereço IP | A qual servidor houve conexão |
| HTTPS | Se há criptografia do conteúdo, detecção de adulteração e confirmação da contraparte |
| Cookie | Se existe possibilidade de identificação como o mesmo usuário |
| User-Agent | Se informações de ambiente como navegador e OS são enviadas |
| Referer | Se a página de origem da navegação é transmitida |
| Comunicação externa | Se há comunicação também com servidores além do corpo da página |
| Cache | Se navegação passada ou dados obtidos permanecem no dispositivo |
É especialmente importante separar "o conteúdo da comunicação está criptografado" de "não se sabe quem acessou onde".
HTTPS é muito importante para proteger o conteúdo da comunicação e confirmar a legitimidade da contraparte.
Mas, ao pensar em anonimato, é preciso olhar separadamente para DNS, endereço IP, informações enviadas pelo navegador, Cookie, comunicação externa e outros pontos, e não apenas para HTTPS.
Resumo
Até o navegador exibir uma página Web, vários processos ocorrem em etapas.
Primeiro, o navegador interpreta a URL inserida e confirma o nome de host.
Em seguida, procura por DNS o endereço IP correspondente ao nome de host.
Quando o endereço IP é conhecido, o navegador se conecta ao servidor.
No caso de HTTPS, ele cria um canal seguro por TLS, realizando criptografia, detecção de adulteração e confirmação da contraparte.
Depois disso, o navegador envia uma requisição HTTP, e o servidor devolve dados como HTML, CSS, JavaScript e imagens.
O navegador analisa os dados recebidos e os exibe na tela.
Além disso, durante a exibição de uma única página, imagens, anúncios, tags de análise, fontes externas e scripts externos podem gerar comunicações adicionais.
Abrir uma página Web é uma ação formada por mais comunicações e processamentos do que parece.
Entender esse fluxo facilita organizar não só a estrutura básica da Web, mas também os pontos a observar ao pensar em anonimato e privacidade.
Ferramentas relacionadas
DNSLeakTest
Recurso externo relacionado a este artigo. Abra apenas se fizer sentido para sua situação e seu modelo de ameaça.
Por que aparece aqui: Pode ajudar com o tema do artigo, mas fica fora do Anonymity Sense e deve ser avaliado antes do uso.
BrowserLeaks WebRTC
Recurso externo relacionado a este artigo. Abra apenas se fizer sentido para sua situação e seu modelo de ameaça.
Por que aparece aqui: Pode ajudar com o tema do artigo, mas fica fora do Anonymity Sense e deve ser avaliado antes do uso.