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

> Learn how to configure Tauri desktop build CSP allowlist for tile hosts in GeoLibre. Easily add custom tile URLs to img-src and connect-src directives in tauri.conf.json for seamless map integration.

- Repository: [Open Geospatial Solutions/GeoLibre](https://github.com/opengeos/GeoLibre)
- Tags: how-to-guide
- Published: 2026-08-22

---

**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`](https://github.com/opengeos/GeoLibre/blob/main/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`](https://github.com/opengeos/GeoLibre/blob/main/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`](https://github.com/opengeos/GeoLibre/blob/main/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`](https://github.com/opengeos/GeoLibre/blob/main/apps/geolibre-desktop/src-tauri/tauri.conf.json):

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

```json
... 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`](https://github.com/opengeos/GeoLibre/blob/main/docs/architecture.md) and [`docs/plugin-api.md`](https://github.com/opengeos/GeoLibre/blob/main/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`](https://github.com/opengeos/GeoLibre/blob/main/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`](https://github.com/opengeos/GeoLibre/blob/main/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`](https://github.com/opengeos/GeoLibre/blob/main/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.