Validación HTML: Encabezado HTTP Content-Security-Policy: Política de seguridad de contenido incorrecta

Acerca de este problema HTML

Content Security Policy (CSP) es un mecanismo de seguridad que te permite controlar qué recursos puede cargar un navegador para tu página. Cuando se define mediante una etiqueta <meta http-equiv="Content-Security-Policy">, el validador verifica si el atributo content contiene una política bien formada. Si la cadena de política contiene directivas no reconocidas, expresiones de origen mal formadas, o errores de sintaxis, el validador reporta “Política de seguridad de contenido incorrecta”.

Las causas comunes de este error incluyen:

Nombres de directivas mal escritos — ej., script-scr en lugar de script-src.
Valores de origen inválidos — ej., usar self sin comillas simples (debe ser 'self').
Usar directivas no permitidas en etiquetas <meta> — las directivas frame-ancestors, report-uri y sandbox no están soportadas cuando CSP se entrega a través de un elemento <meta>.
Separadores incorrectos — las directivas se separan con punto y coma (;), no con comas o barras verticales.
Comillas faltantes o adicionales — palabras clave como 'none', 'self', 'unsafe-inline' y 'unsafe-eval' deben estar envueltas en comillas simples. Por el contrario, los nombres de host y URLs no deben estar entre comillas.

Esto es importante porque un CSP mal formado puede ser ignorado silenciosamente por los navegadores, dejando tu sitio sin la protección prevista contra ataques de cross-site scripting (XSS) e inyección de datos. Incluso un pequeño error tipográfico puede hacer que se omita una directiva completa, creando una brecha de seguridad que podrías no notar.

Cómo solucionarlo

Verifica los nombres de directivas contra la especificación CSP. Las directivas de fetch válidas incluyen default-src, script-src, style-src, img-src, font-src, connect-src, media-src, object-src, child-src, worker-src, entre otras.
Envuelve los valores de palabras clave en comillas simples: 'self', 'none', 'unsafe-inline', 'unsafe-eval', y fuentes nonce/hash como 'nonce-abc123'.
Separa las directivas con punto y coma. Múltiples valores de origen dentro de una sola directiva se separan con espacios.
Evita directivas que son inválidas en etiquetas <meta>. Si necesitas frame-ancestors o report-uri, entrega CSP a través de un encabezado HTTP en su lugar.
No incluyas el nombre del encabezado dentro del atributo content. El valor content debe contener solo la política en sí.

Ejemplos

❌ Directiva mal escrita y palabra clave sin comillas

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

Aquí, self no tiene las comillas simples requeridas, y script-scr es un error tipográfico de script-src.

✅ Nombre de directiva corregido y palabra clave con comillas apropiadas

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

❌ Usar una directiva no permitida en una etiqueta `<meta>`

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

La directiva frame-ancestors se ignora en elementos <meta> y puede activar una advertencia de validación.

✅ Eliminar la directiva no soportada de la etiqueta `<meta>`

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

Entrega frame-ancestors a través de un encabezado de respuesta HTTP en tu servidor en su lugar.

❌ Usar comas en lugar de punto y coma entre directivas

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

✅ Usar punto y coma para separar directivas

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

❌ Poner un nombre de host entre comillas (los nombres de host no deben estar entre comillas)

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

✅ Nombre de host sin comillas

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

En caso de duda, usa un evaluador CSP en línea para validar tu cadena de política antes de añadirla a tu HTML. Esto asegura tanto la corrección sintáctica como que la política realmente aplique lo que pretendes.