Voltar ao blog

Renderização JavaScript através de proxy: como evitar bloqueios e erros

A renderização de JavaScript requer uma abordagem especial ao trabalhar com proxies. Vamos entender quais problemas surgem e como resolvê-los.

📅4 de dezembro de 2025
```html

Renderização JavaScript através de proxy: como evitar bloqueios e erros

Quando você faz análise de sites que carregam conteúdo através de JavaScript, as simples requisições HTTP se tornam ineficazes. Adicione a isso proteção contra bots e restrições de geolocalização — e a tarefa se complica várias vezes. Os proxies resolvem parte dos problemas, mas exigem configuração adequada.

Por que a renderização JavaScript requer proxy

Os sites modernos frequentemente usam frameworks como React, Vue ou Angular, que carregam conteúdo no lado do cliente. Quando você envia uma simples requisição GET, você recebe um HTML vazio com a tag <div id="root"></div>, e não o conteúdo pronto.

Problemas que os proxies resolvem:

  • Bloqueios de geolocalização. Os sites limitam o acesso por países. Proxies com IP da região necessária contornam essas restrições.
  • Proteção contra bots. Cloudflare, hCaptcha e sistemas similares bloqueiam requisições automatizadas. Proxies residenciais parecem usuários comuns e passam nas verificações melhor.
  • Rate limiting. O servidor pode bloquear um IP após múltiplas requisições. Os proxies distribuem o tráfego e evitam bloqueios.
  • Anonimato. Ocultam seu IP real ao fazer análise.

Navegadores headless e proxy: fundamentos

Para renderização JavaScript, usam-se navegadores headless — Chromium sem interface gráfica. Opções populares:

  • Puppeteer — biblioteca Node.js para controlar Chrome/Chromium.
  • Playwright — alternativa multiplataforma, suporta Chrome, Firefox, Safari.
  • Selenium — escolha clássica, funciona com diferentes navegadores.

Todos eles suportam proxy através de parâmetros de inicialização do navegador ou opções de conexão.

Configuração prática

Puppeteer com proxy

Exemplo básico de conexão de proxy ao Puppeteer:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    args: [
      '--proxy-server=http://proxy.example.com:8080'
    ]
  });

  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  const content = await page.content();
  console.log(content);
  
  await browser.close();
})();

Se o proxy requer autenticação:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    args: [
      '--proxy-server=http://proxy.example.com:8080'
    ]
  });

  const page = await browser.newPage();
  
  // Configuração de credenciais para proxy
  await page.authenticate({
    username: 'user',
    password: 'pass'
  });
  
  await page.goto('https://example.com');
  const content = await page.content();
  
  await browser.close();
})();

Playwright com proxy

No Playwright, o proxy é configurado através do contexto do navegador:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({
    proxy: {
      server: 'http://proxy.example.com:8080',
      username: 'user',
      password: 'pass'
    }
  });

  const context = await browser.newContext();
  const page = await context.newPage();
  
  await page.goto('https://example.com');
  const content = await page.content();
  
  await browser.close();
})();

Rotação de proxy para múltiplas requisições

Para análise em larga escala, é necessária rotação de proxy. Aqui está um exemplo simples com um array:

const puppeteer = require('puppeteer');

const proxies = [
  'http://proxy1.com:8080',
  'http://proxy2.com:8080',
  'http://proxy3.com:8080'
];

let proxyIndex = 0;

async function getPageWithProxy(url) {
  const currentProxy = proxies[proxyIndex % proxies.length];
  proxyIndex++;
  
  const browser = await puppeteer.launch({
    args: [`--proxy-server=${currentProxy}`]
  });
  
  const page = await browser.newPage();
  await page.goto(url);
  const content = await page.content();
  
  await browser.close();
  return content;
}

// Uso
(async () => {
  const urls = ['https://example.com/1', 'https://example.com/2'];
  for (const url of urls) {
    const content = await getPageWithProxy(url);
    console.log('Analisado:', url);
  }
})();

Erros típicos e soluções

Erro Causa Solução
ERR_TUNNEL_CONNECTION_FAILED Proxy indisponível ou credenciais incorretas Verifique IP:porta do proxy, login/senha. Teste através de curl
Timeout ao carregar Proxy lento ou site bloqueia a requisição Aumente o timeout, adicione User-Agent, use proxies residenciais
403 Forbidden Site detectou um bot Adicione headers realistas, use proxies residenciais, adicione atraso entre requisições
CAPTCHA a cada requisição Site vê o mesmo User-Agent Alterne User-Agent, use diferentes proxies para cada navegador

Adição de headers realistas

const page = await browser.newPage();

await page.setUserAgent(
  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
);

await page.setExtraHTTPHeaders({
  'Accept-Language': 'pt-BR,pt;q=0.9',
  'Accept': 'text/html,application/xhtml+xml',
  'Referer': 'https://google.com'
});

await page.goto('https://example.com');

Otimização de desempenho

Desabilitação de recursos desnecessários

O carregamento de imagens e estilos desacelera a análise. Se você precisa apenas de texto:

const page = await browser.newPage();

// Bloqueamos o carregamento de imagens e estilos
await page.on('request', (request) => {
  const resourceType = request.resourceType();
  if (['image', 'stylesheet', 'font', 'media'].includes(resourceType)) {
    request.abort();
  } else {
    request.continue();
  }
});

await page.goto('https://example.com');

Uso de pool de navegadores

Para processamento paralelo de muitas páginas, crie um pool de navegadores em vez de iniciar um novo navegador para cada requisição:

const puppeteer = require('puppeteer');

let browser;
const maxPages = 5;
let activePage = 0;

async function initBrowser() {
  browser = await puppeteer.launch({
    args: ['--proxy-server=http://proxy.example.com:8080']
  });
}

async function parsePage(url) {
  const page = await browser.newPage();
  try {
    await page.goto(url);
    const content = await page.content();
    return content;
  } finally {
    await page.close();
  }
}

// Uso
(async () => {
  await initBrowser();
  const urls = ['url1', 'url2', 'url3'];
  
  for (const url of urls) {
    await parsePage(url);
  }
  
  await browser.close();
})();

Ferramentas e bibliotecas

  • Puppeteer Extra — extensão do Puppeteer com suporte a plugins para contornar proteção contra bots.
  • Cheerio — biblioteca leve para análise de HTML após renderização do navegador.
  • Axios + Proxy Agent — para requisições simples através de proxy sem navegador.
  • Scrapy — framework Python com suporte integrado a proxy e análise distribuída.

Importante: Ao trabalhar com proxies, certifique-se de que está cumprindo os termos de uso do site de destino e não violando seu robots.txt. A análise deve ser ética e não sobrecarregar os servidores.

Conclusão

Renderização JavaScript através de proxy é uma ferramenta poderosa para automatizar análise, mas requer atenção aos detalhes. Configuração adequada do navegador, rotação de proxy, headers realistas e otimização de desempenho são as chaves para um funcionamento confiável.

Para análise em larga escala com altos requisitos de anonimato, proxies residenciais são adequados, pois parecem usuários comuns e contornam a maioria das proteções contra bots.

```