Política de Segurança de Conteúdo

Se o seu site enviar um cabeçalho Content-Security-Policy, o navegador bloqueia tudo o que a política não autorize, incluindo scripts, iframes e pedidos Kaleidr. Esta página apresenta as permissões necessárias para cada produto. Se não enviar esse cabeçalho, não precisa desta página.

As permissões exigidas dependem do local em que o produto é executado:

Produto	Execução	A política deve permitir
Viewer	Num iframe alojado pelo Kaleidr	O script carregador e o iframe.
Tile	Num iframe alojado pelo Kaleidr	O carregador, o pedido de sessão e o iframe.
Chat	Na sua página	Carregador, pedidos à API, estilos injetados, tipos de letra incorporados e imagens.
Editor	Na sua página, com mapa próprio	Tudo o anterior, mais o anfitrião do mapa base, os workers e as imagens do mapa.

Para os dois produtos em iframe, a política do próprio Kaleidr dentro do frame governa o mapa e tudo o que carrega, não a sua política. Por isso as listas são curtas.

Os anfitriões

Anfitrião	O que fornece	Utilizado por
https://cdn.kaleidr.com	kaleidr.js e os pacotes que carrega (chat.js, viewer.js, editor.js, tile.js).	Todos os produtos quando usa o SDK.
https://api.kaleidr.com	A troca de sessão e os pedidos feitos pelo Chat durante as respostas.	Chat, Editor, Tile.
https://map-embed.kaleidr.com	A página apresentada no iframe de Viewer e Tile.	Viewer, Tile.
https://tile.kaleidr.com	O mapa base do Editor: estilo, mosaicos, sprites e fontes.	Editor.

Não é preciso permitir anfitriões de Mapbox, MapTiler ou OpenStreetMap para qualquer produto Kaleidr. Versões anteriores desta página incluíam-nos; essas entradas podem ser removidas. Se a sua página usa o próprio mapa, mantenha autorizados os anfitriões desse mapa.

Viewer

Com o elemento SDK ou Kaleidr.mount:

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

Com o fragmento iframe simples do Studio, não há script:

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

Viewer não precisa de uma entrada connect-src, pois um Viewer montado sem chave não faz pedidos a partir da sua 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 a troca de sessão feita pelo SDK com a chave publicável antes da criação do 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:;

Diretiva	Motivo
script-src https://cdn.kaleidr.com	O carregador e chat.js.
connect-src https://api.kaleidr.com	Troca de sessão, perguntas e respostas.
style-src 'unsafe-inline'	O Chat adiciona um elemento <style> ao cabeçalho do documento, sem nonce.
font-src data:	Os tipos de letra do Chat são incorporados no pacote como URLs data:.
img-src data:	Os ícones do Chat são incorporados como URLs data:.
img-src https:	Os cartões de lugares apresentam fotografias de anfitriões diferentes que não podem ser enumerados aqui. Um img-src mais restrito impede imagens de anfitriões não autorizados.
img-src https: (ícones de sites)	As ligações de respostas e os sites mostrados nos cartões incluem um ícone. É carregado pelo serviço favicon da Google em https://www.google.com, que redireciona para https://t0.gstatic.com até https://t3.gstatic.com. Um img-src restrito deve permitir https://www.google.com e https://*.gstatic.com, senão os ícones faltam, mas as ligações continuam a funcionar.

O pacote Chat não inclui biblioteca de mapas e não precisa de 'wasm-unsafe-eval'. Desenha sobre o mapa existente na sua página; mantenha as permissões de que a sua biblioteca precisa: o anfitrião de scripts, os anfitriões de mosaicos e estilos em connect-src e img-src, e worker-src blob: para Mapbox GL JS e MapLibre GL JS.

Quando Chat controla um elemento Viewer ou Tile do Kaleidr em vez do seu próprio mapa, adicione as diretivas desse produto, incluindo 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:;

Diretiva	Motivo
script-src https://cdn.kaleidr.com	O carregador e editor.js.
style-src 'unsafe-inline'	O Editor adiciona folhas de estilo ao documento por JavaScript, sem nonce.
connect-src https://api.kaleidr.com	A troca de sessão.
connect-src https://tile.kaleidr.com	Estilo, mosaicos, sprites e fontes de rótulos do mapa base, obtidos a partir da sua página.
img-src data: blob: https://tile.kaleidr.com	Imagens e ícones do mapa; o mapa cria imagens de URLs blob: e data:.
worker-src blob:	Os workers do mapa são executados a partir de URLs blob:.
font-src data:	As fontes da interface do Editor estão incorporadas como URLs data:.

'wasm-unsafe-eval' não faz parte da lista. Só o adicione a script-src se a consola indicar que a política bloqueou uma compilação WebAssembly de editor.js, responsável pela descodificação de modelos 3D.

