HTTP ヘッダー

Since 2.1.0

「設定」内で定義されたヘッダーは、Webview への応答とともに送信されます。これには「IPC（プロセス間通信）」メッセージと「エラー応答」は含まれません。より具体的に言えば、

crates/tauri/src/protocol/tauri.rs ↗

の get_response 関数を介して送信されるすべての応答に、このヘッダーが含まれます。

ヘッダーの設定方法

文字列で
文字列の配列で
オブジェクト／キー値で（値は文字列である必要があります）
null 値で

実際の応答では、ヘッダー値は常に文字列に変換されます。設定ファイルの内容によっては、ヘッダー値のいくつかを作成する必要があります。この複合値がどのように作成されるかに関するルールは次のとおりです：

string：　「文字列」の場合は、作成されたヘッダー値でも同一内容です。
Array：　「配列」の場合は、作成されたヘッダー値では、各項（要素）が , で連結されます。
key-value：　「キー値」では、各項目が「キー＋スペース＋値」から作成され、その後、作成されたヘッダー値では各項が ; で連結されます。
null：　「null 値」の場合、ヘッダーは無視されます。

設定例

{
 //...
  "app":{
    //...
    "security": {
      //...
      "headers": {
        "Cross-Origin-Opener-Policy": "same-origin",
        "Cross-Origin-Embedder-Policy": "require-corp",
        "Timing-Allow-Origin": [
          "https://developer.mozilla.org",
          "https://example.com",
        ],
        "X-Content-Type-Options": null, // gets ignored
        "Access-Control-Expose-Headers": "Tauri-Custom-Header",
        "Tauri-Custom-Header": {
          "key1": "'value1' 'value2'",
          "key2": "'value3'"
        }
      },
      // CSP がヘッダー項目内定義されていないことに注意してください。
      "csp": "default-src 'self'; connect-src ipc: http://ipc.localhost",
    }
  }
}

この事例では、Cross-Origin-Opener-Policy と Cross-Origin-Embedder-Policy が、SharedArrayBuffer ↗ の使用を許可するように設定されています。 Timing-Allow-Origin は、リストに記載された Web サイトから読み込まれたスクリプトが、Resource Timing API（リソースタイミング） ↗ を介して詳細なネットワーク・タイミング・データにアクセスすることを許可します。

「helloworld」の例では、設定は次のようになります：

access-control-allow-origin:  http://tauri.localhost
access-control-expose-headers: Tauri-Custom-Header
content-security-policy: default-src 'self'; connect-src ipc: http://ipc.localhost; script-src 'self' 'sha256-Wjjrs6qinmnr+tOry8x8PPwI77eGpUFR3EEGZktjJNs='
content-type: text/html
cross-origin-embedder-policy: require-corp
cross-origin-opener-policy: same-origin
tauri-custom-header: key1 'value1' 'value2'; key2 'value3'
timing-allow-origin: https://developer.mozilla.org, https://example.com

フレームワーク

一部の開発環境では、運用環境をエミュレートするための追加設定が必要です。

JavaScript/TypeScript

ビルド・ツール「Vite（ヴィート）」（Qwik、React、Solid、Svelte、Vue も含む）を実行するセットアップ・ツールには、必要なヘッダーを vite.config.ts に追加します。

import { defineConfig } from 'vite';

export default defineConfig({
  // ...
  server: {
    // ...
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Timing-Allow-Origin':
        'https://developer.mozilla.org, https://example.com',
      'Access-Control-Expose-Headers': 'Tauri-Custom-Header',
      'Tauri-Custom-Header': "key1 'value1' 'value2'; key2 'value3'",
    },
  },
});

場合によっては、vite.config.ts がフレームワーク設定ファイルに統合されているときがありますが、セットアップの内容は同じです。フロントエンド・フレームワークが Angular の場合は、必要なヘッダーを angular.json に追加します。

{
  //...
  "projects": {
    //...
    "insert-project-name": {
      //...
      "architect": {
        //...
        "serve": {
          //...
          "options": {
            //...
            "headers": {
              "Cross-Origin-Opener-Policy": "same-origin",
              "Cross-Origin-Embedder-Policy": "require-corp",
              "Timing-Allow-Origin": "https://developer.mozilla.org, https://example.com",
              "Access-Control-Expose-Headers": "Tauri-Custom-Header",
              "Tauri-Custom-Header": "key1 'value1' 'value2'; key2 'value3'"
            }
          }
        }
      }
    }
  }
}

同様に、Nuxt の場合は nuxt.config.ts に追記します。

export default defineNuxtConfig({
  //...
  vite: {
    //...
    server: {
      //...
      headers: {
        'Cross-Origin-Opener-Policy': 'same-origin',
        'Cross-Origin-Embedder-Policy': 'require-corp',
        'Timing-Allow-Origin':
          'https://developer.mozilla.org, https://example.com',
        'Access-Control-Expose-Headers': 'Tauri-Custom-Header',
        'Tauri-Custom-Header': "key1 'value1' 'value2'; key2 'value3'",
      },
    },
  },
});

Next.js は Vite を利用しないため、アプローチが異なります。詳しくはこちら ↗ （英語版）をご覧ください。ヘッダーは 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',
          },
          {
            key: 'Timing-Allow-Origin',
            value: 'https://developer.mozilla.org, https://example.com',
          },
          {
            key: 'Access-Control-Expose-Headers',
            value: 'Tauri-Custom-Header',
          },
          {
            key: 'Tauri-Custom-Header',
            value: "key1 'value1' 'value2'; key2 'value3'",
          },
        ],
      },
    ];
  },
};

Rust

Yew と Leptos では、ヘッダーを Trunk.toml に追記してください：

#...
[serve]
#...
headers = {
  "Cross-Origin-Opener-Policy" = "same-origin",
  "Cross-Origin-Embedder-Policy" = "require-corp",
  "Timing-Allow-Origin" = "https://developer.mozilla.org, https://example.com",
  "Access-Control-Expose-Headers" = "Tauri-Custom-Header",
  "Tauri-Custom-Header" = "key1 'value1' 'value2'; key2 'value3'"
}

【※ この日本語版は、「Mar 12, 2025 英語版」に基づいています】

Support on Open Collective Sponsor on GitHub