Como solucionar erros de conteúdo misto

Resolva erros com conteúdo misto para garantir que o navegador da web do visitante não bloqueie os recursos HTTP servidos em HTTPS.


Visão geral

Os domínios adicionados à Cloudflare recebem certificados SSL e podem servir tráfego em HTTPS. No entanto, após começarem a utilizar a Cloudflare, alguns clientes percebem problemas de renderização de páginas e conteúdo faltante quando começam a servir tráfego em HTTPS.

Geralmente, o problema se deve a uma solicitação de recursos HTTP para uma página da web servida em HTTPS.  Por exemplo, você digita https://exemplo.com em um navegador e a página contém uma referência de imagem por meio de HTTP no código HTML <img src="http://example.com/resource.jpg">.

De modo geral, se o seu site carregar todos os recursos de forma segura em HTTPS, os visitantes observarão um ícone de cadeado (geralmente um cadeado verde) na barra de endereço do seu navegador:

green-lock-icon.png

Isso indica que seu site tem um certificado SSL ativo e que todos os recursos carregados pelo site são carregados em HTTPS. O cadeado verde garante aos visitantes que sua conexão é segura. Um dos sintomas de conteúdo misto é que aparecem ícones diferentes ao invés do ícone de cadeado verde.

Outras causas de problemas de renderização de conteúdo são o Rocket Loader e o Auto-Minify.  Experimente desabilitar ambas as funcionalidades caso você não observe erros de conteúdo misto.

Sintomas de ocorrência de conteúdo misto

A maioria dos navegadores modernos bloqueia solicitações HTTP em páginas HTTPS seguras. O conteúdo bloqueado pode incluir imagens, JavaScript, CSS ou outro conteúdo que afete a aparência ou o comportamento da página.

Abaixo estão os sinais de que seu navegador da web está observando conteúdo misto no site requisitado:

  • Firefox
    Pode-se observar um triângulo amarelo pedindo cautela ao lado da URL:
    yellow-warning-triangle.png
  • IE (versão 10)
    Pode-se observar mensagens de advertência do tipo "Somente o conteúdo seguro é exibido":
    only-secure-content-message.png
  • Microsoft Edge
    Pode-se observar uma mensagem de advertência do tipo "Você está vendo apenas conteúdo seguro":
    edge-insecure-content.png
  • Chrome
    Pode-se observar um símbolo de informação ou de advertência ao lado da URL:
    information-warning.png

Para advertências de conteúdo misto, o navegador da web carrega os recursos, mas os usuários não veem o ícone de cadeado verde na URL. As mensagens de advertência aparecem nas ferramentas de depuração do navegador:

mixed-content-warning.png

Para erros de conteúdo misto, o navegador se recusa a carregar os recursos em uma conexão não segura:

mixed-content-error.png

Informações sobre como usar as ferramentas de depuração do navegador para localizar esses problemas podem ser encontradas na documentação do Chrome e do Firefox. Alternativamente, você pode visualizar o código-fonte da sua página e localizar referências específicas a http:// nos caminhos para outros recursos.


Solução

Existem dois métodos para resolver erros de conteúdo misto.

1. Carregue todos os recursos por meio do seu código-fonte em HTML sem especificar um protocolo HTTP ou HTTPS. Por exemplo:

     //domain.com/path/to.file

     Ao invés de

     http://domain.com/path/to.file

2. Dependendo do seu Sistema de Gerenciamento de Conteúdo, verifique se existem plugins que reescrevam automaticamente os recursos com HTTP como HTTPS. No aplicativo SSL/TLS, a Cloudflare oferece esse serviço por meio do Automatic HTTPS Rewrites.

A Cloudflare recomenda que os usuários do WordPress instalem o plugin do WordPress da Cloudflare e habilitem a opção de Automatic HTTPS Rewrites dentro do plugin. Alternativamente, a Cloudflare recomenda o corretor de conteúdo SSL inseguro ou o plugin Really Simple SSL para substituir o HTTP por HTTPS automaticamente.

Recursos relacionados

Não encontra o que precisa?

95% das perguntas podem ser respondidas usando a ferramenta de pesquisa. Essa é a maneira mais rápida de obter uma resposta.