Corrigir conteúdo misto

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

O suporte a HTTPS é importante para proteger seu site e os usuários contra 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, demonstraremos técnicas e ferramentas para corrigir problemas de conteúdo misto. e evitar a ocorrência de novas.

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 como 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 relatados no Chrome DevTools.

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

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

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

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

Se você receber avisos como esses para http:// URL no seu site, será preciso corrigi-los na fonte do seu site. Recomendamos que você faça uma lista desses URLs, junto com a página em que os encontrou, para usar depois de corrigi-los.

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 posteriormente.

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á encontrá-los e corrigi-los 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 uma solicitação de recurso foi atualizada automaticamente de HTTP para HTTPS, Mude 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 tentar abrir o URL em uma guia do navegador.

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

  • Incluir 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 tiver permissão legal para fazer isso.
  • Excluir completamente o recurso do site.

Depois de corrigir o problema, visualizar a página em que encontrou o erro originalmente e verificar 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. pois 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 da galeria de imagens substituem a funcionalidade do <a>. tag e carregue o recurso HTTP especificado pelo atributo href em uma exibição lightbox na página. causando um problema de conteúdo misto.

Processar conteúdo misto em escala

As etapas manuais acima funcionam bem para sites menores. No entanto, em sites grandes ou com várias 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 suas páginas nunca carreguem recursos não seguros inesperadamente.

Política de Segurança de Conteúdo

Política de Segurança de Conteúdo (CSP) é um recurso de navegador para várias finalidades que pode ser usado para gerenciar conteúdo misto em grande escala. O mecanismo de denúncia 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 fazendo upgrade ou bloqueando conteúdo misto.

Para ativar esses recursos para uma página, inclua o parâmetro Cabeçalho Content-Security-Policy ou Content-Security-Policy-Report-Only na resposta enviada do seu servidor. Além disso, é possível 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 no seu site. Para ativar esse recurso, defina a diretiva Content-Security-Policy-Report-Only adicionando-a como um cabeçalho de resposta ao 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 do seu site, o navegador deles 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 sub-recurso for carregado por HTTP, um relatório será enviado. Essas denúncias incluem o URL da página em que ocorreu a violação da política e o URL do sub-recurso que violou a política. Se você configurar o endpoint de relatórios para registrar esses relatórios, você pode acompanhar o conteúdo misto no seu site sem acessar 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 CSP. Isso ocorre na maioria dos navegadores modernos.
  • Você só recebe relatórios das páginas acessadas pelos usuários. Então, se você tiver páginas que não recebem muito tráfego, pode levar algum tempo até você receber relatórios de todo o site.

A Política de Segurança de Conteúdo tem mais informações e um exemplo de endpoint.

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

Se seu site estiver 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 HTTPSChecker ou Verificação de conteúdo misto.

Como fazer upgrade de 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 fazer o upgrade e bloquear solicitações não seguras. É possível usar as diretivas da CSP para forçar o upgrade ou o bloqueio automático desses recursos.

O upgrade-insecure-requests A diretiva CSP 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 https://example.com/image.jpg, salvando o usuário do 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 in-line na classe <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, tentar atualizar solicitações que o navegador não faz atualmente.

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