Content Security Policy in Tauri

"The capability system guards the bridge. The CSP guards the page itself — the layer where the injection happens in the first place."

Two Layers, Two Jobs

Capabilities decide what native powers the webview can reach. A Content Security Policy works one layer up: it tells the webview which scripts, styles, images, and connections are allowed to load inside the page at all. A good CSP blocks the classic XSS vector — an attacker injecting <script> or an inline onclick that the browser would otherwise happily run. Defense in depth: CSP makes injection hard, capabilities limit the damage if it happens anyway.

csp: null Is for Prototyping Only

The scaffold often sets "csp": null, which means 'no policy' — convenient while you iterate, but it ships zero XSS protection. Before release, set a real CSP in app.security.csp. The helpful part: Tauri automatically injects the hashes/nonces for your own bundled scripts and styles, so a strict policy doesn't break your app's legitimate code. You declare the policy; Tauri keeps your assets on the allowlist.

Start Strict, Open Only What You Need

Begin with the tightest policy that loads your app — default-src 'self' — then add exactly the sources you actually use: an API host under connect-src, a font CDN under font-src, the Tauri asset protocol under img-src if you load local files as images. Each directive you loosen is a door; open the specific ones your features need and no more. A strict CSP plus scoped capabilities is what 'secure Tauri app' concretely means.

Code

A starting CSP (tighten/loosen per your real sources)·json

// tauri.conf.json — a real CSP instead of null.
// Tauri injects nonces/hashes for YOUR bundled scripts automatically,
// so 'self' + your specific sources is enough.
{
  "app": {
    "security": {
      "csp": {
        "default-src": "'self'",
        "img-src": "'self' asset: data:",
        "connect-src": "'self' https://api.example.com",
        "style-src": "'self' 'unsafe-inline'",
        "font-src": "'self'"
      }
    }
  }
}

Exercise

Replace your app's csp: null with a real policy starting at default-src 'self'. Run the app and fix whatever breaks by adding the specific source it needs (e.g. an API host under connect-src). The exercise teaches the policy by making you account for every external resource your app actually loads.

Hint

Start strict, then read the browser console: each blocked resource tells you exactly which directive/source to add. If an API call fails, it's connect-src; a blocked image, img-src. Add the specific host, not a wildcard.