mcpField
F
flutter-webview

flutter-webview

github.com/thienqo開発1774 回インストール4 日前に更新
リポジトリ

flutter-webview について

WebView を安全に組み込むための Flutter 開発スキルです。既存パッケージを踏まえ、ナビゲーション、JavaScript ブリッジ、セッション、ライフサイクル、プラットフォーム検証を扱います。

主な機能

  1. 01パッケージとプラットフォーム制約の確認
  2. 02URI に基づくナビゲーション制御
  3. 03JavaScript ブリッジ権限の最小化
  4. 04Cookie とセッション管理
  5. 05対応ランタイムでの動作検証

活用シーン

  1. 01既存の Flutter WebView 統合の評価
  2. 02信頼できるオリジンへのナビゲーション制限
  3. 03アカウント切り替えとログアウトへの対応
  4. 04WebView の実機テスト計画

インストール

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

$npx skills add https://github.com/thienqo/flutter-skills --skill flutter-webview

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
javascript-bridges-and-permissions.md
navigation-and-content-policy.md
sessions-files-and-lifecycle.md

詳細

Flutter WebView

WebView は、特権を持つアプリケーションプロセス内に埋め込まれた、信頼できない Web ランタイムとして扱ってください。移行が求められていない限り、プロジェクトで現在使用している WebView パッケージ、Web コントラクト、ルーター、セッションの所有者、およびサポート対象プラットフォームを維持してください。

このスキルが選択されたという理由だけで、WebView パッケージ、ネイティブマニフェストの変更、ドメインやリダイレクトの登録を追加しないでください。

事前確認

pubspec.yaml、SDK の制約、選択されている WebView パッケージとバージョン、プラットフォームのターゲット、プラットフォームのマニフェストとエンタイトルメント、読み込まれるオリジンとリダイレクト、JavaScript の設定とチャネル、Cookie と Web サイトデータ、認証の所有者、ファイルと権限のフロー、アプリのナビゲーション、ライフサイクル処理、テストを確認してください。クロスプラットフォームでの動作を約束する前に、パッケージが現在サポートしているプラットフォームを確認してください。Flutter Web の埋め込み Web コンテンツでは、Android、iOS、macOS のシステム WebView とは異なるプリミティブや制約が適用される場合があります。

必要な忠実度とアクセシビリティを実現できる場合は、アプリが所有する操作にはネイティブの Flutter UI を優先してください。具体的なコンテンツ要件または統合要件がある場合に限り、埋め込みブラウザーを使用してください。デフォルトで既存のパッケージを webview_flutter や別の依存関係に置き換えないでください。

必要に応じてリファレンスを読み込む

  • オリジンの許可リスト、スキーム、ポップアップ、ダウンロード、エラー、外部リンク、TLS、ブラウザー履歴については、ナビゲーションとコンテンツポリシーを読んでください。
  • メッセージスキーマ、オリジンの信頼性、特権操作、ダイアログ、メディア、カメラまたはマイクのリクエスト、JavaScript の最小限の有効化については、JavaScript ブリッジと権限を読んでください。
  • Cookie、アカウント切り替え、ログアウト時のクリーンアップ、ファイル選択とダウンロードの動作、コントローラーの所有権、プロセスの再作成、プラットフォームの検証については、セッション、ファイル、ライフサイクルを読んでください。

基本ルール

  • すべてのナビゲーションを URI として解析し、明示的なスキーム、正規化されたホスト、ポート、パスのルールに基づいて判断してください。文字列のプレフィックスはオリジンの検証にはなりません。
  • コンテンツの契約上必要でない限り、JavaScript は無効のままにしてください。型付きメッセージの公開範囲は最小限にとどめ、アプリの状態を変更したりネイティブ機能を呼び出したりする前に、Dart でペイロードを必ず再検証してください。
  • ページタイトル、URL フラグメント、JavaScript メッセージ、一致するカスタムスキームを、本人確認、支払い、認可、または信頼できる完了の証明として扱わないでください。機密性の高い結果は、その所有者であるバックエンドまたはプラットフォームプロトコルを通じて確認してください。
  • どの Cookie と Web サイトデータを共有、永続化、分離、または消去するかを定義してください。ログアウトとアカウント切り替えを、アプリケーションのセッション所有者と連携させてください。
  • 選択したパッケージで処理できる範囲において、メインフレームの読み込み、HTTP、TLS、レンダラー、権限、ポップアップ、ファイル、ダウンロード、外部アプリの結果を明示的に処理してください。証明書エラーを回避しないでください。
  • コントローラーとコールバックの所有権がライフサイクル上安全であるようにしてください。破棄済みの画面、古くなったナビゲーション、または以前のアカウントからのコールバックによって、現在の状態が変更されないようにしてください。

境界

  • flutter-authentication は OAuth または OIDC、PKCE、検証済みリダイレクト、トークンのライフサイクル、ログアウトのセマンティクス、アカウント切り替えを担当します。ネイティブアプリの認可には、埋め込み WebView ではなく外部ユーザーエージェントを使用します。
  • flutter-navigation は、埋め込みページの外部における Flutter のルート、ディープリンクの遷移先、ブラウザー URL の同期、バックスタックの整合性を担当します。
  • flutter-security は脅威モデリングとリポジトリ全体の WebView 強化監査を担当します。このスキルは、対象を限定したコンテンツ、ブリッジ、ライフサイクルの契約を実装します。
  • flutter-networking は通常の API 通信を担当します。WebView が存在するという理由だけで、アプリの API 処理を JavaScript 経由にしないでください。
  • flutter-platform-integration は、既存のプラグインでは必要な API を満たせない場合の、カスタムネイティブ WebView 機能やプラットフォームビューのブリッジを担当します。
  • flutter-device-testing は実機およびエミュレーターでの具体的な実行を担当します。このスキルは、観測が必要な WebView の動作を定義します。

検証

テスト用に制御された決定論的なローカルまたはステージングコンテンツと、システム WebView の動作を確認するための、実際にサポートされているプラットフォームランタイムを使用します。必要に応じて、許可およびブロックされるトップレベルのナビゲーション、リダイレクト、観測可能な範囲でのサブフレーム、外部スキーム、戻る操作、JavaScript の無効および有効な状態、不正なメッセージと再送されたメッセージ、アカウント切り替えとログアウト、オフライン状態と HTTP エラー、プロセス再作成、コールバック中の破棄、ファイル選択のキャンセルと無効な選択、権限拒否、ダウンロードの所有権を網羅します。

パッケージとバージョン、プラットフォームと OS、WebView エンジン、テスト対象のオリジン、JavaScript とデータストアのポリシー、実際に観測したプロバイダーまたはバックエンドの境界を記録します。ウィジェットテストではポリシー関数と状態の所有権を検証できますが、実機でのシステム WebView のレンダリング、Cookie の永続化、ファイル選択、権限、ダウンロード、ナビゲーションコールバックを証明することはできません。

参考資料

コメント