Tauri Content Security Policy (CSP) Configuration

This skill covers Content Security Policy configuration for Tauri v2 desktop applications.

Why CSP Matters in Tauri

CSP is a security mechanism that mitigates common web vulnerabilities in Tauri applications:

• XSS Prevention: Restricts which scripts can execute, blocking injected malicious code

• Resource Control: Limits where the WebView can load assets from (scripts, styles, images, fonts)

• Trust Boundaries: Strengthens the isolation between frontend WebView and backend Rust code

• Attack Surface Reduction: Prevents unauthorized network connections and resource loading

Tauri operates on a trust boundary model where frontend code has limited access to system resources through a well-defined IPC layer. CSP adds an additional layer of protection within the frontend trust zone.

How Tauri Implements CSP

Tauri uses a two-part protection strategy:

• Local Scripts: Protected through cryptographic hashing at compile time

• Styles and External Scripts: Verified using nonces

Tauri automatically appends nonces and hashes to bundled code during compilation. Developers only need to configure application-specific trusted sources.

Important: CSP protection only activates when explicitly configured in the Tauri configuration file.

Default CSP Behavior

By default, Tauri does not apply a CSP. You must explicitly configure it in tauri.conf.json under the security section:

{ "security": { "csp": null } }

When csp is null or omitted, no Content Security Policy is enforced.

Basic CSP Configuration

Minimal Secure Configuration

{ "security": { "csp": { "default-src": "'self'" } } }

This restricts all resources to the same origin only.

Recommended Configuration

{ "security": { "csp": { "default-src": "'self' customprotocol: asset:", "connect-src": "ipc: http://ipc.localhost", "font-src": ["https://fonts.gstatic.com"], "img-src": "'self' asset: http://asset.localhost blob: data:", "style-src": "'unsafe-inline' 'self' https://fonts.googleapis.com" } } }

Common CSP Directives for Tauri

default-src

Fallback policy for all resource types not explicitly defined.

"default-src": "'self' customprotocol: asset:"

Common values:

• 'self'

• Same origin only

• 'none'

• Block all resources

• customprotocol:

• Tauri custom protocol

• asset:

• Tauri asset protocol

script-src

Controls which scripts can execute.

"script-src": "'self'"

For WebAssembly or Rust-based frontends (Leptos, Yew, Dioxus):

"script-src": "'self' 'wasm-unsafe-eval'"

Warning: Never use 'unsafe-eval' unless absolutely required.

style-src

Controls stylesheet sources.

"style-src": "'self' 'unsafe-inline' https://fonts.googleapis.com"

Note: 'unsafe-inline' is often needed for CSS-in-JS libraries but reduces security.

connect-src

Controls allowed connection destinations for fetch, WebSocket, etc.

"connect-src": "ipc: http://ipc.localhost https://api.example.com"

Tauri-specific:

• ipc:

• Inter-process communication with Rust backend

• http://ipc.localhost

• Alternative IPC endpoint

img-src

Controls image loading sources.

"img-src": "'self' asset: http://asset.localhost blob: data:"

Common values:

• blob:

• Blob URLs (for dynamically created images)

• data:

• Data URLs (base64 encoded images)

• asset:

• Tauri asset protocol

font-src

Controls font loading sources.

"font-src": "'self' https://fonts.gstatic.com"

frame-src

Controls iframe sources.

"frame-src": "'none'"

Recommended to block all frames unless specifically needed.

object-src

Controls plugin content (Flash, Java, etc.).

"object-src": "'none'"

Always set to 'none' for modern applications.

Configuration Format Options

Object Format (Recommended)

{ "security": { "csp": { "default-src": "'self'", "script-src": "'self' 'wasm-unsafe-eval'", "style-src": "'self' 'unsafe-inline'" } } }

Array Format for Multiple Sources

{ "security": { "csp": { "font-src": ["'self'", "https://fonts.gstatic.com", "https://fonts.googleapis.com"] } } }

