eHagaki Web Component

外部サイトのhostから、公開API・lifecycle・event・security modelを実際に操作するリファレンスです。

認証とtrust boundary

Web Componentはhostと同じWindow realmで動作します。ログイン操作は埋め込まれたeHagaki内の既存UIから行い、NIP-07はhostの window.nostr を直接利用します。NIP-46・nsec/managed accountもeHagaki自身の既存経路です。このsampleはsigner callbackを追加せず、nsecを保存しません。

module 未読み込み

component 未作成

whenReady(): pending

NIP-07 capabilityを確認中

Module / asset base

Web Component module URL

asset base

公開sampleの既定値は ./web-component/ です。GitHub Pagesの /ehagaki/ baseを壊さないためroot-relative URLは使いません。module importは明示的なCreate操作でのみ発生します。

外部moduleはhostページと同じJavaScript権限で実行されます。asset baseもworker/FFmpeg等の実行可能resourceに使われるため、信頼できるURLだけを指定してください。asset baseはCreate / Recreate時にelementへ設定されます。module load後はCustom Elements Registryのため実装を切り替えられず、別moduleを試すにはページをreloadしてください。

Create / destroy / recreate

1 document 1 connected instance制約を確認できます。2個目は inert、multiple_instances_unsupported のerror eventと whenReady() rejectionをlogします。1個目をdestroy後は新しいinstanceを生成できます。

Initial / runtime settings

Create前に入力した設定は、element接続前に setSettings() をqueueしてready後に適用します。下のボタンは同じ公開APIを実行中に呼び出します。

locale

themeMode

imageQualityLevel

videoQualityLevel

clientTagEnabled quoteNotificationEnabled replyNotificationEnabled mediaFreePlacement showMascot showFlavorText

Composer context

入力したNIP-19 note1... / nevent1... を、iframe protocolではなく直接 element.setContext(...) に渡します。channelのpayloadは reference、任意の relays/name/about/picture です。

content

quote

quote 2

channel.reference

channel.relays (CSV)

channel.name

CSS Custom Properties / parts

Create / Mount時はeHagaki本体のデフォルトCSSを使い、入力欄の値は自動適用されません。「入力したカスタムCSSを適用」を押したときだけ反映し、「デフォルトに戻す」でsample側のoverrideを除去できます。

background

text

border

link

input background

footer background

dialog background

font family

::part(header/composer) outline

ehagaki-composer::part(header) と ::part(composer) にoutlineを適用する、このページのスタイルがあります。iframeではこのCSS境界を直接使えません。

Component surface

listenerはelement生成前に登録され、ready eventの取りこぼしを避けます。イベントはbubbles/composedのCustomEventとしてhostへ届きます。

Event monitor

秘密情報・署名要求payload・raw Errorは表示せず、安全なsummaryだけを記録します。

iframeとの違い

Web Componentが常に安全という意味ではありません。host JavaScriptから秘密情報を隔離したい場合はiframeを使ってください。

項目	iframe	Web Component
境界 / API	origin isolation、postMessage protocol、handshake	同じWindow realm、method/property/CustomEvent、element create/destroy/recreate
認証	parent-client auth/RPCを利用可能	parent-client auth/RPCは使用しない。NIP-07はhostのwindow.nostrを直接利用し、NIP-46/nsecはeHagaki UI
保存	storage/IndexedDBの親委譲が可能	localStorageは `ehagaki.web-component.v1:` namespace、IndexedDBはhost originの `eHagakiDB`
更新 / style	iframe reloadまたはpostMessage	setSettings()/setContext()、CSS Custom Properties / `::part()`
trust	iframe originとの境界を設計可能	trusted hostのみ正式サポート。hostは同一realmのコード・storageを観測可能

HTTP / WebSocket / Service Worker

HTTP requestはhost Service Workerが観測可能です。
Nostr relayはWebSocketです。Service Workerのfetch interceptionはrelay interceptionの証拠ではありません。
host window.WebSocket wrapperについてbrowser-level proofは現在未完了です。今回relay interceptor fixture/APIは追加していません。