Corrigir conteúdo misto

Oferecer suporte a HTTPS no seu site é uma etapa importante para proteger o site e os usuários contra ataques, mas o conteúdo misto pode tornar essa proteção inútil. O conteúdo misto cada vez mais inseguro será bloqueado pelos navegadores, conforme explicado em O que é conteúdo misto?

Neste guia, vamos demonstrar técnicas e ferramentas para corrigir problemas de conteúdo misto e evitar que novos aconteçam.

Como encontrar conteúdo misto acessando seu site

Ao visitar uma página HTTPS no Google Chrome, o navegador alerta você sobre conteúdo misto na forma de erros e avisos no Console JavaScript.

Em O que é conteúdo misto?, você pode encontrar vários exemplos e ver como os problemas são informados no Chrome DevTools.

O exemplo de conteúdo misto passivo traz os seguintes avisos. Se o navegador conseguir encontrar o conteúdo em um URL https, ele vai fazer upgrade automaticamente e mostrar uma mensagem.

Chrome DevTools mostrando os avisos quando conteúdo misto é detectado e atualizado

O conteúdo misto ativo é bloqueado e exibe um aviso.

Chrome DevTools mostrando os avisos quando conteúdo misto ativo é bloqueado

Se você encontrar avisos como esses para URLs http:// no seu site, corrija-os na fonte do seu site. Vale a pena fazer uma lista desses URLs, junto com a página em que eles foram encontrados, para uso na correção.

Como encontrar conteúdo misto no seu site

Você pode pesquisar conteúdo misto diretamente no código-fonte. Pesquise http:// na origem e procure tags que incluam atributos de URL HTTP. Ter http:// no atributo href das tags âncora (<a>) geralmente não é um problema de conteúdo misto, com algumas exceções notáveis que serão discutidas mais tarde.

Caso seu site seja publicado com um sistema de gerenciamento de conteúdo, é possível que links para URLs não seguros sejam inseridos quando as páginas forem publicadas. Por exemplo, as imagens podem ser incluídas com um URL completo em vez de um caminho relativo. Você precisará encontrar e corrigir esses problemas no conteúdo do CMS.

Como corrigir conteúdo misto

Depois de encontrar conteúdo misto na fonte do seu site, siga estas etapas para corrigi-lo.

Se você receber uma mensagem do console informando que o upgrade automático de uma solicitação de recurso de HTTP para HTTPS foi feito, será possível alterar com segurança o URL http:// do recurso no seu código para https://. Você também pode verificar se um recurso está disponível com segurança mudando http:// para https:// na barra de URL do navegador e tentando abrir o URL em uma guia do navegador.

Se o recurso não estiver disponível via https://, considere uma das seguintes opções:

  • Inclua o recurso de um host diferente, se houver um disponível.
  • Fazer o download e hospedar o conteúdo diretamente no seu site, se você tiver permissão legal para fazer isso.
  • Excluir completamente o recurso do site.

Depois de corrigir o problema, visualize a página em que você encontrou o erro e verifique se ele não aparece mais.

Cuidado com o uso de tags fora do padrão

Cuidado com o uso de tags fora do padrão no seu site. Por exemplo, URLs de tags âncora (<a>) não resultam em erros de conteúdo misto, porque fazem com que o navegador navegue para uma nova página. Isso significa que eles geralmente não precisam ser corrigidos. No entanto, alguns scripts de galeria de imagens substituem a funcionalidade da tag <a> e carregam o recurso HTTP especificado pelo atributo href em uma exibição lightbox na página, causando um problema de conteúdo misto.

Lidar com conteúdo misto em escala

As etapas manuais acima funcionam bem para sites menores. No entanto, para sites grandes ou com muitas equipes de desenvolvimento separadas, pode ser difícil acompanhar todo o conteúdo carregado. Para ajudar nessa tarefa, use a Política de Segurança de Conteúdo para instruir o navegador a notificar você sobre conteúdo misto e garantir que as páginas nunca carreguem recursos não seguros inesperadamente.

