mcpField
C
configuring-tauri-http-headers

configuring-tauri-http-headers

github.com/dchukセキュリティ36147 回インストール40 週間前に更新
リポジトリ

configuring-tauri-http-headers について

Tauri v2.1.0以降の開発者向けに、HTTPレスポンスヘッダーの設定方法を解説するスキルです。設定可能なヘッダーと値の形式に加え、本番環境と開発サーバーで設定が異なる点を扱います。

主な機能

  1. 01tauri.conf.jsonでヘッダーを設定
  2. 02CORSとクロスオリジンポリシーを指定
  3. 03文字列、配列、オブジェクト形式の値に対応
  4. 04開発サーバーを別途設定

活用シーン

  1. 01COOPとCOEPでSharedArrayBufferを有効化
  2. 02本番環境のクロスオリジンリクエストを制限
  3. 03開発時にヘッダーが反映されない原因を調査

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dchuk/claude-code-tauri-skills --skill configuring-tauri-http-headers

インストール後、Claude Code で/configuring-tauri-http-headersを入力して読み込まれたか確認します。

詳細

Tauri HTTP ヘッダーのセキュリティ設定

このスキルでは、Tauri v2.1.0 以降における HTTP ヘッダーの設定について説明します。開発者は、webview のレスポンスにセキュリティヘッダーを設定できます。

概要

Tauri では、webview へのレスポンスに含める HTTP ヘッダーを設定できます。これらのヘッダーは本番ビルドに適用され、IPC メッセージやエラーレスポンスには影響しません。

サポートされているヘッダー（許可リスト）

Tauri では、セキュリティ上の理由から、ヘッダーの設定を特定の許可リストに制限しています。

CORS ヘッダー
  • Access-Control-Allow-Credentials
  • Access-Control-Allow-Headers
  • Access-Control-Allow-Methods
  • Access-Control-Expose-Headers
  • Access-Control-Max-Age
クロスオリジンポリシー
  • Cross-Origin-Embedder-Policy
  • Cross-Origin-Opener-Policy
  • Cross-Origin-Resource-Policy
セキュリティヘッダー
  • X-Content-Type-Options
  • Permissions-Policy
  • Timing-Allow-Origin
  • Service-Worker-Allowed
テスト専用
  • Tauri-Custom-Header（本番環境では使用しないでください）

tauri.conf.json での設定

ヘッダーは src-tauri/tauri.conf.json の app.security.headers で設定します。

値の形式
  1. 文字列：そのまま設定します
  2. 配列：各項目をカンマで結合します
  3. オブジェクト：「key value」の形式にし、セミコロンで結合します
  4. Null：ヘッダーは無視されます
基本的な設定例
{
  "app": {
    "security": {
      "headers": {
        "Cross-Origin-Opener-Policy": "same-origin",
        "Cross-Origin-Embedder-Policy": "require-corp",
        "X-Content-Type-Options": "nosniff"
      }
    }
  }
}
詳細な設定例
{
  "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"
    }
  }
}

SharedArrayBuffer の有効化

SharedArrayBuffer を使用するには、特定のクロスオリジンポリシーが必要です。次の両方のヘッダーを設定してください。

{
  "app": {
    "security": {
      "headers": {
        "Cross-Origin-Opener-Policy": "same-origin",
        "Cross-Origin-Embedder-Policy": "require-corp"
      }
    }
  }
}

CORS の設定例

制限的な CORS（本番環境に推奨）
{
  "app": {
    "security": {
      "headers": {
        "Cross-Origin-Resource-Policy": "same-origin",
        "Access-Control-Allow-Credentials": "false",
        "Access-Control-Allow-Methods": ["GET"],
        "Access-Control-Max-Age": "3600"
      }
    }
  }
}
許容的な CORS（開発／API のシナリオ）
{
  "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"
      }
    }
  }
}

開発サーバーの設定

開発用フレームワークでは、開発サーバーに個別のヘッダー設定が必要です。Tauri によるヘッダーの挿入は、本番ビルドにのみ適用されます。

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" }

セキュリティヘッダーのリファレンス

Cross-Origin-Opener-Policy（COOP）

ウィンドウのオープナーとの関係を制御します。

値説明
unsafe-noneデフォルト。オープナーからのアクセスを許可します
same-origin閲覧コンテキストを同一オリジンに分離します
same-origin-allow-popups同一オリジンに制限しますが、ポップアップは許可します
Cross-Origin-Embedder-Policy（COEP）

リソースの埋め込みを制御します。

値説明
unsafe-noneデフォルト。制限はありません
require-corpクロスオリジンのリソースに CORP または CORS を要求します
credentiallessクロスオリジンリクエストで認証情報を送信しません
Cross-Origin-Resource-Policy（CORP）

リソースの読み込みを許可する対象を制御します。

値説明
same-site同一サイトからのリクエストのみ許可します
same-origin同一オリジンからのリクエストのみ許可します
cross-originクロスオリジンリクエストを許可します
X-Content-Type-Options

MIME タイプのスニッフィングを防止します。

{
  "X-Content-Type-Options": "nosniff"
}
Permissions-Policy

ブラウザー機能へのアクセスを制御します。

{
  "Permissions-Policy": {
    "camera": "()",
    "microphone": "()",
    "geolocation": "(self)",
    "fullscreen": "(self)"
  }
}

ベストプラクティス

  1. 開発環境と本番環境の両方で設定する：一貫した動作にするため、フレームワークの開発サーバー設定と tauri.conf.json の両方でヘッダーを設定します。

  2. 制限的なデフォルトを使用する：制限的なポリシーから始め、必要に応じてのみ緩和します。

  3. COOP と COEP を同時に有効にする：SharedArrayBuffer をサポートするには、両方のヘッダーを設定する必要があります。

  4. CSP の設定を分ける：Content-Security-Policy はヘッダーセクションではなく、app.security.csp で設定します。

  5. 本番環境では Tauri-Custom-Header を使用しない：このヘッダーはテスト専用です。

  6. クロスオリジンのシナリオをテストする：API エンドポイントで CORS ヘッダーが正しく機能することを確認します。

トラブルシューティング

SharedArrayBuffer を利用できない

両方のヘッダーが設定されていることを確認してください。

{
  "Cross-Origin-Opener-Policy": "same-origin",
  "Cross-Origin-Embedder-Policy": "require-corp"
}
開発環境でヘッダーが適用されない

tauri.conf.json のヘッダーは本番ビルドにのみ適用されます。開発サーバーは別途設定してください。

外部 API での CORS エラー

クロスオリジンリクエストに必要なヘッダーを追加します。

{
  "Access-Control-Allow-Methods": ["GET", "POST", "OPTIONS"],
  "Access-Control-Allow-Headers": ["Content-Type", "Authorization"]
}
カスタムヘッダーが表示されない

次の方法でカスタムヘッダーを公開します。

{
  "Access-Control-Expose-Headers": ["X-Custom-Header", "X-Request-Id"]
}

バージョン要件

  • HTTP ヘッダーの設定には Tauri v2.1.0 以降が必要です
  • 以前のバージョンではヘッダー機能を利用できません

関連する設定

  • CSP：Content Security Policy は app.security.csp で設定します
  • Capabilities：Tauri のケイパビリティシステムを使用して、詳細な権限を設定します
  • IPC セキュリティ：ヘッダーは IPC メッセージの処理に影響しません

コメント

Markdown 対応