Politique de sécurité du contenu
Si votre site envoie un en-tête Content-Security-Policy, le navigateur bloque tout ce que cette politique n’autorise pas, notamment les scripts, les iframes et les requêtes Kaleidr. Cette page indique quoi autoriser pour chaque produit. Sans cet en-tête, elle n’est pas nécessaire.
Les autorisations requises dépendent du lieu d’exécution du produit :
| Produit | Exécution | Ce que votre politique doit autoriser |
|---|---|---|
| Viewer | Dans un iframe hébergé par Kaleidr | Le script chargeur et l’iframe. |
| Tile | Dans un iframe hébergé par Kaleidr | Le chargeur, la requête de session et l’iframe. |
| Chat | Dans votre page | Le chargeur, les requêtes API, les styles injectés, les polices intégrées et les images. |
| Editor | Dans votre page, avec sa propre carte | Tout ce qui précède, plus l’hôte du fond de carte, les workers et les images cartographiques. |
Pour les deux produits en iframe, la carte et toutes les ressources qu’elle charge sont régies par la politique de Kaleidr à l’intérieur de l’iframe, et non par la vôtre. Leurs listes sont donc courtes.
Les hôtes
| Hôte | Ressources servies | Utilisé par |
|---|---|---|
https://cdn.kaleidr.com | kaleidr.js et les bundles qu’il charge (chat.js, viewer.js, editor.js, tile.js). | Tous les produits utilisant le SDK. |
https://api.kaleidr.com | L’échange de session et les requêtes effectuées par Chat pendant ses réponses. | Chat, Editor, Tile. |
https://map-embed.kaleidr.com | La page affichée dans l’iframe Viewer ou Tile. | Viewer, Tile. |
https://tile.kaleidr.com | Le fond de carte de l’éditeur intégré : style, tuiles, sprites et polices. | Editor. |
Vous n’avez pas besoin d’autoriser les hôtes Mapbox, MapTiler ou OpenStreetMap pour les produits Kaleidr. D’anciennes versions de cette page les mentionnaient ; vous pouvez retirer ces entrées. Si votre page utilise sa propre bibliothèque de cartes, ses hôtes restent à autoriser.
Viewer
Avec l’élément SDK ou Kaleidr.mount :
script-src https://cdn.kaleidr.com;
frame-src https://map-embed.kaleidr.com;
Avec le simple extrait iframe fourni par Studio, aucun script n’est nécessaire :
frame-src https://map-embed.kaleidr.com;
Viewer ne nécessite pas d’entrée connect-src, car un Viewer monté sans clé n’effectue aucune requête depuis votre page.
Tile
script-src https://cdn.kaleidr.com;
connect-src https://api.kaleidr.com;
frame-src https://map-embed.kaleidr.com;
connect-src autorise l’échange de session réalisé par le SDK avec votre clé publiable avant de créer l’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:;
| Directive | Pourquoi |
|---|---|
script-src https://cdn.kaleidr.com | Le chargeur et chat.js. |
connect-src https://api.kaleidr.com | L’échange de session ainsi que toutes les questions et réponses. |
style-src 'unsafe-inline' | Chat ajoute un élément <style> sans nonce dans l’en-tête du document. |
font-src data: | Les polices de Chat sont intégrées au bundle sous forme d’URL data:. |
img-src data: | Les icônes de Chat sont intégrées sous forme d’URL data:. |
img-src https: | Les fiches de lieux affichent des photos provenant d’hôtes variables qu’on ne peut pas tous énumérer ici. Avec un img-src plus strict, les photos d’hôtes non autorisés sont bloquées. |
img-src https: (icônes de sites) | Les liens des réponses et les sites web des fiches de lieux affichent une icône provenant du service favicon Google à https://www.google.com, qui redirige vers https://t0.gstatic.com à https://t3.gstatic.com. Avec un img-src plus strict, autorisez https://www.google.com et https://*.gstatic.com, sinon les icônes manquent mais les liens fonctionnent. |
Le bundle Chat ne contient aucune bibliothèque de cartes et n’a pas besoin de 'wasm-unsafe-eval'. Il dessine sur votre carte existante : conservez donc les autorisations requises par votre bibliothèque, notamment son hôte de scripts, ses hôtes de tuiles et de styles dans connect-src et img-src, et worker-src blob: pour Mapbox GL JS et MapLibre GL JS.
Si Chat contrôle un élément Viewer ou Tile Kaleidr plutôt que votre propre carte, ajoutez également les directives de ce produit, dont 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:;
| Directive | Pourquoi |
|---|---|
script-src https://cdn.kaleidr.com | Le chargeur et editor.js. |
style-src 'unsafe-inline' | L’éditeur injecte ses feuilles de style depuis JavaScript, sans nonce. |
connect-src https://api.kaleidr.com | L’échange de session. |
connect-src https://tile.kaleidr.com | Style, tuiles, sprites et polices du fond de carte que l’éditeur télécharge depuis votre page. |
img-src data: blob: https://tile.kaleidr.com | Images et icônes cartographiques ; la carte crée des images depuis des URL blob: et data:. |
worker-src blob: | Les workers cartographiques s’exécutent depuis des URL blob:. |
font-src data: | Les polices de l’interface Editor sont intégrées sous forme d’URL data:. |
'wasm-unsafe-eval' ne figure pas dans la liste. Ajoutez-le à script-src uniquement si la console indique que la politique a bloqué une compilation WebAssembly provenant de editor.js, le décodeur de modèles 3D de l’éditeur.
Si vous transmettez une URL de style complète dans styleId, autorisez aussi les hôtes propres à ce style dans connect-src et img-src.
Plusieurs produits sur une même page
Cumulez les listes. Une page avec une carte Tile et un panneau Chat qui la contrôle a besoin 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:;
Une politique complète
Les blocs précédents montrent les besoins ajoutés par Kaleidr. Une vraie politique doit aussi autoriser vos propres ressources. Voici un en-tête complet pour un site qui sert toutes les autres ressources depuis sa propre origine et intègre Viewer et 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' apparaît dans cet exemple pour une raison indépendante du code Kaleidr : les extraits de cette documentation dimensionnent l’élément avec un attribut en ligne style="display:block; height:480px". Sans 'unsafe-inline', la politique ignore les attributs de style en ligne. Si vous préférez les bloquer, définissez la taille depuis votre feuille de style :
kaleidr-map { display: block; height: 480px; }
La taille donnée à l’iframe par le SDK n’est pas affectée : elle est définie par script, sans blocage par la politique de styles. Le display:block par défaut de l’élément n’est pas affecté non plus, car il ne vient ni d’une balise <style> ni d’un attribut style ; il n’a donc pas besoin de 'unsafe-inline'.
Nonces, empreintes et strict-dynamic
- Scripts. Le chargeur ajoute chaque bundle sous la forme d’un élément
<script src>. Une directivescript-srcfondée sur les hôtes l’autorise. Si votre politique utilise un nonce avec'strict-dynamic', placez ce nonce sur la balise du chargeur. Les scripts qu’il ajoute sont alors autorisés via'strict-dynamic'sans entrée pour l’hôte. - Styles. Il n’est pas possible de fournir au SDK un nonce pour les styles injectés par Chat et Editor. Leur contenu évolue à chaque publication : une empreinte fixe n’est donc pas possible non plus. Ces produits nécessitent
'unsafe-inline'dansstyle-src. Viewer et Tile n’injectent aucun style dans votre page. - Intégrité. N’ajoutez pas d’attribut
integritysur la balise du chargeur. Le fichier est mis à jour au même emplacement. Voir Versionnement du CDN.
Reconnaître une ressource bloquée
Chaque blocage est signalé dans la console avec la directive qui l’a provoqué. Comparez-le avec ce tableau.
| Symptôme | Directive nommée | Ajoutez |
|---|---|---|
Aucun produit ne se monte. Kaleidr is not defined. | script-src | https://cdn.kaleidr.com à script-src. |
L’élément reste vide. Console : [kaleidr:<product>] [kaleidr] failed to load …/embed/v1/<product>.js | script-src | Le même hôte. Le chargeur était autorisé, par exemple par hash, mais pas le bundle chargé. |
| Viewer ou Tile affiche une zone vide. | frame-src (ou child-src ou default-src) | https://map-embed.kaleidr.com à frame-src. |
Tile, Chat ou Editor ne démarre pas ; la requête sessions est bloquée. | connect-src | https://api.kaleidr.com à connect-src. |
| Le panneau de chat apparaît sans style. | style-src | 'unsafe-inline' à style-src. |
| Les icônes ou polices de Chat manquent. | img-src, font-src | data: aux deux. |
| Les photos de lieux ou les icônes près des liens sont absentes. | img-src | https: à img-src, ou les hôtes indiqués en console. |
| Les panneaux Editor apparaissent, mais la carte est vide. | connect-src, worker-src ou img-src | https://tile.kaleidr.com à connect-src et img-src ; blob: à worker-src et img-src. |
| L’éditeur semble sans style. | style-src | 'unsafe-inline' à style-src. |
L’élément ignore la hauteur dans son attribut style. | style-src | Rien : dimensionnez-le via une feuille de style. |
Toute erreur ne vient pas de la politique. Si la requête sessions est envoyée et revient avec le statut 401, 403 ou 429, la politique l’a autorisée et l’API l’a refusée. Voir Erreurs et CORS et origines autorisées.
Déploiement avec signalement uniquement
Pour intégrer Kaleidr dans une politique stricte sans casser votre site en production :
- Envoyez la politique envisagée via
Content-Security-Policy-Report-Only, en parallèle de la politique actuelle et avec votre propre point de collecte des rapports. - Testez l’intégration : chargez la page, déplacez la carte et posez quelques questions qui renvoient des lieux avec photos.
- Ajoutez les sources mentionnées dans les rapports aux directives correspondantes. Les photos de lieux nécessitent souvent de nouveaux hôtes.
- Lorsque les rapports ne signalent plus rien, passez à
Content-Security-Policy.
Autorisations inutiles
- Les hôtes Mapbox, MapTiler ou OpenStreetMap pour les produits Kaleidr.
'unsafe-inline'dansscript-src. Le chargeur ajoute les bundles comme éléments<script src>, jamais comme scripts en ligne.frame-ancestors. Cette directive contrôle qui peut intégrer votre page dans un cadre, et non ce que votre page peut intégrer.- Toute entrée concernant ce qui se passe à l’intérieur de l’iframe Viewer ou Tile.