String Format

{ "security": { "csp": "default-src 'self'; script-src 'self'" } }

Framework-Specific Configurations

React/Vue/Svelte (Standard JS Frameworks)

{ "security": { "csp": { "default-src": "'self'", "script-src": "'self'", "style-src": "'self' 'unsafe-inline'", "img-src": "'self' data: blob:", "font-src": "'self'", "connect-src": "ipc: http://ipc.localhost" } } }

Leptos/Yew/Dioxus (Rust/WASM Frameworks)

{ "security": { "csp": { "default-src": "'self'", "script-src": "'self' 'wasm-unsafe-eval'", "style-src": "'self' 'unsafe-inline'", "img-src": "'self' data: blob:", "font-src": "'self'", "connect-src": "ipc: http://ipc.localhost" } } }

With External APIs

{ "security": { "csp": { "default-src": "'self'", "script-src": "'self'", "connect-src": "ipc: http://ipc.localhost https://api.example.com wss://ws.example.com", "img-src": "'self' https://cdn.example.com" } } }

Security Best Practices

1. Avoid Remote Scripts

Never load scripts from CDNs in production:

// AVOID - introduces attack vector "script-src": "'self' https://cdn.jsdelivr.net"

// PREFERRED - bundle all dependencies "script-src": "'self'"

2. Minimize unsafe-inline

Only use 'unsafe-inline' when required by your framework:

// More secure "style-src": "'self'"

// Less secure but sometimes necessary "style-src": "'self' 'unsafe-inline'"

3. Use Restrictive Defaults

Start restrictive and add permissions as needed:

{ "security": { "csp": { "default-src": "'none'", "script-src": "'self'", "style-src": "'self'", "img-src": "'self'", "font-src": "'self'", "connect-src": "ipc: http://ipc.localhost" } } }

4. Block Dangerous Features

Always block unused dangerous features:

{ "security": { "csp": { "object-src": "'none'", "base-uri": "'self'", "form-action": "'self'" } } }

Advanced Configuration

Disabling CSP Modifications

If you need full control over CSP (not recommended):

{ "security": { "csp": { "default-src": "'self'" }, "dangerousDisableAssetCspModification": true } }

Warning: This disables Tauri's automatic nonce and hash injection.

Freeze Prototype

Additional XSS protection by freezing JavaScript prototypes:

{ "security": { "csp": { "default-src": "'self'" }, "freezePrototype": true } }

Troubleshooting

Resources Blocked by CSP

Check browser DevTools console for CSP violation messages. They indicate which directive is blocking the resource.

Example error:

Refused to load the script 'https://example.com/script.js' because it violates the following Content Security Policy directive: "script-src 'self'"

Solution: Add the domain to the appropriate directive:

"script-src": "'self' https://example.com"

WebAssembly Not Loading

Add 'wasm-unsafe-eval' to script-src:

"script-src": "'self' 'wasm-unsafe-eval'"

Inline Styles Not Working

For CSS-in-JS libraries, add 'unsafe-inline' to style-src:

"style-src": "'self' 'unsafe-inline'"

IPC Not Working

Ensure connect-src includes Tauri IPC endpoints:

"connect-src": "ipc: http://ipc.localhost"

Complete Example Configuration

{ "productName": "my-tauri-app", "version": "1.0.0", "security": { "csp": { "default-src": "'self' customprotocol: asset:", "script-src": "'self'", "style-src": "'self' 'unsafe-inline'", "img-src": "'self' asset: http://asset.localhost blob: data:", "font-src": "'self'", "connect-src": "ipc: http://ipc.localhost", "object-src": "'none'", "base-uri": "'self'", "form-action": "'self'", "frame-ancestors": "'none'" }, "freezePrototype": true } }

References

• Tauri CSP Documentation

• Tauri Security Overview

• Tauri SecurityConfig Reference