Corrigir conteúdo misto

Jo-el van Bergen

Rachel Andrew Technical Writer

A compatibilidade com HTTPS é uma etapa importante para proteger seu site e os usuários contra ataques, mas o conteúdo misto pode inutilizar essa proteção. 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 sobre conteúdo misto como erros e avisos no console JavaScript.

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

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

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

Se você encontrar avisos como esses para URLs http:// no seu site, será necessário corrigi-los na origem do site. É útil fazer uma lista desses URLs, junto com a página em que você os encontrou, para usar quando for corrigi-los.

Observação: os erros e avisos de conteúdo misto são mostrados apenas para a página que você está visualizando no momento, e o console JavaScript é limpo sempre que você navega para uma nova página. Isso significa que você precisa acessar cada página do site individualmente para encontrar esses erros.

Como encontrar conteúdo misto no seu site

É possível pesquisar conteúdo misto diretamente no código-fonte. Pesquise http:// na sua origem e procure tags que incluam atributos de URL HTTP. Ter http:// no atributo href de tags âncora (<a>) geralmente não é um problema de conteúdo misto, com algumas exceções importantes discutidas mais adiante.

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 erros 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, é seguro mudar o URL http:// do recurso no código para https://. Também é possível verificar se um recurso está disponível de forma segura 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 em https://, considere uma das seguintes opções:

• Inclua o recurso de um host diferente, se houver um disponível.
• Baixe e hospede o conteúdo diretamente no seu site, se tiver permissão legal para isso.
• Exclua o recurso do seu site.

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

Cuidado com o uso de tags não padrão

Cuidado com o uso de tags não padrão no seu site. Por exemplo, URLs de tag âncora (<a>) não resultam em erros de conteúdo misto, porque fazem com que o navegador acesse uma nova página. Isso significa que, geralmente, eles 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 de lightbox na página, causando um problema de conteúdo misto.

Processar conteúdo misto em grande escala

As etapas manuais acima funcionam bem para sites menores, mas 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, 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 de forma inesperada.

Política de Segurança de Conteúdo

A Política de Segurança de Conteúdo (CSP, na sigla em inglês) é um recurso de navegador multiuso que pode ser usado para gerenciar conteúdo misto em grande escala. O mecanismo de relatórios da CSP pode ser usado para rastrear conteúdo misto no seu site e fornecer políticas de restrição para proteger os usuários, fazendo upgrade ou bloqueando o 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 pelo 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.

Observação: os navegadores mais recentes aplicam todas as políticas de segurança de conteúdo que recebem. Vários valores de cabeçalho CSP recebidos pelo navegador no cabeçalho de resposta ou nos elementos <meta> são combinados e aplicados como uma única política. As políticas de relatórios também são combinadas. As políticas são combinadas pela interseção delas. Ou seja, cada política após a primeira só pode restringir ainda mais o conteúdo permitido, não ampliá-lo.

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

Observação: o cabeçalho de resposta report-uri está sendo descontinuado e substituído por report-to.

Browser Support

• 70
• 79
• 149
• 16.4

Source

É possível fornecer os dois cabeçalhos. Nesse caso, report-uri será ignorado se o navegador for compatível com report-to.

Sempre que um usuário acessa uma página no 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 é carregado por HTTP, um relatório é 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 o endpoint de relatórios para registrar esses relatórios, poderá acompanhar o conteúdo misto no seu site sem precisar visitar cada página.

As duas ressalvas são:

• Os usuários precisam acessar sua página em um navegador que entenda o cabeçalho da CSP. Isso é verdade para a maioria dos navegadores mais recentes.
• Você só recebe relatórios das páginas visitadas 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 para todo o site.

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

Alternativas para gerar relatórios com CSP

Se o site estiver hospedado em 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 o Mixed Content Scan.

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

Browser Support

• 44
• 17
• 48
• 10.1

Source

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

A diretiva de 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="https://example.com/image.jpg">,

Em vez disso, o navegador faz uma solicitação segura para https://example.com/image.jpg, evitando que o usuário receba 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 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 é aplicada em cascata aos documentos <iframe>, garantindo que toda a página seja protegida.