configuring-tauri-csp

Tauri のコンテンツセキュリティポリシー（CSP）設定

このスキルでは、Tauri v2 デスクトップアプリケーションのコンテンツセキュリティポリシー設定について説明します。

Tauri で CSP が重要な理由

CSP は、Tauri アプリケーションで一般的なウェブの脆弱性を軽減するセキュリティ機構です。

1. XSS の防止：実行可能なスクリプトを制限し、悪意のあるコードの挿入をブロックします
2. リソースの制御：WebView がアセット（スクリプト、スタイル、画像、フォント）を読み込める場所を制限します
3. 信頼境界：フロントエンドの WebView とバックエンドの Rust コード間の分離を強化します
4. 攻撃対象領域の縮小：許可されていないネットワーク接続やリソースの読み込みを防ぎます

Tauri は、明確に定義された IPC レイヤーを通じて、フロントエンドコードがシステムリソースに限定的にアクセスする信頼境界モデルを採用しています。CSP は、フロントエンドの信頼ゾーン内に追加の保護レイヤーを設けます。

Tauri による CSP の実装方法

Tauri は、2 つの保護戦略を組み合わせています。

1. ローカルスクリプト：コンパイル時に暗号学的ハッシュで保護します
2. スタイルと外部スクリプト：ノンスを使用して検証します

Tauri は、コンパイル中にバンドルされたコードへノンスとハッシュを自動的に追加します。開発者が設定する必要があるのは、アプリケーション固有の信頼できるソースのみです。

重要：CSP による保護は、Tauri の設定ファイルで明示的に設定した場合にのみ有効になります。

デフォルトの CSP の動作

デフォルトでは、Tauri は CSP を適用しません。tauri.conf.json の security セクションで明示的に設定する必要があります。

{
  "security": {
    "csp": null
  }
}

csp が null または省略されている場合、コンテンツセキュリティポリシーは適用されません。

基本的な CSP 設定

最小限の安全な設定

{
  "security": {
    "csp": {
      "default-src": "'self'"
    }
  }
}

これにより、すべてのリソースが同一オリジンのみに制限されます。

推奨設定

{
  "security": {
    "csp": {
      "default-src": "'self' customprotocol: asset:",
      "connect-src": "ipc: http://ipc.localhost",
      "font-src": ["https://fonts.gstatic.com"],
      "img-src": "'self' asset: http://asset.localhost blob: data:",
      "style-src": "'unsafe-inline' 'self' https://fonts.googleapis.com"
    }
  }
}

Tauri でよく使われる CSP ディレクティブ

default-src

明示的に定義されていないすべてのリソースタイプに適用されるフォールバックポリシーです。

"default-src": "'self' customprotocol: asset:"

一般的な値：

• 'self' - 同一オリジンのみ
• 'none' - すべてのリソースをブロック
• customprotocol: - Tauri のカスタムプロトコル
• asset: - Tauri のアセットプロトコル

script-src

実行可能なスクリプトを制御します。

"script-src": "'self'"

WebAssembly または Rust ベースのフロントエンド（Leptos、Yew、Dioxus）の場合：

"script-src": "'self' 'wasm-unsafe-eval'"

警告：絶対に必要な場合を除き、'unsafe-eval' は使用しないでください。

style-src

スタイルシートのソースを制御します。

"style-src": "'self' 'unsafe-inline' https://fonts.googleapis.com"

注：CSS-in-JS ライブラリでは 'unsafe-inline' が必要な場合がよくありますが、セキュリティは低下します。

connect-src

fetch、WebSocket などで許可される接続先を制御します。

"connect-src": "ipc: http://ipc.localhost https://api.example.com"

Tauri 固有の値：

• ipc: - Rust バックエンドとのプロセス間通信
• http://ipc.localhost - 代替の IPC エンドポイント

img-src

画像の読み込み元を制御します。

"img-src": "'self' asset: http://asset.localhost blob: data:"

一般的な値：

• blob: - Blob URL（動的に作成された画像用）
• data: - Data URL（Base64 エンコードされた画像用）
• asset: - Tauri のアセットプロトコル

font-src

フォントの読み込み元を制御します。

"font-src": "'self' https://fonts.gstatic.com"

frame-src

iframe のソースを制御します。

"frame-src": "'none'"

特に必要な場合を除き、すべてのフレームをブロックすることを推奨します。

object-src

プラグインコンテンツ（Flash、Java など）を制御します。

"object-src": "'none'"

最新のアプリケーションでは、常に 'none' に設定してください。

設定形式のオプション

オブジェクト形式（推奨）

{
  "security": {
    "csp": {
      "default-src": "'self'",
      "script-src": "'self' 'wasm-unsafe-eval'",
      "style-src": "'self' 'unsafe-inline'"
    }
  }
}

