Rodar seu site WordPress através de HTTPS não é mais algo opcional. 🔒 Não só é mais seguro (tudo é criptografado, nada passa em modo de texto), mas também transmite confiança, é um fator de ranqueamento de SEO e fornece dados de referência mais precisos. Problemas de desempenho relacionados à criptografia foram corrigidos, na maioria dos casos, graças ao HTTP/2 e o Let’s Encrypt mudou uma indústria inteira fornecendo uma maneira fácil de obter certificados SSL gratuitos.

Para alguns negócios, no entanto, um dos motivos mais importantes é que navegadores da web como o Chrome e o Firefox estão impedindo o acessa àqueles que não rodam em HTTPS e mostrando avisos mais restritos. Isso é a última coisa que você quer que seus visitantes vejam!

Temos um guia abrangente de como migrar de HTTP para HTTPS e um problema muito comum que donos de websites encontram na sequência são os “avisos de conteúdo misto”. Hoje, vamos mostrar algumas maneiras diferentes que você pode corrigir esses problemas no seu site WordPress.

O que é um Aviso de Conteúdo Misto?

Um aviso de conteúdo misto aparece em um navegador do usuário quando o site WordPress está carregando os scripts ou conteúdos ao mesmo tempo em HTTPS e HTTP. Você não pode carregar ambos, já que eles são protocolos completamente separados. Quando você migra para HTTPS, tudo precisa estar rodando em HTTPS.

O site Wired documentou a transição de HTTP para HTTPS e um aviso de conteúdo misto os surpreendeu:

“[…] um dos maiores desafios de mudar para HTTPS é preparar todo o nosso conteúdo para que seja entregue através de conexões seguras. Se uma página é carregada em HTTPS, todos os outros ativos (como imagens e arquivos Javascript) também devem ser carregados em HTTPS. Estamos vendo um volume alto de relatórios desses problemas de “conteúdo misto” ou de casos em que um ativo HTTP inseguro é carregado no contexto de uma página HTTPS segura. Para fazer nossos lançamentos de forma certa, precisamos certificar que temos poucos problemas de conteúdo misto – e que estamos entregando o conteúdo do WIRED.com da forma mais segura possível.”

Abaixo estão alguns exemplos do que acontece nos navegadores se você não corrige esses avisos.

Exemplo de Aviso de Conteúdo Misto no Chrome

Aqui está um exemplo do que acontece no Chrome quando um aviso de conteúdo misto é disparado em um site WordPress. De acordo com o NetMarketShare, o Chrome atualmente lidera em termos de participação no mercado de navegadores, sendo usado por mais de 60% dos usuários da web. Assim, o aviso a seguir é provavelmente o que a maioria dos seus visitantes irão ver.

Aviso de conteúdo misto no Chrome

Aviso de conteúdo misto no Chrome

Exemplo de Aviso de Conteúdo Misto no Firefox

Aqui está um exemplo do que acontece no Firefox quando um aviso de conteúdo misto é disparado no site WordPress.

Aviso de conteúdo misto no Firefox

Aviso de conteúdo misto no Firefox

Exemplo de Aviso de Conteúdo Misto no Microsoft Edge

Aqui está um exemplo do que acontece no navegador Microsoft Edge quando um aviso de conteúdo misto é disparado no site WordPress.

Aviso de conteúdo misto no Microsoft Edge

Aviso de conteúdo misto no Microsoft Edge

Exemplo de Aviso de Conteúdo Misto no Internet Explorer

Aqui está um exemplo do que acontece no Internet Explorer quando um aviso de conteúdo misto é disparado. Como você pode ver, o IE é provavelmente um dos piores, porque ele efetivamente quebra a renderização da página até que o pop-up seja clicado.  Ainda bem que o Internet Explorer não possui mais uma grande participação no mercado dos navegadores.

Aviso de conteúdo misto no Internet Explorer

Aviso de conteúdo misto no Internet Explorer

O que Causa os Avisos de Conteúdo Misto?

