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. Cada vez mais, o conteúdo misto 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 acessar uma página HTTPS no Google Chrome, o navegador identifica (com alertas) conteúdos mistos na forma de erros e advertências 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 as seguintes advertências. Se o navegador encontrar o conteúdo em um URL https, ele será atualizado automaticamente e uma mensagem será mostrada.

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 exibidos quando o conteúdo misto ativo é 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 procurar conteúdo misto diretamente no seu 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

Depois de encontrar conteúdo misto na origem do site, siga estas etapas para corrigir o problema.

Se você receber uma mensagem do console informando que uma solicitação de recurso foi atualizada automaticamente de HTTP para HTTPS, mude o URL http:// do recurso no 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 pelo 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 o recurso completamente 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 sobrepõem 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 pequenos, mas para sites grandes ou que têm diversas equipes de desenvolvimento separadas, pode ser difícil controlar todo o conteúdo 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.

Você pode ativar esses recursos em uma página incluindo o cabeçalho Content-Security-Policy ou Content-Security-Policy-Report-Only na resposta enviada pelo seu 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 acessa uma página do seu site, o navegador envia relatórios com 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. Esses relatórios 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 da política de segurança de conteúdo tem mais informações e um exemplo de endpoint.

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.
  • Edge: 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.