Configuración de Content Security Policy (CSP)

Lista de permitidos de dominios y configuraciones de encabezados para proxies inversos, firewalls y redes que aplican políticas de seguridad estrictas

Content Security Policy (CSP) es un estándar de seguridad que ayuda a prevenir ataques de cross-site scripting (XSS) controlando qué recursos puede cargar una página web. Mintlify sirve una CSP predeterminada que protege a la mayoría de los sitios. Si alojas tu documentación detrás de un proxy inverso o firewall que sobrescribe la CSP predeterminada, es posible que necesites configurar los encabezados de CSP para que las funcionalidades operen correctamente.

Directivas CSP

Las siguientes directivas de CSP se utilizan para controlar qué recursos se pueden cargar:

• script-src: Controla qué scripts se pueden ejecutar
• style-src: Controla qué hojas de estilo se pueden cargar
• font-src: Controla qué fuentes se pueden cargar
• img-src: Controla qué imágenes, iconos y logotipos se pueden cargar
• connect-src: Controla a qué URL se puede conectar para llamadas a API y conexiones WebSocket
• frame-src: Controla qué URL se pueden incrustar en frames o iframes
• default-src: Valor de reserva para otras directivas cuando no se establece explícitamente

Lista de permitidos de dominios

Dominio	Propósito	Directiva CSP	Requisito
d4tuoctqmanu0.cloudfront.net	CSS y fuentes de KaTeX	style-src, font-src	Obligatorio
*.mintlify.dev	Contenido de la documentación	connect-src	Obligatorio
d3gk2c5xim1je2.cloudfront.net	Iconos, imágenes, logotipos	img-src	Obligatorio
www.googletagmanager.com	Google Analytics/GTM	script-src, connect-src	Opcional
cdn.segment.com	Segment (analítica)	script-src, connect-src	Opcional
plausible.io	Plausible (analítica)	script-src, connect-src	Opcional
tag.clearbitscripts.com	Clearbit (seguimiento)	script-src	Opcional
cdn.heapanalytics.com	Heap (analítica)	script-src	Opcional
chat.cdn-plain.com	Widget de chat de Plain	script-src	Opcional
chat-assets.frontapp.com	Widget de chat de Front	script-src	Opcional

Ejemplo de configuración de CSP

Incluye solo los dominios de los servicios que utilices. Elimina cualquier dominio de analítica que no hayas configurado para tu documentación.

Content-Security-Policy:
default-src 'self';
script-src 'self' 'unsafe-inline' 'unsafe-eval' www.googletagmanager.com cdn.segment.com plausible.io tag.clearbitscripts.com cdn.heapanalytics.com
chat.cdn-plain.com chat-assets.frontapp.com;
style-src 'self' 'unsafe-inline' d4tuoctqmanu0.cloudfront.net;
font-src 'self' d4tuoctqmanu0.cloudfront.net;
img-src 'self' data: blob: d3gk2c5xim1je2.cloudfront.net;
connect-src 'self' *.mintlify.dev www.googletagmanager.com cdn.segment.com plausible.io;
frame-src 'self' *.mintlify.dev;

Configuraciones comunes por tipo de proxy

La mayoría de los proxies inversos permiten añadir encabezados personalizados.

Configuración de Cloudflare

Crea una regla de transformación de encabezados de respuesta:

1. En tu panel de Cloudflare, ve a Rules > Overview.
2. Selecciona Create rule > Response Header Transform Rule.
3. Configura la regla:

• Modify response header: Set static
  • Header name: Content-Security-Policy
  • Header value:
    default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' d4tuoctqmanu0.cloudfront.net; font-src 'self' d4tuoctqmanu0.cloudfront.net; img-src 'self' data: blob: d3gk2c5xim1je2.cloudfront.net; connect-src 'self' *.mintlify.dev; frame-src 'self' *.mintlify.dev;
    

4. Publica la regla.

Configuración de AWS CloudFront

Añade una política de encabezados de respuesta en CloudFront:

{
"ResponseHeadersPolicy": {
    "Name": "MintlifyCSP",
    "Config": {
    "SecurityHeadersConfig": {
        "ContentSecurityPolicy": {
        "ContentSecurityPolicy": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' d4tuoctqmanu0.cloudfront.net; font-src 'self' d4tuoctqmanu0.cloudfront.net; img-src 'self' data: blob: d3gk2c5xim1je2.cloudfront.net; connect-src 'self' *.mintlify.dev; frame-src 'self' *.mintlify.dev;",
        "Override": true
        }
      }
    }
  }
}

Configuración de Vercel

Añade lo siguiente a tu vercel.json:

{
"headers": [
    {
    "source": "/(.*)",
    "headers": [
        {
        "key": "Content-Security-Policy",
        "value": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' d4tuoctqmanu0.cloudfront.net; font-src 'self' d4tuoctqmanu0.cloudfront.net; img-src 'self' data: blob: d3gk2c5xim1je2.cloudfront.net; connect-src 'self' *.mintlify.dev; frame-src 'self' *.mintlify.dev;"
        }
      ]
    }
  ]
}

Solución de problemas

Identifica infracciones de la CSP en la consola de tu navegador:

1. Abre las herramientas para desarrolladores de tu navegador.
2. Ve a la pestaña Consola.
3. Busca errores que empiecen por:
   • Content Security Policy: The page's settings blocked the loading of a resource
   • Refused to load the script/stylesheet because it violates the following Content Security Policy directive
   • Refused to connect to because it violates the following Content Security Policy directive