¿Qué son los errores de CSP?

CSP es una función de seguridad del navegador que controla qué recursos externos pueden cargarse; si se configura de forma demasiado restrictiva, puede impedir que el Intercom Messenger, los artículos del Help Center, imágenes, Product Tours y medios se carguen correctamente.

Esto puede interrumpir funcionalidades clave y causar problemas como:

Cargas de imágenes bloqueadas: No se pueden cargar imágenes en Product Tours o en el Messenger.
Product Tours no responsivos: Los cambios realizados en un Product Tour no se guardan.
Visuales rotos: Componentes de Intercom, como logotipos, pueden aparecer como imágenes rotas.
Problemas con el Help Center: Los artículos pueden aparecer en blanco o parcialmente renderizados, o pueden ocurrir cargadores infinitos.

Nota: Este artículo es relevante si has instalado el Intercom Messenger o cualquier producto JS de Intercom en tu sitio (incluyendo Product Tours, Surveys, Checklists y News). Si usas el Help Center alojado independiente de Intercom (por ejemplo, help.yourco.com), Intercom gestiona su propio CSP y la política de tu sitio no se aplica allí. Actualizar tu CSP requiere acceso a la configuración de tu servidor o a los encabezados de respuesta HTTP; si no gestionas directamente la infraestructura de tu sitio, comparte este artículo con tu equipo de desarrollo o departamento de TI.

Cómo identificar errores de CSP

Para confirmar que CSP está causando problemas con Intercom en tu sitio, necesitarás revisar la consola de desarrollador de tu navegador.

Abre las herramientas de desarrollador en tu navegador (normalmente presionando F12 o haciendo clic derecho y seleccionando Inspect).
Navega a la pestaña Console.
Reproduce el problema en tu sitio, por ejemplo, intentando subir una imagen o guardar un Product Tour.
Busca mensajes de error en rojo en la consola que indiquen una violación de CSP. Estos mensajes suelen mencionar solicitudes bloqueadas a dominios de Intercom (por ejemplo, uploads.intercomcdn.com, *.intercom.io) y la directiva CSP específica que causó el bloqueo, como connect-src o img-src. Ejemplo de error: Se rechazó cargar el script 'https://widget.intercom.io' porque viola la siguiente directiva de Content Security Policy: "script-src 'self'".

Cómo resolver errores de CSP

Para resolver estos errores, necesitarás actualizar la configuración CSP de tu sitio para permitir recursos de los dominios requeridos por Intercom.

1. Actualiza tus directivas CSP

Ubica la directiva con error: En el error de la consola de desarrollador, identifica qué directiva causó la restricción (por ejemplo, img-src).
Incluye en la lista blanca los dominios de Intercom: Añade las URLs requeridas de Intercom a las directivas relevantes en la configuración CSP de tu sitio.

Importante: Normalmente deberás añadir los dominios de Intercom a las siguientes directivas:

connect-src: Para funcionalidades principales.
img-src: Para imágenes y archivos adjuntos.
media-src: Para recursos multimedia.

Los dominios a añadir son *.intercomcdn.com, *.intercom.io y *.intercom-chat.com (requerido para la conexión websocket en vivo del Messenger — no cubierto por el comodín *.intercom.io). Para la lista de dominios más actualizada, consulta Using Intercom with Content Security Policy.

Además, incluye intercom-sheets.com en la directiva frame-src para asegurar la correcta carga de los iframes del visor de artículos.

Nota: Si los artículos se cargan correctamente en tu Help Center independiente pero aparecen en blanco o no se renderizan al abrirse dentro del Messenger, lo más probable es que sea por un desajuste en CSP. El Messenger renderiza los artículos en un iframe; si tu política bloquea frame-src intercom-sheets.com o connect-src *.intercom.io, el visor de artículos dentro del Messenger fallará incluso cuando el resto del Messenger se cargue. Añade intercom-sheets.com a tu directiva frame-src para resolver esto.

