Tauri HTTP Headers Security Configuration
This skill covers HTTP headers configuration in Tauri v2.1.0+, enabling developers to set security headers in webview responses.
Overview
Tauri allows configuring HTTP headers that are included in responses to the webview. These headers apply to production builds and do not affect IPC messages or error responses.
Supported Headers (Allowlist)
Tauri restricts header configuration to a specific allowlist for security:
CORS Headers Access-Control-Allow-Credentials Access-Control-Allow-Headers Access-Control-Allow-Methods Access-Control-Expose-Headers Access-Control-Max-Age Cross-Origin Policies Cross-Origin-Embedder-Policy Cross-Origin-Opener-Policy Cross-Origin-Resource-Policy Security Headers X-Content-Type-Options Permissions-Policy Timing-Allow-Origin Service-Worker-Allowed Testing Only Tauri-Custom-Header (not for production use) Configuration in tauri.conf.json
Headers are configured under app.security.headers in src-tauri/tauri.conf.json.
Value Formats String: Direct assignment Array: Items joined by commas Object: Key-value pairs formatted as "key value", joined by semicolons Null: Header is ignored Basic Configuration Example { "app": { "security": { "headers": { "Cross-Origin-Opener-Policy": "same-origin", "Cross-Origin-Embedder-Policy": "require-corp", "X-Content-Type-Options": "nosniff" } } } }
Comprehensive Configuration Example { "app": { "security": { "headers": { "Cross-Origin-Opener-Policy": "same-origin", "Cross-Origin-Embedder-Policy": "require-corp", "Cross-Origin-Resource-Policy": "same-origin", "Timing-Allow-Origin": [ "https://example.com", "https://api.example.com" ], "X-Content-Type-Options": "nosniff", "Permissions-Policy": { "camera": "()", "microphone": "()", "geolocation": "(self)" }, "Access-Control-Allow-Methods": ["GET", "POST", "PUT", "DELETE"], "Access-Control-Allow-Headers": ["Content-Type", "Authorization"], "Access-Control-Max-Age": "86400" }, "csp": "default-src 'self'; connect-src ipc: http://ipc.localhost" } } }
Enabling SharedArrayBuffer
SharedArrayBuffer requires specific cross-origin policies. Configure both headers together:
{ "app": { "security": { "headers": { "Cross-Origin-Opener-Policy": "same-origin", "Cross-Origin-Embedder-Policy": "require-corp" } } } }
CORS Configuration Examples Restrictive CORS (Recommended for Production) { "app": { "security": { "headers": { "Cross-Origin-Resource-Policy": "same-origin", "Access-Control-Allow-Credentials": "false", "Access-Control-Allow-Methods": ["GET"], "Access-Control-Max-Age": "3600" } } } }
Permissive CORS (Development/API Scenarios) { "app": { "security": { "headers": { "Cross-Origin-Resource-Policy": "cross-origin", "Access-Control-Allow-Methods": ["GET", "POST", "PUT", "DELETE", "OPTIONS"], "Access-Control-Allow-Headers": ["Content-Type", "Authorization", "X-Requested-With"], "Access-Control-Expose-Headers": ["Content-Length", "X-Request-Id"], "Access-Control-Max-Age": "86400" } } } }
Development Server Configuration
Development frameworks require separate header configuration for their dev servers. Tauri header injection only applies to production builds.
Vite (React, Vue, Svelte, Solid, Qwik) // vite.config.ts import { defineConfig } from 'vite';
export default defineConfig({ server: { headers: { 'Cross-Origin-Opener-Policy': 'same-origin', 'Cross-Origin-Embedder-Policy': 'require-corp', 'X-Content-Type-Options': 'nosniff' } } });
Angular // angular.json { "projects": { "your-app": { "architect": { "serve": { "options": { "headers": { "Cross-Origin-Opener-Policy": "same-origin", "Cross-Origin-Embedder-Policy": "require-corp" } } } } } } }
Nuxt // nuxt.config.ts export default defineNuxtConfig({ vite: { server: { headers: { 'Cross-Origin-Opener-Policy': 'same-origin', 'Cross-Origin-Embedder-Policy': 'require-corp' } } } });
Next.js // next.config.js module.exports = { async headers() { return [ { source: '/(.*)', headers: [ { key: 'Cross-Origin-Opener-Policy', value: 'same-origin' }, { key: 'Cross-Origin-Embedder-Policy', value: 'require-corp' } ] } ]; } };
Trunk (Yew, Leptos)
Trunk.toml
[ serve ] headers = { "Cross-Origin-Opener-Policy" = "same-origin", "Cross-Origin-Embedder-Policy" = "require-corp" }
Security Headers Reference Cross-Origin-Opener-Policy (COOP)
Controls window opener relationships:
Value Description unsafe-none Default, allows opener access same-origin Isolates browsing context to same-origin same-origin-allow-popups Same-origin but allows popups Cross-Origin-Embedder-Policy (COEP)
Controls resource embedding:
Value Description unsafe-none Default, no restrictions require-corp Requires CORP or CORS for cross-origin resources credentialless Cross-origin requests without credentials Cross-Origin-Resource-Policy (CORP)
Controls who can load your resources:
Value Description same-site Only same-site requests same-origin Only same-origin requests cross-origin Allows cross-origin requests X-Content-Type-Options
Prevents MIME type sniffing:
{ "X-Content-Type-Options": "nosniff" }
Permissions-Policy
Controls browser feature access:
{ "Permissions-Policy": { "camera": "()", "microphone": "()", "geolocation": "(self)", "fullscreen": "(self)" } }
Best Practices
Configure Both Dev and Prod: Set headers in both your framework's dev server config and tauri.conf.json for consistent behavior.
Use Restrictive Defaults: Start with restrictive policies and loosen only as needed.
Enable COOP/COEP Together: For SharedArrayBuffer support, both headers must be configured.
Separate CSP Configuration: Content-Security-Policy is configured under app.security.csp, not in the headers section.
Avoid Tauri-Custom-Header in Production: This header is for testing purposes only.
Test Cross-Origin Scenarios: Verify that CORS headers work correctly with your API endpoints.
Troubleshooting SharedArrayBuffer Not Available
Ensure both headers are set:
{ "Cross-Origin-Opener-Policy": "same-origin", "Cross-Origin-Embedder-Policy": "require-corp" }
Headers Not Applied in Development
Headers in tauri.conf.json only apply to production builds. Configure your dev server separately.
CORS Errors with External APIs
Add required headers for cross-origin requests:
{ "Access-Control-Allow-Methods": ["GET", "POST", "OPTIONS"], "Access-Control-Allow-Headers": ["Content-Type", "Authorization"] }
Custom Headers Not Visible
Expose custom headers via:
{ "Access-Control-Expose-Headers": ["X-Custom-Header", "X-Request-Id"] }
Version Requirements Tauri v2.1.0 or later required for HTTP headers configuration Headers feature is not available in earlier versions Related Configuration CSP: Configure under app.security.csp for Content Security Policy Capabilities: Use Tauri's capability system for fine-grained permissions IPC Security: Headers do not affect IPC message handling