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.
Prefere assistir à versão em vídeo?
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:
É 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:
A seguir, um exemplo de como este aviso se parece com o Microsoft Edge:
E aqui está como aparece no 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.
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:
- Você acabou de adicionar um novo serviço ou plugin ao seu site. Em particular, os desenvolvedores às vezes usam caminhos absolutos (http://yourdomain.com/style.css) em seus plugins ou temas para fazer um link para CSS e JavaScript, em vez de usar caminhos relativos (/style.css).
- Suas imagens têm URLs hardcoded (como http://yourdomain.com/image.png) que passam por HTTP. Estas podem estar dentro de posts, páginas, ou mesmo widgets.
- Você está vinculando a versões HTTP de scripts externos (jQuery hospedado, Font Awesome, etc.).
- Você tem embutidos scripts de vídeo que utilizam HTTP em vez de HTTPS.
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:
- Instalou um certificado SSL
- Redirecionado HTTP para HTTPS (em todo o site)
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:
- Windows: F12 ou CTRL + Shift + I
- macOS : Cmd + Opt + I
Você também pode abrir o Chrome DevTools a partir do menu de ferramentas em seu 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:
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:
Na aba Rede, você também pode encontrar uma lista de solicitações bloqueadas:
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:
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:
- Há uma pequena ferramenta gratuita chamada SSL Check do JitBit, que você pode usar para rastrear seu site HTTPS e procurar por imagens e scripts inseguros que acionarão uma mensagem de aviso nos navegadores. O número de páginas rastreadas é limitado a 400 por site.
- A ferramenta Ahrefs Site Audit tem a capacidade de detectar conteúdo misto HTTPS/HTTP. Se você já tem acesso a esta solução, ou alguém de sua equipe de marketing tem, esta pode ser uma ótima maneira de ser minucioso.
- HTTPS Checker é um software de desktop que você pode instalar para escanear seu site. Ele pode ajudá-lo a verificar avisos e conteúdo “não seguro” após grandes mudanças. Ele está disponível em Windows, Mac e Ubuntu. O plano gratuito permite que você verifique até 500 páginas por varredura.
- O SSL Insecure Content Fixer é um plugin WordPress que você pode instalar em seu site para descobrir erros que levam a avisos de conteúdo misto. Ele é de uso livre, e até mesmo executará automaticamente correções para resolver os erros.
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:
- http://ajax.googleapis.com/ajax/libs/jquery/3.31/jquery.min.js
- http://example-site.com/wp-content/50d00acf6e4%2Fpuppy-thumb.jpg?v=1600261043278
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:
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:
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:
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):
Como alternativa, você também poderia fazer uma busca e substituí-la pela interconect/it Search Replace DB PHP Script ou WP-CLI.
Confira nosso vídeo para saber mais sobre o uso de busca e substituição no WordPress:
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:
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:
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:
O Firefox oferecerá uma mensagem semelhante:
E aqui está o que você verá na Microsoft Edge:
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.
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!
Editor-chefe da Kinsta e consultor de marketing de conteúdo para desenvolvedores de plugins do WordPress. Conecte-se com Matteo no Twitter.
muito legal o seu site parabens pelo seu trabalho.