複数のソースを指定する配列形式

{
  "security": {
    "csp": {
      "font-src": ["'self'", "https://fonts.gstatic.com", "https://fonts.googleapis.com"]
    }
  }
}

文字列形式

{
  "security": {
    "csp": "default-src 'self'; script-src 'self'"
  }
}

フレームワーク別の設定

React/Vue/Svelte（標準的な JS フレームワーク）

{
  "security": {
    "csp": {
      "default-src": "'self'",
      "script-src": "'self'",
      "style-src": "'self' 'unsafe-inline'",
      "img-src": "'self' data: blob:",
      "font-src": "'self'",
      "connect-src": "ipc: http://ipc.localhost"
    }
  }
}

Leptos/Yew/Dioxus（Rust/WASM フレームワーク）

{
  "security": {
    "csp": {
      "default-src": "'self'",
      "script-src": "'self' 'wasm-unsafe-eval'",
      "style-src": "'self' 'unsafe-inline'",
      "img-src": "'self' data: blob:",
      "font-src": "'self'",
      "connect-src": "ipc: http://ipc.localhost"
    }
  }
}

外部 API を使用する場合

{
  "security": {
    "csp": {
      "default-src": "'self'",
      "script-src": "'self'",
      "connect-src": "ipc: http://ipc.localhost https://api.example.com wss://ws.example.com",
      "img-src": "'self' https://cdn.example.com"
    }
  }
}

セキュリティのベストプラクティス

1. リモートスクリプトを避ける

本番環境では、CDN からスクリプトを読み込まないでください。

// AVOID - introduces attack vector
"script-src": "'self' https://cdn.jsdelivr.net"

// PREFERRED - bundle all dependencies
"script-src": "'self'"

2. unsafe-inline を最小限にする

フレームワークで必要な場合にのみ 'unsafe-inline' を使用してください。

// More secure
"style-src": "'self'"

// Less secure but sometimes necessary
"style-src": "'self' 'unsafe-inline'"

3. 制限の厳しいデフォルト設定を使用する

まず制限を厳しく設定し、必要に応じて許可を追加してください。

{
  "security": {
    "csp": {
      "default-src": "'none'",
      "script-src": "'self'",
      "style-src": "'self'",
      "img-src": "'self'",
      "font-src": "'self'",
      "connect-src": "ipc: http://ipc.localhost"
    }
  }
}

4. 危険な機能をブロックする

使用していない危険な機能は、常にブロックしてください。

{
  "security": {
    "csp": {
      "object-src": "'none'",
      "base-uri": "'self'",
      "form-action": "'self'"
    }
  }
}

高度な設定

CSP の変更を無効にする

CSP を完全に制御する必要がある場合（推奨されません）：

{
  "security": {
    "csp": {
      "default-src": "'self'"
    },
    "dangerousDisableAssetCspModification": true
  }
}

警告：これにより、Tauri による nonce とハッシュの自動挿入が無効になります。

プロトタイプの凍結

JavaScript のプロトタイプを凍結して、XSS 保護をさらに強化します：

{
  "security": {
    "csp": {
      "default-src": "'self'"
    },
    "freezePrototype": true
  }
}

トラブルシューティング

CSP によってリソースがブロックされる

ブラウザーの DevTools コンソールで、CSP 違反メッセージを確認してください。どのディレクティブがリソースをブロックしているかが示されます。

エラーの例：

Refused to load the script 'https://example.com/script.js' because it violates the following Content Security Policy directive: "script-src 'self'"

解決策：該当するディレクティブにドメインを追加します：

"script-src": "'self' https://example.com"

WebAssembly が読み込まれない

script-src に 'wasm-unsafe-eval' を追加します：

"script-src": "'self' 'wasm-unsafe-eval'"

インラインスタイルが機能しない

CSS-in-JS ライブラリの場合は、style-src に 'unsafe-inline' を追加します：

"style-src": "'self' 'unsafe-inline'"

IPC が機能しない

connect-src に Tauri IPC エンドポイントが含まれていることを確認します：

"connect-src": "ipc: http://ipc.localhost"

設定の完全な例

{
  "productName": "my-tauri-app",
  "version": "1.0.0",
  "security": {
    "csp": {
      "default-src": "'self' customprotocol: asset:",
      "script-src": "'self'",
      "style-src": "'self' 'unsafe-inline'",
      "img-src": "'self' asset: http://asset.localhost blob: data:",
      "font-src": "'self'",
      "connect-src": "ipc: http://ipc.localhost",
      "object-src": "'none'",
      "base-uri": "'self'",
      "form-action": "'self'",
      "frame-ancestors": "'none'"
    },
    "freezePrototype": true
  }
}

参考資料

• Tauri CSP のドキュメント
• Tauri セキュリティの概要
• Tauri SecurityConfig リファレンス