Conteúdo misto ocorre quando uma página HTTPS carrega sub-recursos (imagens, scripts, folhas de estilo, fontes) via HTTP simples. Os navegadores bloqueiam ou alertam sobre isso porque um recurso inseguro em uma página segura compromete a segurança de toda a página.
Dois tipos de conteúdo misto
| Tipo | Exemplos | Comportamento do navegador |
|---|---|---|
| Ativo (perigoso) | Scripts, iframes, XHR, CSS | Bloqueado por todos os navegadores |
| Passivo (exibição) | Imagens, áudio, vídeo | Mostrado com aviso / cadeado degradado |
Conteúdo misto ativo pode modificar a página (um man-in-the-middle poderia injetar JavaScript malicioso), então os navegadores o bloqueiam completamente. Conteúdo misto passivo é menos perigoso mas ainda degrada o indicador de segurança.
Como encontrar conteúdo misto
DevTools do navegador
- Abra seu site no Chrome/Firefox
- Abra o DevTools (F12) → aba Console
- Procure erros como:
Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure resource 'http://example.com/image.jpg'.
Varredura por linha de comando
curl -s https://yourdomain.com | grep -oP 'http://[^"'"'"'> ]+' | sort -uCausas comuns e correções
URLs http:// hardcoded no HTML
<!-- Problema -->
<img src="http://example.com/logo.png">
<!-- Correção: use protocolo relativo ou HTTPS -->
<img src="https://example.com/logo.png">
<img src="//example.com/logo.png">
<img src="/logo.png">Boa prática: use caminhos relativos (/images/logo.png) sempre que possível.
Recursos de terceiros ainda em HTTP
<!-- Problema -->
<script src="http://cdn.example.com/library.js"></script>
<!-- Correção -->
<script src="https://cdn.example.com/library.js"></script>Se o terceiro não suportar HTTPS, encontre um provedor alternativo ou hospede o recurso você mesmo.
Conteúdo do banco de dados com URLs hardcoded
WordPress e outros CMSs armazenam URLs absolutas no banco de dados. Após migrar para HTTPS:
-- WordPress: atualizar URLs nos posts
UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://example.com', 'https://example.com');
UPDATE wp_options SET option_value = REPLACE(option_value, 'http://example.com', 'https://example.com');Ou use um plugin como Better Search Replace.
CSS com referências HTTP
/* Problema */
background-image: url('http://example.com/bg.jpg');
/* Correção */
background-image: url('https://example.com/bg.jpg');
background-image: url('/images/bg.jpg');Content Security Policy (CSP) — prevenir conteúdo misto futuro
Adicione um cabeçalho CSP que bloqueia recursos HTTP:
Nginx:
add_header Content-Security-Policy "upgrade-insecure-requests" always;Apache:
Header always set Content-Security-Policy "upgrade-insecure-requests"upgrade-insecure-requests diz aos navegadores para atualizar automaticamente requisições http:// para https:// — uma rede de segurança enquanto você corrige as URLs na fonte.
Correção sistemática: auditoria completa do site
Para uma limpeza completa, audite todo o seu site:
1. Rastrear referências HTTP
# Varrer todos os arquivos HTML por URLs http://
find /var/www/html -name '*.html' -o -name '*.php' | xargs grep -l 'http://' 2>/dev/null
# Varrer arquivos CSS
find /var/www/html -name '*.css' | xargs grep -l 'http://' 2>/dev/null
# Varrer arquivos JavaScript
find /var/www/html -name '*.js' | xargs grep -l 'http://' 2>/dev/null2. Corrigir URLs por categoria
| Fonte | Método de correção |
|---|---|
| Seus próprios recursos | Mude para caminhos relativos (/images/logo.png) |
| Recursos de CDN | Atualize para https://cdn.example.com/... |
| Scripts de terceiros | Atualize a URL ou encontre alternativa HTTPS |
| CSS inline | Buscar e substituir http:// → https:// |
| Conteúdo do banco de dados (WordPress) | wp search-replace 'http://yourdomain.com' 'https://yourdomain.com' |
| Arquivos de template/tema | Edite os arquivos fonte diretamente |
3. Verificar com DevTools do navegador
Após corrigir, abra cada página → DevTools (F12) → aba Console. Uma página limpa não mostra avisos de conteúdo misto. O ícone de cadeado deve estar sólido (não quebrado ou com um triângulo de aviso).
4. Prevenir conteúdo misto futuro
Adicione esta meta tag ao <head> do seu HTML como rede de segurança permanente:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">Ou defina em todo o servidor via configuração Nginx/Apache (mostrado acima).
Tipos de conteúdo que comumente causam conteúdo misto
| Tipo de conteúdo | Onde verificar | Exemplo |
|---|---|---|
| Imagens | <img src="http://..."> | Imagens enviadas, avatares, logos |
| Scripts | <script src="http://..."> | Analytics, widgets de chat, scripts de anúncios |
| Folhas de estilo | <link href="http://..."> | Fontes externas, frameworks CSS |
| Fontes | @font-face { src: url("http://...") } | Google Fonts (geralmente ok), fontes personalizadas |
| iframes | <iframe src="http://..."> | Vídeos incorporados, mapas, widgets |
| XHR/Fetch | fetch("http://...") | Chamadas de API em JavaScript |
| Imagens de fundo | background-image: url("http://...") | Fundos CSS |
Perguntas frequentes
O conteúdo misto afetará meu SEO?
Não diretamente. O Google rastreia com base no protocolo da URL da página, não dos sub-recursos. No entanto, se o conteúdo misto disparar avisos no navegador ou bloquear conteúdo visível, a experiência do usuário se degrada — o que pode prejudicar os rankings indiretamente através de taxas de rejeição mais altas.
Posso apenas usar upgrade-insecure-requests e não corrigir as URLs?
Funciona como paliativo, mas corrigir as URLs na fonte é melhor. O cabeçalho CSP depende do suporte do navegador (todos os navegadores modernos suportam, mas alguns clientes mais antigos não) e adiciona um cabeçalho extra a cada resposta.
Meu site tem centenas de URLs HTTP hardcoded. Qual é a correção mais rápida?
Adicione o cabeçalho CSP upgrade-insecure-requests imediatamente (uma linha de configuração do servidor). Depois faça uma busca e substituição global no seu código-fonte e banco de dados. Use grep -r 'http://' src/ para encontrar URLs hardcoded no código.