How to Configure Tauri Desktop Build CSP Allowlist for Tile Hosts in GeoLibre

To enable custom tile hosts in GeoLibre Desktop, append the HTTPS (or HTTP for development) URL to both the connect-src and img-src directives in apps/geolibre-desktop/src-tauri/tauri.conf.json under app.security.csp, then rebuild the application.

GeoLibre Desktop runs inside a Tauri-powered WebView that enforces a strict Content-Security-Policy (CSP) to prevent loading untrusted resources. When you need to display tiles from self-hosted PMTiles servers or external XYZ services, you must explicitly configure the Tauri desktop build CSP allowlist for tile hosts in the configuration file.

Understanding the CSP Configuration Location

The CSP definition resides in apps/geolibre-desktop/src-tauri/tauri.conf.json within the app.security.csp field. This value is a single, space-delimited string containing multiple directives that govern which origins the WebView can communicate with.

The default configuration already permits built-in providers like OpenFreeMap and CARTO via predefined entries in the connect-src and img-src directives. Any additional tile host requires explicit declaration in this string.

Essential CSP Directives for Tile Hosting

Tauri separates resource permissions by request type. For map tiles to render correctly, you must whitelist hosts in two specific directives:

The connect-src Directive

The connect-src directive controls XMLHttpRequest, fetch, and WebSocket connections. Vector tile protocols like PMTiles require this permission to perform range requests or streaming downloads from the tile server.

The img-src Directive

The img-src directive governs image loading, including raster tiles served as PNG or JPEG images by XYZ tile services. Without this entry, the WebView blocks tile images even if the connection is permitted by connect-src.

Step-by-Step Configuration Guide

Follow these steps to add a custom tile host (e.g., https://tiles.mycompany.com) to the CSP allowlist:

1. Open apps/geolibre-desktop/src-tauri/tauri.conf.json in your editor.

2. Locate the csp entry nested under app.security.

3. Append the tile host URL to the connect-src directive, ensuring you include the scheme (https: or http:).

4. Append the identical host URL to the img-src directive.

5. Save the file and rebuild the desktop application using npm run tauri:dev for development or npm run tauri:build for production.

Practical Configuration Examples

Here is the complete CSP configuration showing where to insert custom hosts in apps/geolibre-desktop/src-tauri/tauri.conf.json:

{
  "app": {
    "security": {
      "csp": "default-src 'self'; \
        connect-src 'self' ipc: http://ipc.localhost asset: data: blob: https: \
        http://asset.localhost http://127.0.0.1:* http://localhost:* \
        wss://collab.geolibre.app ws://127.0.0.1:* ws://localhost:* \
        https://tiles.mycompany.com; \
        img-src 'self' asset: data: blob: https: http://asset.localhost \
        https://tiles.mycompany.com; \
        media-src 'self' blob: https:; \
        style-src 'self' 'unsafe-inline'; \
        script-src 'self' blob: 'unsafe-eval' 'wasm-unsafe-eval' \
        https://cdn.jsdelivr.net/npm/ https://cdn.jsdelivr.net/pyodide/ \
        https://accounts.google.com; \
        child-src 'self' http://127.0.0.1:* http://localhost:* \
        https://accounts.google.com https://www.google.com; \
        frame-src 'self' http://127.0.0.1:* http://localhost:* \
        https://accounts.google.com https://www.google.com; \
        worker-src blob: 'self'"
    }
  }
}

To add multiple custom hosts, append each URL space-separated to both directives:

... connect-src ... https://tiles.mycompany.com https://maps.other.org;
... img-src ... https://tiles.mycompany.com https://maps.other.org;

Security Considerations for Development and Production

The CSP string permits https: schemes by default for tile services. During local development, you may include http://127.0.0.1:* or http://localhost:* patterns to test against local tile servers. However, production builds should strictly use HTTPS to maintain the security guarantees of the Tauri environment and prevent man-in-the-middle attacks on tile data.

According to the docs/architecture.md and docs/plugin-api.md files in the opengeos/GeoLibre repository, bundled plugins that serve tiles must also respect these CSP constraints, and plugin developers should document any additional hosts requiring allowlist entries.

Summary

• The Tauri CSP configuration in GeoLibre Desktop is located at apps/geolibre-desktop/src-tauri/tauri.conf.json under app.security.csp.
• You must add tile host URLs to both the connect-src and img-src directives for full functionality.
• Use https: schemes for production tile services; restrict http: to development environments only.
• Rebuild the application with npm run tauri:build after modifying the CSP to apply changes.
• Reference docs/plugin-api.md when developing plugins that require additional tile host permissions.

Frequently Asked Questions

Where is the CSP configuration located in GeoLibre Desktop?

The CSP configuration is stored in apps/geolibre-desktop/src-tauri/tauri.conf.json within the app.security.csp property. This file controls all security policies for the Tauri WebView, including which external tile servers the application can access.

Do I need to modify both connect-src and img-src for tile hosts?

Yes. The connect-src directive permits the underlying network requests required for vector tiles (PMTiles), while img-src specifically authorizes the loading of raster image tiles. Omitting either directive results in blocked requests or missing map tiles depending on the tile format used.

Can I use HTTP tile servers in production builds?

While the CSP syntax supports http: schemes, production builds should use https: exclusively to maintain security integrity. HTTP should be restricted to development environments using localhost patterns like http://127.0.0.1:* to prevent security vulnerabilities in distributed applications.

How do I add multiple custom tile hosts?

Append each additional host URL space-separated to both the connect-src and img-src directives in the CSP string. For example: https://tiles.mycompany.com https://maps.other.org. Each entry must include the scheme and be added to both directives to ensure both connection and image loading permissions are granted.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}