Política de seguridad de contenido

Si tu sitio envía el encabezado Content-Security-Policy, el navegador bloquea todo lo que la política no autorice, incluidos los scripts, iframes y solicitudes de Kaleidr. Aquí se indica qué debes permitir para cada producto. Si no envías ese encabezado, no necesitas esta página.

Los permisos necesarios dependen de dónde se ejecuta el producto:

Producto	Se ejecuta	La política debe permitir
Viewer	En un iframe alojado por Kaleidr	El script cargador y el iframe.
Tile	En un iframe alojado por Kaleidr	El cargador, la solicitud de sesión y el iframe.
Chat	Dentro de tu página	El cargador, llamadas a la API, estilos inyectados, fuentes e imágenes incrustadas.
Editor	En tu página, con su propio mapa	Todo lo anterior, además del servidor del mapa base, los workers y las imágenes del mapa.

En los dos productos que utilizan iframe, el mapa y todos los recursos que carga se rigen por la política de Kaleidr dentro del iframe, no por la tuya. Por eso sus listas de permisos son breves.

Servidores necesarios

Servidor	Qué ofrece	Lo utiliza
https://cdn.kaleidr.com	kaleidr.js y los paquetes que carga (chat.js, viewer.js, editor.js, tile.js).	Todos los productos cuando se utiliza el SDK.
https://api.kaleidr.com	El intercambio de sesión y las solicitudes que hace Chat al responder.	Chat, Editor, Tile.
https://map-embed.kaleidr.com	La página que se muestra dentro de los iframes de Viewer y Tile.	Viewer, Tile.
https://tile.kaleidr.com	El mapa base del Editor: estilo, teselas, sprites y fuentes.	Editor.

No necesitas permitir servidores de Mapbox, MapTiler ni OpenStreetMap para los productos Kaleidr. Las versiones antiguas de esta página los incluían; puedes eliminarlos. Si tu página ejecuta un mapa propio, debes seguir permitiendo los servidores de ese mapa.

Viewer

Con el elemento SDK o Kaleidr.mount:

script-src  https://cdn.kaleidr.com;
frame-src   https://map-embed.kaleidr.com;

Con el fragmento iframe simple de Studio no hay ningún script:

frame-src   https://map-embed.kaleidr.com;

Viewer no necesita una entrada connect-src, porque un Viewer montado sin clave no hace solicitudes desde tu página.

Tile

script-src  https://cdn.kaleidr.com;
connect-src https://api.kaleidr.com;
frame-src   https://map-embed.kaleidr.com;

connect-src permite el intercambio de sesión que realiza el SDK con tu clave publicable antes de crear el iframe.

Chat

script-src  https://cdn.kaleidr.com;
connect-src https://api.kaleidr.com;
style-src   'unsafe-inline';
font-src    data:;
img-src     data: https:;

Directiva	Motivo
script-src https://cdn.kaleidr.com	El cargador y chat.js.
connect-src https://api.kaleidr.com	Intercambio de sesión y todas las preguntas y respuestas.
style-src 'unsafe-inline'	Chat añade un elemento <style> a la cabecera del documento, sin nonce.
font-src data:	Las fuentes de Chat se incluyen en el paquete como URL data:.
img-src data:	Los iconos de Chat se incluyen como URL data:.
img-src https:	Las tarjetas de lugares muestran fotos procedentes de servidores variables que no se pueden enumerar aquí. Con un img-src más restringido, las fotos de servidores no autorizados no se cargan.
img-src https: (iconos de sitios)	Los enlaces de las respuestas y los sitios de tarjetas muestran un icono. Procede del servicio favicon de Google en https://www.google.com, que redirige a https://t0.gstatic.com hasta https://t3.gstatic.com. Con un img-src restringido hay que permitir https://www.google.com y https://*.gstatic.com; de lo contrario faltarán los iconos aunque los enlaces funcionen.

El paquete de Chat no contiene una biblioteca de mapas y no requiere 'wasm-unsafe-eval'. Dibuja sobre el mapa existente en tu página: conserva los permisos de tu biblioteca, incluidos su servidor de scripts, servidores de teselas y estilos en connect-src e img-src, y worker-src blob: para Mapbox GL JS y MapLibre GL JS.

Si Chat controla un elemento Viewer o Tile de Kaleidr en lugar de tu propio mapa, añade también las directivas de ese producto, incluido frame-src https://map-embed.kaleidr.com.

Editor

script-src  'self' https://cdn.kaleidr.com;
style-src   'self' 'unsafe-inline';
connect-src 'self' https://api.kaleidr.com https://tile.kaleidr.com;
img-src     'self' data: blob: https://tile.kaleidr.com;
worker-src  blob:;
font-src    'self' data:;

Directiva	Motivo
script-src https://cdn.kaleidr.com	El cargador y editor.js.
style-src 'unsafe-inline'	Editor añade sus hojas de estilo mediante JavaScript, sin nonce.
connect-src https://api.kaleidr.com	El intercambio de sesión.
connect-src https://tile.kaleidr.com	Estilo, teselas, sprites y fuentes del mapa base que Editor obtiene desde tu página.
img-src data: blob: https://tile.kaleidr.com	Imágenes e iconos del mapa; el mapa crea imágenes con URL blob: y data:.
worker-src blob:	El mapa ejecuta sus workers desde URL blob:.
font-src data:	Fuentes de la interfaz de Editor incluidas como URL data:.

