Executar seu site WordPress sobre HTTPS não é mais opcional. Não só é mais seguro (tudo é criptografado, sem nada passado em texto simples), mas também constrói confiança, é um fator de classificação nos mecanismos de busca e fornece dados de referência mais precisos. Infelizmente, ao migrar do HTTP para HTTPS, os proprietários do site podem encontrar vários problemas. Um deles é “avisos de conteúdo misto”.

Os problemas de desempenho ligados à criptografia foram corrigidos em grande parte graças ao HTTP/2, e Let’s Encrypt mudou toda a indústria, fornecendo a você uma maneira fácil de obter certificados SSL gratuitos.

Mais importante para as empresas on-line, navegadores como o Google Chrome e o Mozilla Firefox estão se quebrando em sites que não rodam sobre HTTPS, e estão mostrando avisos mais rígidos aos visitantes potenciais. Por exemplo, se você estiver usando versões antigas do TLS, poderá encontrar notificações ERR_SSL_OBSOLETE_VERSION no Chrome. As advertências são a última coisa que você quer que seus visitantes vejam.

Para ajudá-lo a evitar esses problemas, temos um guia detalhado sobre como migrar de HTTP para HTTPS. Entretanto, depois de seguir esse processo, você ainda poderá ver avisos de conteúdo misto.

Hoje lhe mostraremos algumas maneiras diferentes de corrigir este problema em seu site WordPress.

O que é um aviso de conteúdo misto?

Um aviso de conteúdo misto aparece no navegador do usuário quando o site WordPress que eles estão tentando visitar está carregando scripts HTTPS e HTTP ou conteúdo ao mesmo tempo. Isto pode causar problemas, já que HTTP e HTTPS são protocolos completamente separados.

Quando você migrar para HTTPS, tudo precisa estar passando por cima desse protocolo, incluindo suas imagens, arquivos JavaScript, e assim por diante. Abaixo estão alguns exemplos do que pode acontecer se parte de seu conteúdo ainda estiver sendo carregado por HTTP.

Exemplos de advertência de conteúdo misto

O Chrome atualmente o principal navegador, utilizado por mais de 77% da web. Portanto, o seguinte aviso é o que a maioria de seus visitantes veria:

Um aviso de conteúdo misto no Google Chrome

Um aviso de conteúdo misto no Google Chrome

É claro que nem todos estão usando o cromo.

Aqui está um exemplo do que acontece no Firefox quando um aviso de conteúdo misto é exibido em um site WordPress:

Um aviso de conteúdo misto no Firefox

Um aviso de conteúdo misto no Firefox

A seguir, um exemplo de como este aviso se parece com o Microsoft Edge:

Um aviso de conteúdo misto na Microsoft Edge

Um aviso de conteúdo misto na Microsoft Edge

E aqui está como aparece no Internet Explorer:

Aviso de conteúdo misto do Internet Explorer

Aviso de conteúdo misto do Internet Explorer

Como você pode ver, o Internet Explorer é provavelmente um dos piores lugares para este aviso aparecer, porque na verdade ele quebra a renderização da página até que o popup seja clicado.

Este não é um erro que você quer que os visitantes vejam em qualquer navegador. Ele pode ser corrigido, mas antes, você precisará entender por que ocorre.

Rodar seu site WordPress sobre HTTPS não é mais opcional. ✅ Mas a partir de HTTP ➡️ HTTPS pode vir com avisos de conteúdo misto. Saiba como resolvê-los rapidamente com este guia 💥Click to Tweet

O que causa as advertências de conteúdo misto?

Descobrimos que os avisos de conteúdo misto mais comuns aparecem logo após alguém migrar seu site WordPress de HTTP para HTTPS. Alguns links HTTP simplesmente são transferidos, e isso faz com que os avisos de conteúdo misto comecem a ser disparados.

Aqui estão algumas causas adicionais desta advertência:

Infelizmente, você talvez não descubra a verdadeira fonte do problema até que comece a solucionar os problemas.

Com isso em mente, vamos dar uma olhada em alguns métodos que você pode usar para fixar avisos de conteúdo misto.

Como consertar avisos de conteúdo misto (4 etapas)

