Corrigir conteúdo misto

Jo-el van Bergen
Jo-el van Bergen
X
Rachel Andrew

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

Neste guia, vamos mostrar 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ê encontra vários exemplos e descobre como os problemas são informados no Chrome DevTools.

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

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

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

Chrome DevTools mostrando os avisos mostrados quando conteúdo misto ativo está bloqueado

Se você encontrar avisos como esses para URLs http:// no seu site, é necessário corrigi-los na origem do site. Vale a pena fazer uma lista desses URLs, registrando também a página em que os encontrou para facilitar na hora de consertá-los.

Como encontrar conteúdo misto no seu site

Você pode pesquisar conteúdo misto diretamente no código-fonte. Procure http:// no código e tags que incluam atributos URL HTTP. Ter http:// no atributo href de tags de âncora (<a>) muitas vezes não é um problema de conteúdo misto, com algumas notáveis exceções abordadas depois.

Se o site for publicado usando 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ê precisa encontrar e corrigir esses problemas no conteúdo do CMS.

Como corrigir conteúdo misto

Quando você encontrar conteúdo misto na fonte do seu site, siga estas etapas para corrigi-lo.

Se você receber uma mensagem do console informando que uma solicitação de recurso foi atualizada automaticamente de HTTP para HTTPS, é possível alterar com segurança o URL http:// do recurso no seu código para https://. Também é possível 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.
  • Faça o download e hospede o conteúdo diretamente no seu site, se estiver legalmente apto a fazê-lo.
  • Excluir completamente o recurso do site.

Depois de corrigir o problema, abra a página em que você encontrou o erro originalmente 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 tag de âncora (<a>) não resultam em erros de conteúdo misto, já que fazem com que o navegador navegue para uma nova página. Isso significa que normalmente não precisam de conserto. No entanto, alguns scripts de galeria de imagens neutralizam a funcionalidade da tag <a> e carregam o recurso HTTP especificado pelo atributo href em uma tela lightbox na página, o que causa um problema de conteúdo misto.

Processar conteúdo misto em grande 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 que está sendo carregado. Para ajudar nessa tarefa, você pode usar 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 confiáveis inesperadamente.

Política de Segurança de Conteúdo

A política de segurança de conteúdo (CSP) é um recurso de navegador de várias finalidades que pode ser usado para gerenciar conteúdo misto em escala. O mecanismo de comunicação 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 atualizando ou bloqueando 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 (mas não Content-Security-Policy-Report-Only) usando uma tag <meta> na seção <head> da 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 do seu site. Para ativar esse recurso, defina a diretiva Content-Security-Policy-Report-Only adicionando-a como cabeçalho de resposta no 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 visita uma página no seu site, o navegador envia relatórios no formato JSON sobre tudo que viola a política de segurança de conteúdo para https://example.com/reportingEndpoint. Nesse caso, sempre que um subrecurso for carregado por HTTP, um relatório será enviado. Essas denúncias incluem o URL da página em que a violação da política ocorreu e o URL do sub-recurso que violou a política. Se você configurar seu ponto de extremidade de comunicação para registrar esses relatórios, vai poder acompanhar o conteúdo misto no seu site sem precisar acessar cada página.

As duas ressalvas disso são:

  • Os usuários precisam acessar a página em um navegador que entenda o cabeçalho CSP. Isso ocorre na maioria dos navegadores modernos.
  • Você só recebe relatórios de páginas acessadas pelos usuários. Portanto, se você tiver páginas que não recebem muito tráfego, pode levar algum tempo até que você receba relatórios de todo o site.

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

Alternativas para denunciar com a CSP

Se o site for hospedado por uma plataforma como o Blogger, você pode não ter acesso para modificar cabeçalhos e adicionar uma CSP. Uma alternativa viável é usar um rastreador de sites para encontrar problemas no seu site, como o HTTPSChecker ou o Mixed Content Scan.

Como atualizar solicitações não seguras

Compatibilidade com navegadores

  • Chrome: 44.
  • Borda: 17.
  • Firefox: 48.
  • Safari: 10.1.

Origem

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

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

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

O navegador cria uma solicitação segura para https://example.com/image.jpg, protegendo o usuário de conteúdo misto.

Você pode ativar esse comportamento enviando um cabeçalho Content-Security-Policy com esta diretiva:

Content-Security-Policy: upgrade-insecure-requests

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

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

Assim como no upgrade automático do navegador, se o recurso não estiver disponível por HTTPS, a solicitação atualizada vai 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 fazer upgrade de solicitações que o navegador não faz no momento.

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