ウォレットiframe

ウォレットiframeは、ブラウザーの分離境界です。アプリとは別のウォレットオリジンで実行します。 ウォレットUI、暗号化したローカルレコード、Worker、ウォレットオリジンのセッション状態を管理します。

境界

境界	役割
アプリオリジン	SDKを呼び、アプリUIを表示し、公開操作の入力を渡す。
ウォレットiframeのオリジン	ウォレットUI、IndexedDB、認証方法のフロー、Workerを管理する。
ブラウザーWorker	使用中の保持者素材と、操作内の秘密状態を管理する。

アプリオリジンのJavaScriptは、公開結果と秘密を含まないフロー状態を受け取ります。 保持者シェア、PRF出力、メールOTP秘密素材、VoiceIDテンプレート、サーバーシェアは、アプリオリジンの外に留まります。 承認済みの鍵エクスポートは、ウォレットオリジンのビューアー内に素材を表示します。 keys.exportKeyは、アプリへ操作結果を返します。秘密鍵は返しません。

公開済みSDKでは、WebAuthnの認証情報作成とアサーションをウォレットオリジンで実行します。 SDKは、iframeの権限をそのオリジンへ委譲します。アプリオリジンのWebAuthnへ切り替える経路はありません。 対応ブラウザーと、ウォレットオリジンに適合するRP IDを使ってください。

分離する理由

iframeは、ウォレットの権限をアプリページから独立させます。 アプリページが侵害されても、ウォレットオリジンの確認、ポリシー、認証要件を満たす必要があります。 署名レーンの参加前に、セッションの受付、リプレイ、署名利用枠の確認にも成功する必要があります。

境界を設定する

Reactプロバイダーのマウント時に、ウォレットオリジンを明示します。 ウォレットサービスとSDKのパスは、その専用オリジンを基準に解決します。

実行可能なReactの実装例

import { SeamsWebProvider, seamsTestnetConfig, useSeams } from '@seams/wallet/react';

// Everything else — wallet service path, SDK base path, relayer account, chain
// RPC and explorer URLs — comes from the SDK defaults.
const seamsConfig = seamsTestnetConfig({
  walletOrigin: import.meta.env.VITE_WALLET_ORIGIN,
  relayerUrl: import.meta.env.VITE_RELAYER_URL,
  publishableKey: import.meta.env.VITE_SEAMS_PUBLISHABLE_KEY,
});

function WalletApp() {
  const { loginState } = useSeams();
  return <p>{loginState.isLoggedIn ? 'Wallet unlocked' : 'Wallet locked'}</p>;
}

export function App() {
  return (
    <SeamsWebProvider config={seamsConfig}>
      <WalletApp />
    </SeamsWebProvider>
  );
}