Você pode seguir os quatro passos simples abaixo para corrigir seus avisos de conteúdo misto do WordPress. Este processo pressupõe que você já tenha feito o seguinte:

Vamos utilizar um exemplo de site de desenvolvimento nos seguintes exemplos.

Passo 1: Descobrir quais recursos estão sendo carregados por HTTP

A primeira coisa que você precisará fazer é descobrir quais recursos ainda estão sendo carregados por HTTP.

Lembre-se que estes avisos podem estar ocorrendo apenas em certas áreas do seu site, não globalmente. Navegue até a página que está alertando e lance o Chrome DevTools, acertando:

Você também pode abrir o Chrome DevTools a partir do menu de ferramentas em seu navegador:

Ferramentas para desenvolvedores Chrome no menu de ferramentas do navegador

Ferramentas para desenvolvedores Chrome no menu de ferramentas do navegador

Há alguns lugares que você pode verificar para descobrir quais recursos não estão carregando sobre HTTPS.

A primeira é a aba Console. Note que você pode precisar atualizar a página depois de ter as DevTools Chrome abertas para que ela possa carregar tudo corretamente.

Se houver erros de conteúdo misto, eles serão destacados em vermelho ou amarelo. Normalmente, eles são acompanhados de informações explicando que “Este pedido foi bloqueado; o conteúdo deve ser servido sobre HTTPS”. Isto significa que as configurações do navegador são configuradas para bloquear automaticamente qualquer conteúdo HTTP.

Em um esforço para garantir que as páginas só fossem carregadas sobre HTTPS, o Chrome começou a bloquear o conteú do misto por padrão com o Chrome 79. Mais recentemente, eles desenrolaram recursos para iniciar a atualização automática de imagens e mídias mistas.

Portanto, ao utilizar o Chrome DevTools, você pode ver mensagens de conteúdo misto indicando que alguns elementos solicitados foram automaticamente atualizados:

DevTools cromados de conteúdo misto no console

DevTools cromados de conteúdo misto no console

Aqui, podemos ver claramente que há uma variedade de elementos inseguros que causam as advertências de conteúdo misto, incluindo uma folha de estilo e um roteiro.

Você também notará que foi feito um pedido para uma imagem insegura .jpg, que foi automaticamente atualizada para HTTPS. (Nota: Se isto estivesse em outro navegador que não o Chrome, não seria automaticamente atualizado).

Você também pode olhar na aba Segurança do Chrome DevTools. Isto lhe mostrará qualquer origem não segura:

Segurança das ferramentas cromadas

Segurança das ferramentas cromadas

Na aba Rede, você também pode encontrar uma lista de solicitações bloqueadas:

Rede de DevTools Chrome

Rede de DevTools Chrome

Se você não estiver usando o Cromo, ou se você quiser apenas um resumo rápido dos erros, você também pode usar uma ferramenta gratuita como Why No Padlock.

Ele escaneia uma página individual e mostra todos os recursos inseguros:

Por que não há resumo Padlock de erros de conteúdo misto

Por que não há resumo Padlock de erros de conteúdo misto

Esta ferramenta é fácil de usar. Você pode simplesmente digitar sua URL e clicar em Página de teste, e ela lhe mostrará quaisquer erros que estejam presentes. Além disso, é gratuito!

Verificação das advertências HTTPS a granel

Se você estiver preocupado com o resto do seu site, talvez queira verificá-lo em massa. Aqui estão algumas opções recomendadas para fazer isso:

O uso de qualquer uma das ferramentas acima pode ajudá-lo a economizar tempo ao ter que verificar manualmente cada página do seu site para avisos de conteúdo misto e erros. Para uma avaliação completa dos erros potenciais em seu site, você pode considerar o uso de uma combinação dessas soluções.

Passo 2: Verificar se os recursos HTTP são acessíveis sobre HTTPS

O próximo passo é confirmar que os recursos carregados através de HTTP são acessíveis através de HTTPS. O mais provável é que eles sejam, basta atualizar os links.

Como exemplo, digamos que nossos erros de conteúdo misto apontaram para o seguinte roteiro jQuery inseguro e imagem .jpg:

Se pegarmos os dois URLs, os inserirmos na barra de endereços do nosso navegador e substituir “http” por “https” no início, podemos ver que eles carregam muito bem. Portanto, precisamos simplesmente fazer uma busca e substituir em nosso site.

Passo 3: Realizar uma busca e substituição do WordPress

Há muitas maneiras de realizar uma pesquisa e substituição do WordPress. Nesta seção, nós o acompanharemos através de duas diferentes opções recomendadas.

Se você estiver curioso, não recomendamos o uso de uma ferramenta como o Really Simple SSL. Embora seja um ótimo plugin, é melhor não confiar em uma solução como esta a longo prazo. Você não migrará de volta ao HTTP mais tarde, então é melhor fazê-lo da maneira correta e atualizar suas URLs HTTP em seu banco de dados (como lhe mostraremos abaixo).

Se você é um cliente Kinsta, pode usar nossa ferramenta de busca e substituição, que está disponível diretamente dentro do painel MyKinsta.

Vá para a página Ferramentas do seu site e clique em Buscar e Substituir:

A ferramenta de Busca e Substituição no MyKinsta

A ferramenta de Busca e Substituição no MyKinsta

Em seguida, no campo de busca, digite o valor que você deseja procurar no banco de dados.

Neste caso, utilizaremos nosso domínio HTTP: http://kinstalife.com. Em seguida, clique no botão Pesquisar. A ferramenta de busca e substituição mostrará o número de ocorrências para a cadeia dada.

Verifique a caixa Substituir para continuar com o processo de substituição. No campo Substituir por, digite o que deve substituir o valor que você está procurando. Neste caso, usaremos nosso domínio HTTPS: https://kinstalife.com.

Também recomendamos deixar o cache Clear quando a caixa Clear estiver marcada, para purgar automaticamente o cache Kinsta depois que o processo de busca e substituição estiver concluído. Finalmente, clique no botão Substituir:

HTTP para HTTPS pesquisar e substituir no MyKinsta

HTTP para HTTPS pesquisar e substituir no MyKinsta

Importante: certifique-se de não incluir nenhum espaço branco de liderança/trailing em nenhum destes campos, pois isto pode produzir resultados indesejáveis.

Busca e substituição de alternativas

Se você não estiver usando Kinsta, você pode realizar esta mesma tarefa com o plugin gratuito Better Search Replace plugin, e então simplesmente exclua-o depois de ter terminado:

Cansado do suporte de hospedagem do WordPress de nível 1 sem as respostas? Experimente nossa equipe de suporte de classe mundial! Confira nossos planos

O melhor plugin de busca Substitua o WordPress

O melhor plugin de busca Substitua o WordPress

Você pode baixar esta ferramenta do diretório de plugins do WordPress, ou procurando por ela dentro de seu painel de controle do WordPress.

