AppConnect

モナパレットでMpurse連携アプリが使えるようになってしまうという圧倒的な機能、その名も「AppConnect」を実装中です。

こちらの記事も開発中のAppConnectから書き込んでいます。

概要

AppConnectはモナパレット上のiframeで連携アプリを開くことで、ユーザがモナパレットのアドレスでそのまま連携アプリを遊べるようにします。

アプリ側では以下の対応をしていただくことにより、window.mpurse互換のwindow.monapaletteConnectにアクセスできるようになります。

アプリ側の対応

可能な限りアプリ側の作業負担が少ないように設計していますが、さすがにiframeで読み込んだページに好き勝手できるほど世の中ガバではないので、アプリ側でも以下の対応をしていただく必要があります。

こちらから提供するスクリプトの読み込み
- window.monapaletteConnectを定義する短いコードを配信するので、それを読み込んでもらう
- とはいえこちらでホストしているものを直接読むようにしていると私が悪堕ちして悪意あるコードに差し替える危険があるので、コピーを使うかアプリに直接書き込むかしてもらったほうがいいと思う（各アプリのセキュリティポリシーに沿ってご判断ください）
必要に応じてwindow.mpurseをwindow.monapaletteConnectにすり替えるコードの追加
- こんな感じでいけるかなと思います window.monapaletteConnect.getAddress().then(() => window.mpurse = window.monapaletteConnect).catch(() => {})
- 配布スクリプトに含めてしまったほうが面倒がないかなとは思いつつ、さすがに勝手にすり替えるのは図々しいので遠慮しました
必要に応じてiframe関連ヘッダの緩和
- X-Frame-Optionsヘッダが設定されたサイトはiframeで読み込めないので、X-Frame-Optionsヘッダは外してもらう必要があります
- 代わりにContent-Security-Policyヘッダのframe-ancestorsディレクティブでhttps://monapalette.komikikaku.comを指定してもらうなどすれば、モナパレット以外からのiframeは引き続きブロックできます

TODO

もうこのように書き込めているのですぐリリースできそうに思えますが、今回ばかりは外部サイトとの連携ということもあってしっかり調整してからじゃないとダメ。

Mpurseの全APIの模倣
- この記事を書くだけならgetAddress()とsignMessage()だけで事足りるので、まだ他を実装していません。実装しなくちゃ
- アプリ側で使われているかどうか次第だけどmpchain()はいったんなしでリリースしていいかもと思ってる。難しくはないはずだけど現状モナパレットに対応するコードがなくMpurseの実装を丸パクリするだけになるのであまり気乗りがしない
iframeの権限の調整
- 秘密鍵は命よりも重いので可能な限り権限は絞る
- その上でユーザ側に表示すべき注意事項とかも書かなくちゃです。先日英語対応したので作文の負担は永続的にニバイニバイです
アプリ側との調整
- 営業(?)とか上の対応についてのサポートとか
- あとアップデートするたびアプリ側に修正をお願いすることになっちゃわないよう、配信するコードは事前によく検証しましょうね

211112追記: アプリ開発者さんへの連絡

ひと通りテストしてwindow.mpurse互換のwindow.monapaletteConnectを定義するスクリプトが準備できました。内容ご確認いただいて、問題なければアプリに設定いただけると嬉しいです。最初のEventEmitterの行は人間が読むには厳しいですが、mpurseを真似るためnodejsのEventEmitterの定義を引っ張ってきたものです。
https://monapalette.komikikaku.com/script/monapaletteconnect.js

スクリプトの読み込み

例としてHTML(mpurseを使うよりも前の位置)に以下の2行を足していただければ、AppConnectからの読み込み時だけwindow.mpurseをwindow.monapaletteConnectで上書きすることでMpurse連携アプリがそのままAppConnectで利用可能になります。

<script src="https://monapalette.komikikaku.com/script/monapaletteconnect.js"></script>
<script>window.monapaletteConnect.getAddress().then(() => window.mpurse = window.monapaletteConnect).catch(() => {})</script>

ただし上記のように配信しているスクリプトをそのまま読み込んでいると私が悪堕ちして悪意あるコードに差し替えるリスクがあるので、コピーを他でホストしたりスクリプトの中身をそのままアプリのコードに書き込んでいただいてもOKです。その場合は更新の手間が増える可能性がありますが、アプリのセキュリティポリシーと照らしてご判断ください。

monapaletteConnectの仕様

とりあえずmpurse()以外の全てのAPIをwindow.mpurseと同様にご利用いただけます
正常系はwindow.mpurseと同じになるはずですが異常系の挙動は同じとは限らないため、例えばエラーメッセージの内容に依る処理などがある場合は修正が必要になる可能性があります

iframeの制約

AppConnectではiframeによりアプリを読み込む都合上、制約が増えます。私の方で現在確認できているのは以下です。

iframeからの読み込みを禁止するX-Frame-Optionヘッダは外してもらう必要があります。代わりにContent-Security-Policyヘッダのframe-ancestorsディレクティブでhttps://monapalette.komikikaku.comを指定してもらうなどすれば、モナパレット以外からのiframeは引き続きブロックできます。
window.alert()/prompt()/confirm()などのブラウザ組み込みのダイアログをiframe内のサイトから呼び出すことは非推奨になっており近々動かなくなる可能性があるため、クリティカルなダイアログにこれらを使っている場合は将来的に他のものに置き換えてもらわないと機能に支障が出てしまう。

以上です

モナパレット新機能 AppConnect！ coming soon...