2. Revisa los encabezados de seguridad

Encabezados demasiado restrictivos como X-Frame-Options o configuraciones CSP de frame-ancestors también pueden afectar la funcionalidad de Intercom. Revisa estas configuraciones y ajústalas según sea necesario.

3. Verifica la configuración de red

Asegúrate de que la configuración de tu red o firewall permita conexiones salientes a los servidores de Intercom. Puede que necesites pedir a tu equipo de TI que incluya en la lista blanca los dominios necesarios.

4. Prueba tus cambios

Después de actualizar la configuración CSP:

Recarga las páginas afectadas en tu sitio y verifica si las funciones de Intercom ahora funcionan correctamente.
Monitorea la consola de desarrollador para asegurarte de que no aparezcan nuevas violaciones de CSP.
Realiza una recarga completa en tu navegador para limpiar los recursos en caché después de hacer cambios en la CSP.
Si las funciones de Intercom aún no funcionan después de una recarga completa, vuelve a abrir la pestaña Console y verifica si quedan errores de violación de CSP. Cada nuevo mensaje de error indicará la siguiente directiva o dominio que debes añadir; repite el ciclo de actualización y prueba hasta que no aparezcan violaciones.

¿Qué funciones de Intercom se ven afectadas por errores de CSP?

Diferentes funciones de Intercom son bloqueadas por distintas directivas CSP. La tabla a continuación relaciona cada función de Intercom con sus síntomas comunes, la directiva CSP que la bloquea y los dominios que deben incluirse en la lista blanca.

Función de Intercom	Síntomas	Directiva bloqueada	Dominio(s) para incluir en lista blanca
Messenger (widget de chat)	El widget no carga o es invisible	script-src, connect-src	widget.intercom.io, js.intercomcdn.com, *.intercom-chat.com, api-iam.intercom.io (US), api-iam.eu.intercom.io (EU), api-iam.au.intercom.io (AU)
Help Center	Los artículos aparecen en blanco o no se cargan, incluso cuando se ven dentro del espacio Help del Messenger	frame-src, connect-src	intercom-sheets.com, *.intercom.io
Cargas de imágenes y archivos adjuntos	Las imágenes no se cargan o se cargan rotas	img-src, connect-src	uploads.intercomcdn.com, *.intercomcdn.com
Product Tours	Los tours no se renderizan o los cambios no se guardan	script-src, connect-src, img-src	.intercom.io, .intercomcdn.com
Medios (video/audio)	Los archivos multimedia no se reproducen	media-src, connect-src	*.intercomcdn.com

Consejo: Si ves múltiples errores en la consola a la vez, resuélvelos empezando por la directiva más restrictiva primero (por ejemplo, script-src bloquea más que img-src). Una corrección de directiva puede resolver varios síntomas.

Cómo actualizar tu CSP para funciones específicas de Intercom

Usa el modo Report-Only para auditar antes de aplicar, luego realiza cambios incrementales por función.

Usa primero el modo Report-Only

Antes de editar tu Content Security Policy (CSP) aplicada para corregir problemas con Intercom, añade un encabezado Content-Security-Policy-Report-Only junto con tu política existente. Esto registra violaciones sin bloquear nada, para que puedas auditar con seguridad qué debe cambiar.

Añade el siguiente encabezado Content-Security-Policy-Report-Only a los encabezados de respuesta HTTP de tu servidor (junto con — no reemplazando — tu encabezado Content-Security-Policy aplicado):

Content-Security-Policy-Report-Only:
  script-src 'self' https://widget.intercom.io https://js.intercomcdn.com;
  connect-src 'self' https://*.intercom.io https://*.intercomcdn.com
             https://*.intercom-chat.com wss://*.intercom-chat.com;
  img-src 'self' https://*.intercomcdn.com;
  media-src 'self' https://*.intercomcdn.com;
  frame-src 'self' https://intercom-sheets.com;

Aplica los cambios de forma incremental