'wasm-unsafe-eval' no forma parte de la lista. Añádelo a script-src solo si la consola indica que tu política bloqueó la compilación WebAssembly de editor.js, utilizada para descodificar modelos 3D.

Si pasas una URL completa de estilo mediante styleId, permite también los servidores propios de ese estilo en connect-src e img-src.

Varios productos en una página

Combina las listas. Una página con un mapa Tile y un panel Chat que lo controla necesita:

script-src  https://cdn.kaleidr.com;
connect-src https://api.kaleidr.com;
frame-src   https://map-embed.kaleidr.com;
style-src   'unsafe-inline';
font-src    data:;
img-src     data: https:;

Una política completa

Los bloques anteriores muestran los permisos que añade Kaleidr. Una política real también debe permitir tus recursos. Este es un encabezado completo para un sitio que sirve los demás recursos desde su propio origen e incluye Viewer y Tile:

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.kaleidr.com; connect-src 'self' https://api.kaleidr.com; frame-src https://map-embed.kaleidr.com; style-src 'self' 'unsafe-inline'

style-src 'unsafe-inline' aparece en este ejemplo por un motivo ajeno a Kaleidr: los fragmentos de esta documentación asignan altura con el atributo en línea style="display:block; height:480px", y una política sin 'unsafe-inline' ignora los atributos de estilo en línea. Si quieres bloquearlos, define el tamaño desde tu hoja de estilos:

kaleidr-map { display: block; height: 480px; }

El tamaño que el SDK asigna al iframe no se ve afectado, porque lo establece mediante script y la política de estilos no lo bloquea. Tampoco se ve afectado el display:block predeterminado del elemento, que no se aplica mediante una etiqueta <style> ni un atributo style y no requiere 'unsafe-inline'.

Nonces, hashes y strict-dynamic

• Scripts. El cargador añade cada paquete como un elemento <script src>. Una directiva script-src basada en servidores lo permite. Si tu política utiliza un nonce con 'strict-dynamic', coloca el nonce en la etiqueta del cargador. Los scripts que añade quedan autorizados por 'strict-dynamic' y no hace falta enumerar el servidor.
• Estilos. No es posible dar al SDK un nonce para los estilos que inyectan Chat y Editor. Su contenido cambia entre versiones, de modo que tampoco puede fijarse un hash. Estos productos requieren 'unsafe-inline' en style-src. Viewer y Tile no inyectan estilos en tu página.
• Integridad. No añadas un atributo integrity a la etiqueta del cargador. El archivo se actualiza en la misma URL. Consulta Versionado de la CDN.

Cómo aparece un recurso bloqueado

El navegador informa en la consola de cada bloqueo, indicando la directiva responsable. Compárala con esta tabla.

Síntoma	Directiva indicada	Añade
No se monta nada. Kaleidr is not defined.	script-src	https://cdn.kaleidr.com a script-src.
El elemento queda vacío. Consola: [kaleidr:<product>] [kaleidr] failed to load …/embed/v1/<product>.js	script-src	Lo mismo. Se permitió el cargador (por ejemplo, por hash) pero no el paquete.
Viewer o Tile muestra un cuadro vacío.	frame-src (o child-src, o default-src)	https://map-embed.kaleidr.com a frame-src.
Tile, Chat o Editor no inicia; se bloquea la solicitud sessions.	connect-src	https://api.kaleidr.com a connect-src.
El panel de chat aparece sin estilos.	style-src	'unsafe-inline' a style-src.
Faltan iconos o fuentes de Chat.	img-src, font-src	data: a ambos.
Faltan fotos de lugares o iconos junto a enlaces.	img-src	https: a img-src, o los servidores indicados por la consola.
Aparecen los paneles de Editor pero el mapa está vacío.	connect-src, worker-src o img-src	https://tile.kaleidr.com a connect-src e img-src, y blob: a worker-src e img-src.
Editor aparece sin estilos.	style-src	'unsafe-inline' a style-src.
El elemento ignora la altura del atributo style.	style-src	Nada; define la altura en una hoja de estilos.

No todos los fallos se deben a la política. Si la solicitud sessions se envía pero devuelve 401, 403 o 429, la política permitió la llamada y la API la rechazó. Consulta Errores y CORS y orígenes permitidos.

Implantación mediante solo informes

Para añadir Kaleidr a una política estricta sin romper una página de producción:

1. Envía la política propuesta como Content-Security-Policy-Report-Only junto a la actual, con un endpoint de informes bajo tu control.
2. Prueba la integración: carga la página, mueve el mapa y realiza preguntas en Chat que devuelvan lugares con fotos.
3. Añade las fuentes que aparezcan en los informes a las directivas indicadas. Las fotos de lugares suelen generar nuevos servidores.
4. Cuando los informes no indiquen bloqueos, cambia a Content-Security-Policy.

Permisos que no necesitas

• Servidores de Mapbox, MapTiler u OpenStreetMap para cualquier producto Kaleidr.
• 'unsafe-inline' en script-src. El cargador añade paquetes como elementos <script src>, nunca como scripts en línea.
• frame-ancestors. Esta directiva controla quién puede incorporar tu página, no qué puede incorporar tu página.
• Entradas para lo que sucede dentro de los iframes de Viewer o Tile.

Relacionado

• kaleidr.js, el cargador
• Versionado de la CDN
• Lista de verificación para producción
• Solución de problemas