Sheshiyer 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 resourcescustomprotocol:- Tauri custom protocolasset:- 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 backendhttp://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
}
}