Descobrimos que o momento mais comum para os avisos de conteúdo misto aparecerem é exatamente após alguém migrar seu site WordPress de HTTP para HTTPS. Os links HTTP são simplesmente transportados e isso faz com que os avisos de conteúdo misto comecem a ser disparados. Outro motivo poderia ser o fato de que você acabou de inserir um novo serviço ou plugin em seu site.

Aqui estão alguns exemplos adicionais do que pode causar um aviso:

  • Os desenvolvedores de plugins, algumas vezes, usam diretórios absolutos  (http://yourdomain.com/style.css) em seus plugins ou temas para vincular CSS e JavaScript ao invés de usar diretórios relativos (/style.css).
  • As imagens possuem URLs codificadas (http://yourdomain.com/image.png) que apontam para HTTP. Isso pode ocorrer dentro de um post, página ou até mesmo widget.
  • Sua vinculação para as versões HTTP de scripts externos. (Hosted jQuery, Font Awesome, etc.)
  • Você embutiu scripts de vídeo usando HTTP ao invés de HTTPS.

Como Corrigir Avisos de Conteúdo Misto

Siga os passos simples abaixo para corrigir avisos de conteúdo misto no WordPress. Estamos presumindo que você já fez o seguinte:

Usaremos nosso site de desenvolvimento (wpdev.ink) nos exemplos.

Passo 1

A primeira coisa que você precisa fazer é descobrir quais recursos ainda estão rodando em HTTP. Vá até a página em que o aviso aparece e inicie o Chrome DevTools. Lembre-se, isso pode estar acontecendo apenas em certas áreas do seu site, não globalmente.

  • Windows: F12 or CTRL + Shift + I
  •  MAC: Cmd + Opt + I)

Você também pode abrir o Chrome DevTools pelo menu de ferramentas.

Iniciando o Chrome DevTools

Iniciando o Chrome DevTools

Passo 2

Há alguns lugares em que você pode verificar quais recursos não estão rodando em HTTPS. O primeiro é a aba “Console”. Observação: Você precisará atualizar a página depois que abrir o Chrome DevTools, para que ela carregue tudo de forma adequada.

Abaixo podemos observar com facilidade que há uma imagem insegura sendo vinculada a uma versão HTTP do site e um link apontando uma versão HTTP do Hosted jQuery.

Conteúdo misto no console do Chrome DevTools

Conteúdo misto no console do Chrome DevTools

Você também pode olhar a aba “Segurança” (Security). Isso te mostrará as origens não seguras e é possível clicar em “Visualizar a solicitação no painel de rede.” Observação: Você precisará atualizar a página depois que abrir o Chrome DevTools, para que ela carregue tudo de forma adequada.

Aba segurança do Chrome DevTools

Aba segurança do Chrome DevTools

E por último, mas não menos importante, você pode ver as solicitações na aba “Rede” (Network). Observação: Você precisará atualizar a página depois que abrir o Chrome DevTools, para que ela carregue tudo de forma adequada.

Rede do Chrome DevTools

Rede do Chrome DevTools

Se você não está usando o Chrome ou apenas quer um rápido resumo dos erros, você também pode usar uma ferramenta gratuita como a Why No Padlock. Essa ferramenta examina uma página individual e mostra todos os recursos inseguros.

Ferramenta Why No Padlock

Ferramenta Why No Padlock

Verificando os Avisos HTTPS em Massa

Se você está preocupado com o restante do seu site, talvez queira fazer uma verificação em massa. Aqui estão algumas opções recomendadas.

  • Há uma pequena ferramenta gratuita chamada SSL Check, da JitBit, que você pode usar para fazer uma varredura em seu site WordPress HTTPS e procurar por imagens inseguras e scripts que vão desencadear uma mensagem com esse tipo de aviso nos navegadores. O número de páginas para a varredura é limitado a 200 por website.
  • ferramenta de inspeção Ahrefs agora tem a capacidade de detectar conteúdo misto HTTPS/HTTP. Se você já tem acesso a ela, ou alguém da sua equipe de trabalho tem, essa pode ser uma ótima maneira de ser detalhista e cuidadoso.
  • O HTTPS Checker é um software para desktop que você pode instalar e que irá examinar seu site. Esse software pode te ajudar a verificar avisos “não seguros” e conteúdos após grandes mudanças. Ele está disponível para Windows, Mac e Ubuntu. O plano gratuito te permite verificar até 100 páginas.

Passo 3

O próximo passo é confirmar que aqueles recursos rodando em HTTP estão acessíveis em HTTPS. Eles provavelmente estão, você só tem que atualizar os links. Com nosso exemplo abaixo, vamos utilizar a imagem insegura e o Hosted jQuery.

  • http://wpdev.ink/wp-content/uploads/2018/06/website-never-done.jpg
  • http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Se pegarmos essas duas URLs, colocarmos na barra de endereço do navegador e acrescentarmos HTTPS no começo, podemos ver que elas rodam corretamente. Por isso, só precisamos continuar fazendo uma busca e substituição no nosso site.

Passo 4

Há muitas maneiras diferentes nas quais você pode fazer uma busca e substituição no WordPress. Neste post, vamos te levar através de duas opções recomendadas diferentes.

Se você está curioso, não recomendamos usar o plugin Really Simple SSL. Embora seja um ótimo plugin, você não deve confiar em uma solução assim por muito tempo. Você não irá migrar de volta para HTTP mais tarde, então faça isso do jeito certo e atualize suas URLs HTTP no seu banco de dados (como mostraremos abaixo).

Se você é um cliente Kinsta, pode usar nossa ferramenta de busca e substituição que está disponível à direita, no painel MyKinsta. Na aba de Sites, clique em “Gerenciar” (Manage) ao lado do site que você quer fazer uma busca e substituição. Depois clique em “Ferramentas” (Tools) e você irá encontrar a ferramenta Busca e Substituição (Search and Replace) no final.

Ferramenta Kinsta de busca e substituição

Ferramenta Kinsta de busca e substituição

  1. Coloque no campo de busca o valor que você quer procurar no banco de dados, que nesse caso é nosso domínio HTTP: http://wpdev.ink.
  2. Coloque no campo de substituição o novo valor que deve ser usado para substituir o valor que você está procurando. Nesse caso, é o nosso domínio HTTPS: https://wpdev.ink.
  3. Certifique-se que a opção “Teste Completo” (Dry Run) seja selecionada primeiro, já que isso contará quantas substituições serão feitas sem realmente realizá-las. Depois, clique em “Substituir” (Replace).

Importante: Certifique-se que você não incluiu nenhum espaço no início/fim em ambos os campos, porque isso pode produzir resultados indesejados.

Busca e Substituição de HTTP para HTTPS

Busca e Substituição de HTTP para HTTPS

Você verá um aviso confirmando se você quer rodar o comando para calcular quantas substituições serão feitas. Clique em “Substituir” (Replace) para confirmar. Observação: No modo “Teste Completo” (Dry Run) não serão feitas mudanças no banco de dados.

Busca e Substituição calcula substituições

Busca e Substituição calcula substituições

Você verá em seguida, o número total de substituições que serão feitas.

Número de substituições

Número de substituições

Na sequência, você desmarcar a opção de “Teste Completo” (Dry Run) e clicar em “Substituição” (Replace) novamente, para executar a busca e substituição, fazendo mudanças no seu banco de dados. Observação: Um backup é automaticamente feito quando essa opção é executada (identificador do backup: beforesearchandreplace). Assim, você sempre pode reverter as mudanças caso seja necessário.

Busca e substituição real

Busca e substituição real

Em seguida, você receberá uma confirmação final do número de substituições feitas.

Confirmação da busca e substituição real

Confirmação da busca e substituição real

Se você não é um cliente Kinsta, pode fazer essa mesma tarefa com o plugin gratuito Better Search Replace e em seguida, simplesmente excluir o plugin depois de realizar a tarefa.

Plugin Better Search Replace

Plugin Better Search Replace

Você pode fazer o download dele no repositório do WordPress ou procurá-lo em seu painel do WordPress, na opção “Adicionar novo” na aba de plugins. Depois de ativá-lo, faça uma busca pelo seu domínio HTTP (http://seudominio.com) e substitua-o pelo seu domínio HTTPS (https://seudominio.com).

Opções do Better Search Replace

Opções do Better Search Replace

De modo alternativo, você também pode fazer uma busca e substituição com o Script PHP de Busca e Substituição no DB interconnect/it ou WP-CLI.

Passo 5

Depois de terminar de fazer a busca e substituição, você pode desejar realizar uma verificação dupla em seu site, para confirmar que os avisos de conteúdo misto foram embora. Recomendamos que você visite seu site e clique em algumas páginas enquanto observa o indicador de status do navegador na parte de superior, na barra de endereço.

No nosso site, podemos ver que agora a imagem insegura foi corrigida, mas o aviso do Hosted jQuery ainda permanece. O motivo para isso acontecer é que rodamos a busca e substituição em recursos que carregam em nosso próprio domínio. Este é um script externo que tem que ser atualizado manualmente.

Aviso de conteúdo misto

Aviso de conteúdo misto

Nesse caso, o script foi adicionado manualmente no nosso cabeçalho do WordPress  (header.php). O script deve utilizar uma URL relativa, então nós a atualizamos para: //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Script externo HTTP

Script externo HTTP

Para a maioria dos usuários, a busca e substituição provavelmente corrigirá todos os problemas. Aqueles que codificaram algo no site WordPress irão encontrar problemas adicionais. Se você acha que há um script externo codificado em um dos seus plugins ou temas e está tendo problemas para rastreá-lo, sinta-se à vontade para entrar em contato com o desenvolvedor e pedir assistência.

Exemplo Sem Avisos de Conteúdo Misto no Chrome

Aqui está um exemplo do que acontece no Chrome quando tudo está rodando corretamente em HTTPS sem avisos de conteúdo misto.

Sem avisos de conteúdo misto no Chrome

Sem avisos de conteúdo misto no Chrome

Firefox No Mixed Content Warnings Example

Aqui está um exemplo do que acontece no Firefox quando tudo está rodando corretamente em HTTPS sem avisos de conteúdo misto.

Sem avisos de conteúdo misto no Firefox

Sem avisos de conteúdo misto no Firefox

Exemplo Sem Avisos de Conteúdo Misto no Microsoft Edge

Aqui está um exemplo do que acontece no Microsoft Edge quando tudo está rodando corretamente em HTTPS sem avisos de conteúdo misto.

Sem avisos de conteúdo misto no Microsoft Edge

Sem avisos de conteúdo misto no Microsoft Edge

E o HSTS?

Alguns de vocês podem estar se perguntando por que não é possível simplesmente usar o HSTS (HTTP Segurança de Transporte Estrito – Strict Transport Security) para corrigir isso. O HSTS foi criado como uma forma de forçar o navegador a usar conexões seguras quando um site está rodando em HTTPS. É um cabeçalho seguro, que você adiciona no seu servidor da web e é refletido no cabeçalho de resposta como Segurança-de-Transporte-Estrito (Strict-Transport-Security).

O HSTS não é um conserto rápido para todos os avisos de conteúdos mistos. O HSTS simplesmente lida com redirecionamentos, enquanto o aviso de conteúdo misto é um recurso do próprio navegador. Você também não tem controle sobre sites de terceiros que habilitem o HSTS. Dessa maneira, sempre é necessário atualizar as URLs http://.

A Esa Jokinen mergulha fundo nos motivos nesta discussão sobre Falha do Servidor.

Recomendações Adicionais (Casos Especiais)

  • Se você estiver usando o criador de páginas Elementor, também deverá ir para as configurações do Elementor e atualizar o URL do site para que os arquivos CSS sejam gerados novamente com o novo URL. Depois de ter feito isso, limpar o cache deve limpar todos os avisos inseguros devido ao Elementor.
  • Se você estiver usando o CDN da Kinsta, é recomendável limpar também a Zona CDN.

Resumo

Para a maioria dos usuários, uma simples busca e substituição deve resolver rapidamente seus avisos de conteúdo misto e colocar seu site de volta ao normal em poucos minutos. Se isso não resolver tudo, é provável que haja um ou dois scripts deixados para trás que estão codificados. Para esses casos, você precisará encontrá-los e atualizá-los manualmente.

Se você tem algum feedback ou se deparou com algum problema, nos conte abaixo nos comentários.

24
Shares