Se passar um URL completo de estilo em styleId, permita também os anfitriões desse estilo em connect-src e img-src.

Vários produtos numa página

Combine as listas. Uma página com mapa Tile e painel Chat que o controla precisa de:

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:;

Uma política completa

Os blocos acima mostram o que o Kaleidr exige. Uma política real deve permitir os seus próprios recursos. Este é um cabeçalho completo para um site que serve os restantes recursos da sua origem e incorpora Viewer e 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' consta deste exemplo por um motivo alheio ao código Kaleidr: os fragmentos da documentação dimensionam o elemento com o atributo em linha style="display:block; height:480px". Sem 'unsafe-inline', a política ignora atributos de estilo em linha. Se os quiser bloquear, defina as dimensões na folha de estilos:

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

O tamanho do iframe definido pelo SDK não é afetado porque é estabelecido por script, que a política de estilos não bloqueia. O display:block predefinido do elemento também não é afetado: não é fornecido por uma etiqueta <style> nem por um atributo style e não precisa de 'unsafe-inline'.

Nonces, hashes e strict-dynamic

• Scripts. O carregador acrescenta cada pacote como elemento <script src>. Um script-src baseado em anfitriões permite-o. Se a política usa nonce com 'strict-dynamic', coloque o nonce na etiqueta do carregador. Os scripts adicionados ficam autorizados através de 'strict-dynamic' e dispensam a entrada do anfitrião.
• Estilos. Não se pode fornecer ao SDK um nonce para os estilos que Chat e Editor injetam. O seu conteúdo muda entre lançamentos, pelo que também não se pode fixar um hash. Ambos precisam de 'unsafe-inline' em style-src. Viewer e Tile não injetam estilos na página.
• Integridade. Não adicione um atributo integrity à etiqueta do carregador. O ficheiro é atualizado no mesmo endereço. Consulte Versionamento da CDN.

Identificar um recurso bloqueado

Todos os bloqueios surgem na consola do navegador com a diretiva responsável. Compare com esta tabela.

Sintoma	Diretiva indicada	Adicione
Nada é montado. Kaleidr is not defined.	script-src	https://cdn.kaleidr.com a script-src.
O elemento fica vazio. Consola: [kaleidr:<product>] [kaleidr] failed to load …/embed/v1/<product>.js	script-src	O mesmo anfitrião. O carregador foi permitido (por exemplo, por hash), mas o pacote não.
Viewer ou Tile apresenta uma caixa vazia.	frame-src (ou child-src ou default-src)	https://map-embed.kaleidr.com a frame-src.
Tile, Chat ou Editor não inicia; pedido sessions bloqueado.	connect-src	https://api.kaleidr.com a connect-src.
O painel de chat aparece sem estilo.	style-src	'unsafe-inline' a style-src.
Faltam ícones ou fontes do Chat.	img-src, font-src	data: a ambos.
Faltam fotografias de lugares ou ícones junto das ligações.	img-src	https: a img-src ou os anfitriões indicados na consola.
Os painéis do Editor aparecem mas o mapa está em branco.	connect-src, worker-src ou img-src	https://tile.kaleidr.com a connect-src e img-src; blob: a worker-src e img-src.
O Editor aparece sem estilo.	style-src	'unsafe-inline' a style-src.
O elemento ignora a altura no atributo style.	style-src	Nada; dimensione-o numa folha de estilos.

Nem todos os erros são causados pela política. Se o pedido sessions for enviado e responder com 401, 403 ou 429, a política permitiu-o e a API recusou-o. Consulte Erros e CORS e origens permitidas.

Ativar primeiro em modo de relatório

Para adicionar Kaleidr a uma política estrita sem interromper a página de produção:

1. Envie a política proposta como Content-Security-Policy-Report-Only, ao lado da atual, usando um endpoint seu para os relatórios.
2. Experimente a incorporação: carregue a página, mova o mapa e faça perguntas ao Chat que devolvam lugares com fotografias.
3. Adicione os recursos identificados nos relatórios às diretivas correspondentes. As fotografias de locais costumam trazer novos anfitriões.
4. Quando deixarem de surgir avisos, passe a política para Content-Security-Policy.

O que não é necessário

• Anfitriões Mapbox, MapTiler ou OpenStreetMap para produtos Kaleidr.
• 'unsafe-inline' em script-src. O carregador adiciona pacotes como elementos <script src>, nunca como scripts em linha.
• frame-ancestors. Esta diretiva controla quem pode incorporar a sua página, não o que a sua página pode incorporar.
• Entradas relativas ao que ocorre dentro dos iframes Viewer ou Tile.

Páginas relacionadas

• kaleidr.js, o carregador
• Versionamento da CDN
• Lista de verificação de produção
• Resolução de problemas