12.02.2025

Contornando o Problema de "Conteúdo Misturado" em AJAX via PHP e cURL

Resposta Rápida

Para eliminar o erro de "Bloqueio de Conteúdo Misturado", faça suas requisições AJAX através de HTTPS ao usar uma página com HTTPS. Os navegadores bloqueiam o carregamento de conteúdo HTTP em páginas HTTPS. Se o serviço alvo não suporta HTTPS, você pode configurar um servidor proxy. Suas requisições AJAX podem se parecer com isso:

$.ajax({
  url: "https://sua-api-segura.com/dados",
  success: function(data) {
    console.log(data);
  },
  error: function() {
    console.error("Falha ao fazer a requisição");
  }
});

Se você não conseguir migrar a fonte externa para usar HTTPS, é possível criar um proxy em seu servidor para passar respostas HTTP através de uma conexão HTTPS.

Criando um Proxy no Servidor para Segurança

Um script de servidor, como um proxy PHP, permite que o servidor faça requisições de API HTTP de forma segura. Ele atua como um intermediário entre o cliente e o recurso HTTP, redirecionando dados através de HTTPS.

Aumentando a Segurança através de Cabeçalhos

Habilitar cabeçalhos de segurança HTTP, como Content-Security-Policy, aumenta significativamente o nível de proteção. Usar a diretiva upgrade-insecure-requests através de uma tag <meta> instruirá os navegadores a converter automaticamente HTTP em HTTPS:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Você também pode fazer ajustes nas configurações do seu servidor, por exemplo, no nginx:

add_header Content-Security-Policy "upgrade-insecure-requests";

Como resultado, os navegadores "atualizarão" automaticamente requisições inseguras sem sua intervenção.

Negociação de Protocolo para APIs

Para alcançar a compatibilidade necessária, certifique-se de que seu site e API utilizem HTTPS:

• Verifique se o seu provedor de API suporta o protocolo HTTPS.
• Evite usar serviços que estão disponíveis apenas via HTTP para não comprometer a segurança do seu site.
• Abstenha-se de fazer alterações em seu próprio site que possam introduzir ameaças à segurança.

Iniciativas para Melhorar a Segurança

Promova a adoção de HTTPS entre serviços de terceiros ou, pelo menos, advogue a favor disso. Se um serviço não suporta HTTPS, faça a transmissão segura de dados usando cURL ou ferramentas similares no servidor.

Assegurando a Segurança na Entrega de Conteúdo

As diretivas add_header e proxy_set_header no nginx ajudam a garantir a entrega segura de conteúdo, servindo como guardiões do caminho VIP do seu serviço.

Visualização

Imagine a página HTTPS como um jardim seguro e exclusivo (🏰🌸), enquanto AJAX HTTP se assemelha a uma ponte levadiça instável (🌉):

🏰🌸 Jardim Seguro (Página HTTPS)
            |
          (X) Acesso Negado!
            | 
🌉 Ponte Levadiça Instável (AJAX HTTP)

Protegendo o Jardim (🛡️) não permite que nada passe que deseje atravessar a ponte instável.

🏰🌸(HTTPS) 🛡️ Bloqueia 🚫 🌉(AJAX HTTP)

A solução é construir uma ponte confiável (🌁):

🏰🌸 Jardim Seguro (Página HTTPS)
            |
          ✅ Acesso Liberado!
            |
🌁 Ponte Confiável (AJAX HTTPS)

Agora AJAX HTTPS atravessa a ponte com segurança e pavimenta o caminho direto para o jardim! 🔒

Configurando o Uso de HTTPS nas APIs

Certifique-se de que o endpoint da API opere através de HTTPS. Para usuários do nginx, isso envolve configurar corretamente os certificados SSL e configurar o bloco do servidor para tratar adequadamente as requisições HTTPS.

Analisando Sinais do Navegador

Use as ferramentas de desenvolvedor do navegador, especialmente a aba "Rede", para identificar problemas de conteúdo misturado e resolvê-los rapidamente.

Segurança Acima de Tudo

Avalie as potenciais implicações de segurança antes de implementar esquemas como upgrade-insecure-requests para evitar encontrar vulnerabilidades imprevistas.

Recursos Úteis

1. Conteúdo Misturado - Segurança na Web | MDN — um guia abrangente para resolver problemas de conteúdo misturado em HTML.
2. Como fazer o Chrome permitir conteúdo misturado? - Stack Overflow — discussões sobre métodos para resolver avisos de conteúdo misturado no Chrome.
3. Atualizar Requisições Inseguras — um padrão rascunho do W3C que melhora a segurança do site atualizando requisições inseguras.
4. Cross-Origin Resource Sharing (CORS) - HTTP | MDN — uma descrição de como aplicar CORS para solucionar problemas de conteúdo misturado e garantir requisições cross-origin seguras.
5. Política de Segurança de Conteúdo | Artigos | web.dev — um artigo sobre o uso da Política de Segurança de Conteúdo para prevenir conteúdo misturado e outras vulnerabilidades.

Video

Navigation