Verificação HTML: Cabeçalho HTTP Content-Security-Policy: Política de segurança de conteúdo inválida

Sobre este problema HTML

Content Security Policy (CSP) é um mecanismo de segurança que permite controlar quais recursos um navegador pode carregar para a sua página. Quando definida através de uma tag <meta http-equiv="Content-Security-Policy">, o validador verifica se o atributo content contém uma política bem formada. Se a string da política contém diretivas não reconhecidas, expressões de origem malformadas ou erros de sintaxe, o validador reporta “Bad content security policy.”

Causas comuns deste erro incluem:

Nomes de diretivas mal escritos — por exemplo, script-scr em vez de script-src.
Valores de origem inválidos — por exemplo, usar self sem aspas simples (deve ser 'self').
Usar diretivas não permitidas em tags <meta> — as diretivas frame-ancestors, report-uri e sandbox não são suportadas quando CSP é entregue através de um elemento <meta>.
Separadores incorretos — as diretivas são separadas por ponto e vírgula (;), não por vírgulas ou pipes.
Aspas em falta ou a mais — palavras-chave como 'none', 'self', 'unsafe-inline' e 'unsafe-eval' devem estar envolvidas em aspas simples. Pelo contrário, nomes de host e URLs não devem estar entre aspas.

Isto é importante porque uma CSP malformada pode ser silenciosamente ignorada pelos navegadores, deixando o seu site sem a proteção pretendida contra ataques de cross-site scripting (XSS) e injeção de dados. Mesmo um pequeno erro de digitação pode fazer com que uma diretiva inteira seja ignorada, criando uma lacuna de segurança que você pode não notar.

Como corrigir

Verifique os nomes das diretivas contra a especificação CSP. As diretivas fetch válidas incluem default-src, script-src, style-src, img-src, font-src, connect-src, media-src, object-src, child-src, worker-src e outras.
Envolva valores de palavra-chave em aspas simples: 'self', 'none', 'unsafe-inline', 'unsafe-eval' e origens nonce/hash como 'nonce-abc123'.
Separe diretivas com ponto e vírgula. Múltiplos valores de origem dentro de uma única diretiva são separados por espaços.
Evite diretivas que são inválidas em tags <meta>. Se precisar de frame-ancestors ou report-uri, entregue CSP através de um cabeçalho HTTP em vez disso.
Não inclua o nome do cabeçalho dentro do atributo content. O valor content deve conter apenas a política em si.

Exemplos

❌ Diretiva mal escrita e palavra-chave sem aspas

<meta http-equiv="Content-Security-Policy"
  content="default-src self; script-scr https://example.com">

Aqui, self não tem as aspas simples necessárias, e script-scr é um erro de digitação para script-src.

✅ Nome de diretiva corrigido e palavra-chave adequadamente entre aspas

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src https://example.com">

❌ Usar uma diretiva não permitida numa tag `<meta>`

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self'; frame-ancestors 'none'">

A diretiva frame-ancestors é ignorada em elementos <meta> e pode despoletar um aviso de validação.

✅ Remover a diretiva não suportada da tag `<meta>`

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self'">

Entregue frame-ancestors através de um cabeçalho de resposta HTTP no seu servidor em vez disso.

❌ Usar vírgulas em vez de ponto e vírgula entre diretivas

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self', script-src 'none', style-src 'self'">

✅ Usar ponto e vírgula para separar diretivas

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'none'; style-src 'self'">

❌ Colocar um nome de host entre aspas (nomes de host não devem estar entre aspas)

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self'; img-src 'https://images.example.com'">

✅ Nome de host sem aspas

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self'; img-src https://images.example.com">

Na dúvida, use um avaliador CSP online para validar a sua string de política antes de a adicionar ao seu HTML. Isto garante tanto a correção sintática quanto que a política efetivamente aplica o que você pretende.