Skip to main content
configuring-tauri-http-headers Guides developers through configuring HTTP headers security in Tauri v2 applications, covering security headers, custom headers, and CORS configuration for secure cross-origin resource handling.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/dchuk/claude-code-tauri-skills --skill configuring-tauri-http-headersThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... Related occupations SOC
Based on SOC occupation classification
More from this repository name configuring-tauri-http-headers description Guides developers through configuring HTTP headers security in Tauri v2 applications, covering security headers, custom headers, and CORS configuration for secure cross-origin resource handling.
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-CredentialsAccess-Control-Allow-HeadersAccess-Control-Allow-MethodsAccess-Control-Expose-HeadersAccess-Control-Max-Age
Cross-Origin Policies
Cross-Origin-Embedder-PolicyCross-Origin-Opener-PolicyCross-Origin-Resource-Policy
Security Headers
X-Content-Type-OptionsPermissions-PolicyTiming-Allow-OriginService-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 assignmentArray : Items joined by commasObject : Key-value pairs formatted as "key value", joined by semicolonsNull : 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)
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
{
"projects" : {
"your-app" : {
"architect" : {
"serve" : {
"options" : {
"headers" : {
"Cross-Origin-Opener-Policy" : "same-origin" ,
"Cross-Origin-Embedder-Policy" : "require-corp"
}
}
}
}
}
}
}
Nuxt
export default defineNuxtConfig ({
vite : {
server : {
headers : {
'Cross-Origin-Opener-Policy' : 'same-origin' ,
'Cross-Origin-Embedder-Policy' : 'require-corp'
}
}
}
});
Next.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)
[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-noneDefault, allows opener access same-originIsolates browsing context to same-origin same-origin-allow-popupsSame-origin but allows popups
Cross-Origin-Embedder-Policy (COEP) Controls resource embedding:
Value Description unsafe-noneDefault, no restrictions require-corpRequires CORP or CORS for cross-origin resources credentiallessCross-origin requests without credentials
Cross-Origin-Resource-Policy (CORP) Controls who can load your resources:
Value Description same-siteOnly same-site requests same-originOnly same-origin requests cross-originAllows 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 PolicyCapabilities : Use Tauri's capability system for fine-grained permissionsIPC Security : Headers do not affect IPC message handling 