Após ativá-lo, basta pesquisar seu domínio HTTP (http://yourdomain.com) e substituí-lo por seu domínio HTTPS (https://yourdomain.com):

As melhores opções de plugins de busca substituem o WordPress

As melhores opções de plugins de busca substituem o WordPress

Note que este plugin não foi testado com o último lançamento do WordPress.

Como alternativa, você também poderia fazer uma busca e substituí-la pela interconect/it Search Replace DB PHP Script ou WP-CLI.

Passo 4: Confirme que as advertências de conteúdo misto se foram

Depois de terminar a busca e substituir, você vai querer verificar novamente seu site para confirmar que os avisos de conteúdo misto desapareceram. Recomendamos visitar seu site no frontend e clicar em algumas páginas enquanto olha o indicador de status do navegador na barra de endereço.

Em nosso site, podemos ver que a imagem . jpg está agora fixa, mas um aviso de script inseguro permanece.

Isso porque fizemos uma pesquisa e substituímos no carregamento de recursos de nosso próprio domínio. O aviso jQuery é causado por um script externo que tem que ser atualizado manualmente:

Aviso de conteúdo misto no Console

Aviso de conteúdo misto no Console

Neste caso, o script precisava ser adicionado manualmente ao nosso cabeçalho WordPress (header.php). Ele deveria estar usando um URL relativo, por isso o atualizamos para //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:

Script externo HTTP adicionado ao cabeçalho do WordPress no Editor de Temas

Script externo HTTP adicionado ao cabeçalho do WordPress no Editor de Temas

A busca e substituição muito provavelmente resolverá todos os seus problemas.

Em geral, você só terá problemas adicionais se tiver algo hardcoded em seu site WordPress.

Se você acha que há um script externo hardcoded em um de seus plugins ou temas, e está tendo problemas para rastreá-lo, sinta-se à vontade para contatar o desenvolvedor relevante para obter assistência.

Não há exemplos de avisos de conteúdo misto

Portanto, agora você sabe o que procurar para corrigir estes erros de conteúdo misto.

Aqui está um exemplo do que acontece no Cromo quando tudo está carregando corretamente sobre HTTPS, sem avisos de conteúdo misto:

Cromado sem avisos de conteúdo misto

Cromado sem avisos de conteúdo misto

O Firefox oferecerá uma mensagem semelhante:

Firefox sem avisos de conteúdo misto

Firefox sem avisos de conteúdo misto

E aqui está o que você verá na Microsoft Edge:

Microsoft Edge sem avisos de conteúdo misto

Microsoft Edge sem avisos de conteúdo misto

Embora o texto da mensagem possa variar ligeiramente dependendo do navegador que você estiver usando, você deve ver uma notificação indicando uma conexão segura. Se o fizer, você saberá que não está mais lidando com erros de conteúdo misto em seu site WordPress.

E quanto ao HSTS?

Alguns de vocês podem estar se perguntando por que não podem simplesmente usar o HSTS (HTTP Strict Transport Security) para resolver este problema. O HSTS foi criado como uma forma de forçar o navegador a usar conexões seguras quando um site está rodando sobre HTTPS.

É um cabeçalho de segurança que você pode adicionar ao seu servidor web e se reflete no cabeçalho de resposta como ‘Strict-Transport-Security’.

Entretanto, o HSTS não é uma solução rápida para todos os avisos de conteúdo misto. O HSTS apenas trata de redirecionamentos, enquanto que o aviso de conteúdo misto é uma característica do próprio navegador. Você também não tem controle sobre se sites de terceiros permitem o HSTS.

Portanto, você sempre precisará atualizar suas URLs http://. Esa Jokinen mergulha mais profundamente nas razões pelas quais, nesta discussão de Falhas do Servidor.

Recomendações adicionais (casos especiais)

Se você estiver usando o construtor de páginas do Elementor, você também deve entrar nas configurações da Elementor e atualizar a URL do seu site lá, para que os arquivos CSS se regenerem com a nova URL.

Uma vez feito isso, a limpeza do cache deve resolver qualquer advertência insegura devida à Elementor. Além disso, se você estiver usando o Kinsta CDN, é recomendável purgar também a zona CDN.

Ready to make the switch to HTTPS, mas frustrado por avisos de conteúdo misto? 🥴 Saiba como resolver este problema com a ajuda deste guia!Click to Tweet

Resumo

As advertências de conteúdo misto podem ser frustrantes de se lidar, especialmente quando há um punhado de causas às quais elas podem ser atribuídas. Felizmente, há algumas medidas simples que você pode tomar para resolver estes problemas.

Na maioria dos casos, uma simples busca e substituição deve resolver rapidamente seus avisos de conteúdo misto e ter seu site de volta ao normal em apenas alguns minutos. Se isso não corrigir tudo, é provável que haja um ou dois scripts codificados para trás. Você precisará encontrá-los e atualizá-los manualmente a fim de eliminar este erro ou contratar um desenvolvedor que possa fazer isso por você.

Se você tiver algum feedback ou se deparar com algum problema, informe-nos abaixo na seção de comentários!


Se você gostou deste artigo, então você vai adorar a plataforma de hospedagem WordPress da Kinsta. Turbine seu site e obtenha suporte 24/7 de nossa experiente equipe de WordPress. Nossa infraestrutura baseada no Google Cloud se concentra em escalabilidade automática, desempenho e segurança. Deixe-nos mostrar-lhe a diferença Kinsta! Confira nossos planos