Política de Segurança de Conteúdo

A Política de Segurança de Conteúdo (CSP) é um recurso de navegador multifuncional que pode ser usado para gerenciar conteúdo misto em escala. O mecanismo de relatórios da CSP pode ser usado para rastrear conteúdo misto no seu site e fornecer políticas de aplicação para proteger os usuários ao fazer upgrade ou bloquear conteúdo misto.

Para ativar esses recursos em uma página, inclua o cabeçalho Content-Security-Policy ou Content-Security-Policy-Report-Only na resposta enviada do servidor. Além disso, você pode definir Content-Security-Policy (embora não Content-Security-Policy-Report-Only) usando uma tag <meta> na seção <head> da sua página.

Como encontrar conteúdo misto com a Política de Segurança de Conteúdo

Você pode usar a Política de Segurança de Conteúdo para coletar relatórios de conteúdo misto no seu site. Para ativar esse recurso, defina a diretiva Content-Security-Policy-Report-Only adicionando-a como um cabeçalho de resposta para seu site.

Cabeçalho de resposta:

Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint

Sempre que um usuário acessa uma página do seu site, o navegador dele envia relatórios formatados em JSON sobre qualquer violação da política de segurança de conteúdo para https://example.com/reportingEndpoint. Nesse caso, sempre que um sub-recurso for carregado por HTTP, um relatório será enviado. Esses relatórios incluem o URL da página em que ocorreu a violação da política e o URL de sub-recursos que violou a política. Se você configurar o endpoint para registrar esses relatórios, será possível rastrear o conteúdo misto do seu site sem visitar cada página.

As duas ressalvas quanto a isso são:

  • Os usuários precisam acessar sua página em um navegador que entenda o cabeçalho da CSP. Isso se aplica à maioria dos navegadores mais recentes.
  • Você só recebe relatórios sobre as páginas acessadas pelos usuários. Portanto, se suas páginas não recebem muito tráfego, talvez demore um pouco até que você receba relatórios de todo o site.

O guia Política de segurança de conteúdo tem mais informações e um endpoint de exemplo.

Alternativas à geração de relatórios com a CSP

Se o site for hospedado para você por uma plataforma como o Blogger, talvez você não tenha acesso para modificar cabeçalhos e adicionar uma CSP. Em vez disso, uma alternativa viável seria usar um rastreador de sites para encontrar problemas no seu site, como o HTTPSChecker ou a Verificação de conteúdo misto.

Como fazer upgrade de solicitações não seguras

Compatibilidade com navegadores

  • 44
  • 17
  • 48
  • 10.1

Origem

Os navegadores estão começando a fazer upgrade e bloquear solicitações não seguras. É possível usar as diretivas da CSP para forçar o upgrade ou bloqueio automático desses recursos.

A diretiva CSP upgrade-insecure-requests instrui o navegador a fazer upgrade de URLs não seguros antes de fazer solicitações de rede.

Por exemplo, se uma página tiver uma tag de imagem com um URL HTTP, como <img src="http://example.com/image.jpg">.

Em vez disso, o navegador faz uma solicitação segura para https://example.com/image.jpg, salvando o usuário de conteúdo misto.

Para ativar esse comportamento, envie um cabeçalho Content-Security-Policy com esta diretiva:

Content-Security-Policy: upgrade-insecure-requests

Ou incorporando essa mesma diretiva inline na seção <head> do documento usando um elemento <meta>:

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

Assim como acontece com o upgrade automático do navegador, se o recurso não estiver disponível por HTTPS, a solicitação de upgrade falhará e o recurso não será carregado. Isso mantém a segurança da sua página. A diretiva upgrade-insecure-requests vai além do upgrade automático do navegador, tentando atualizar solicitações que o navegador não faz no momento.

A diretiva upgrade-insecure-requests opera em cascata nos documentos <iframe>, garantindo que a página inteira esteja protegida.