Activa el modo Report-Only y reproduce el problema.
Anota cada dominio bloqueado en la salida de la consola.
Añade el/los dominio(s) requerido(s) a la directiva relevante en tu política aplicada — una directiva a la vez.
Vuelve a probar en modo Report-Only para confirmar que no aparezcan nuevas violaciones.
Promueve el cambio a tu encabezado Content-Security-Policy aplicado.
Una vez promovido, realiza una recarga completa y confirma que la función de Intercom funciona como se espera. Si aparece una nueva violación en la consola, repite desde el paso 1 para la nueva directiva.

Cómo mantener tu CSP actualizado

La configuración CSP no es una solución única. Intercom actualiza periódicamente su infraestructura y requisitos de dominio. Sigue los pasos a continuación para mantener tu política actualizada.

Monitorea nuevas violaciones

Configura un endpoint de reporte CSP usando la directiva report-to (una directiva CSP que indica a los navegadores dónde enviar los reportes de violación) para que las violaciones se envíen automáticamente a un servicio de registro; no tendrás que depender de revisar manualmente la consola. Nota: report-uri está obsoleto en favor de report-to. Al usar report-to, también debes añadir un encabezado HTTP de respuesta Reporting-Endpoints para definir el grupo de endpoints.
Revisa los reportes de violación tras cualquier actualización de Intercom o después de desplegar cambios en la infraestructura de tu sitio.

Mantente al día con la lista de dominios de Intercom

Marca el artículo Using Intercom with Content Security Policy y consúltalo cuando Intercom lance actualizaciones importantes.
Suscríbete a la página de estado de Intercom para recibir notificaciones sobre cambios en la infraestructura que puedan afectar los dominios requeridos.

Evita errores comunes de gestión

No uses unsafe-inline o unsafe-eval como atajo. Añadir estos valores a script-src desactiva una clase importante de protección contra XSS (cross-site scripting) y expone tu sitio a ataques de inyección de scripts, incluso como medida temporal. En su lugar, usa nonces (tokens criptográficos añadidos a cada etiqueta script) o hashes; Intercom soporta CSPv3 estricto (la tercera versión del estándar CSP) con políticas basadas en nonce.
Mantén tu CSP bajo control de versiones. Registra cada cambio junto con el historial de despliegues para poder revertir cambios en directivas si afectan la funcionalidad.
Prueba primero en un entorno de staging. Siempre valida los cambios de CSP contra las funciones de Intercom en un entorno de staging o previsualización antes de desplegar en producción.

Nota: Si integras Intercom mediante Google Tag Manager (GTM), asegúrate de que las entradas script-src y connect-src de tu contenedor GTM también estén incluidas en tu política; GTM inyecta scripts dinámicamente, lo que puede provocar violaciones adicionales de CSP aparte de los dominios propios de Intercom. Si los problemas persisten tras actualizar estas directivas, despliega Intercom Messenger en una etiqueta GTM dedicada en lugar de usar scripts inline.

Nota: Los cambios en el encabezado CSP pueden ser almacenados en caché por tu CDN o navegador. Si no ves el comportamiento actualizado de la política tras hacer cambios, limpia la caché de tu CDN y realiza una recarga completa antes de probar de nuevo.

Notas:

Actualizar tu Content Security Policy requiere acceso a la configuración de tu servidor o a los encabezados HTTP. Si no gestionas directamente la infraestructura de tu sitio, comparte este artículo con tu equipo de desarrollo o departamento de TI.
Al integrar Intercom Messenger mediante Google Tag Manager (GTM), asegúrate de que la región de alojamiento de GTM coincida con la región de tu espacio de trabajo de Intercom. Configura api_base al endpoint de tu región: api-iam.intercom.io (US), api-iam.eu.intercom.io (EU / EMEA — Europa, Medio Oriente y África), o api-iam.au.intercom.io (AU).

Resolviendo errores de Content Security Policy (CSP)