tauri-http-headers_skill

Overview

This skill guides developers through configuring HTTP header security for Tauri v2 applications, focusing on security headers, custom headers, and CORS for webview responses. It explains allowed headers, value formats, production vs. dev behavior, and practical examples to harden cross-origin handling.

How this skill works

It describes how Tauri injects configured headers into webview HTTP responses in production builds and which headers are allowlisted. The skill explains accepted value formats (string, array, object, null), where to place settings in src-tauri/tauri.conf.json, and how to mirror those headers in development servers like Vite, Next.js, or Angular.

When to use it

• When hardening a Tauri v2 production build with security and cross-origin policies
• When enabling SharedArrayBuffer or other features that require COOP and COEP
• When exposing or restricting APIs accessed by the webview (CORS configuration)
• When ensuring consistent header behavior across dev server and production builds
• When adding or testing custom response headers for the webview

Best practices

• Configure headers in both your framework's dev server and tauri.conf.json to avoid environment drift
• Start with restrictive defaults (same-origin, nosniff) and relax only as required by use cases
• Enable Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy together if you need SharedArrayBuffer
• Keep Content-Security-Policy under app.security.csp, not inside the headers map
• Avoid using the Tauri-Custom-Header in production; reserve it for testing

Example use cases

• Lock down a desktop app to same-origin resources with COOP, COEP, and nosniff for production
• Allow specific cross-origin API calls by configuring Access-Control-Allow-Methods and Access-Control-Allow-Headers
• Expose custom response headers to the webview with Access-Control-Expose-Headers
• Enable SharedArrayBuffer for WebAssembly code by setting COOP and COEP together
• Mirror production headers during development by adding equivalent server headers in Vite or Next.js