Skip to main content
configuring-tauri-http-headers Configure HTTP response headers in Tauri v2.1+ webview responses, covering security headers, custom headers, and CORS from the allowlist. USE WHEN adding security headers, setting CORS for cross-origin requests, or customizing webview response headers.
설치로 이동 Skills Marketplace 커뮤니티가 만든 AI 스킬을 발견하고 탐색하세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/Sheshiyer/skill-clusters --skill configuring-tauri-http-headers명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Zip 다운로드 다운로드 중... name configuring-tauri-http-headers description Configure HTTP response headers in Tauri v2.1+ webview responses, covering security headers, custom headers, and CORS from the allowlist. USE WHEN adding security headers, setting CORS for cross-origin requests, or customizing webview response headers. cluster tauri version 1.0.0
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-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 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 