Zenn
🗝️

SSS Extensionをリリースした話

2022/03/22に公開
Chrome拡張
JavaScript
nem
symbol
tech

SSS Extensionとは

ブロックチェーンシステムSymbolのトランザクションを受け取り署名済みトランザクションを返却するブラウザ拡張機能です。

SSS Extension

関連する技術としては、EthereumではMetamaskというブラウザ拡張ウォレットがあります。

EthereumブロックチェーンではMetamaskとdAppsを連携しブラウザ拡張ウォレットで決済を行うことができます。

SSS Extensionのアカウント設定

SSS ExtensionにSymbolブロックチェーンのアカウントを登録する必要があります。

  • アカウントを識別する名前
  • Symbolブロックチェーンのアカウントアドレス
  • Symbolブロックチェーンのアカウントの秘密鍵
  • 秘密鍵を暗号化するためのパスフレーズ
    を入力しアカウントの登録を行います。

この入力から、SSS Extensionは名前、アドレス、パスフレーズとSSS Extensionが保持するパスフレーズで暗号化した暗号化秘密鍵を保存します。

Symbolブロックチェーンにはメインネットとテストネットがあり、秘密鍵だけではどちらのネットワークのアカウントかが判別できません。

ネットワークの判別を行うことができれば良いので、ネットワークを選択するUIを作成し、秘密鍵と選択したネットワークからアドレスを導出できるためアドレスを入力する必要はありません。

アドレスが「T」から始まる場合テストネットであると判別できます。しかし、上記の通りネットワークを判別することのみが目的であれば、わざわざコピーアンドペーストする必要はありません。では、なぜアドレスの入力をさせるのかというと、秘密鍵とネットワークからアドレスを判別できるのです。秘密鍵 + ネットワーク = アドレスです。そしてアドレスからネットワークを判別できます。なので、正解のアドレスを入力することにより、64文字の秘密鍵や39文字のアドレスの入力にミスが無いことを判別することができます。このチェックにより一文字だけコピーできていなくて、ペーストした際に最後に「v」が入ってしまったみたいなたまにあるコピペミスを判別することができます。

SSS Extensionの利用方法

ドメインの許可

SSS ExtensionはWebアプリケーションへSSS オブジェクトを挿入します。しかし、SSSオブジェクトにはアクティブアカウントの公開鍵などの情報を持つためむやみにSSS オブジェクトを挿入しない仕組みとして、許可リスト方式でのドメイン許可を採用しています。ユーザーはSSS Extensionと連携したいWebアプリケーションで右クリックを押下しメニューからSSSと連携するを選択することによってSSS ExtensionとWebアプリケーションを連携することができます。

連携済みのドメインはオプションページから確認することができます。
また、ゴミ箱アイコンを押下することで、ドメインとの連携を解除することができます。

アプリケーションを利用する

SSS Extensionと連携したWebアプリケーションでトランザクションを生成すると画面右下に通知が表示されます。

SSSにログインし署名を行うとトランザクションの署名を行った通知が表示されます。

このようにして、ユーザーは署名が要求された通知が来ると、SSSにログインし署名を行うといった操作でWebアプリケーションへ秘密鍵を預けること無くトランザクションへと署名することができます。

アプリケーションに導入する

SSSは利用者だけでなく開発者にも優しいです。以下のデモアプリケーションはReactで作成されたSSSの導入デモです。ご参考にしてください。
SSS DEMO

Webアプリケーションはトランザクションを生成します。

生成したトランザクション(tx)をwindow.SSS.setTransaction(tx)を実行することでSSS Extensionへトランザクションを転送することができます。

そして、window.SSS.requestSign()を実行することで、ユーザーにSSSを用いて署名することを要求することができます。requestSign関数は非同期関数で、await構文またはthenを用いることで、署名済みトランザクションを得る事ができます。

そして、得た署名済みトランザクションをノードへとアナウンスする。

これだけでSSSをWebアプリケーションへと導入することができます。

導入時の注意点

SSS Extensionの読み込みよりWebアプリケーションの読み込みが早いため、ページロード時にはSSSオブジェクトが挿入されていないため、setTimeOutなどで有効になっているかの確認を遅らせるなどの対処が必要となります。

SSS Extensionと安全性

SSS Extensionを用いることで、Webアプリケーションに秘密鍵を持たせないことにより、Webアプリケーションから秘密鍵が漏洩することがなくなります。しかし、SSSを信用する必要があります。SSSはChrome Web Storeに掲載するためにGoogleによる審査を経てリリースされていること、プログラムが全て公開されていること。をユーザーに信用してもらうための情報として提供します。

SSSのリポジトリ

とは言っても完璧なセキュリティなんてものは無いので、資産を動かすウォレットと資産を管理するウォレットは分けるべきではあります。

SSS Extensionを支える技術

ブラウザ拡張機能によるスクリプトインジェクト

webアプリケーションとブラウザ拡張機能のコンテンツスクリプトではwindowが別になっているため、ブラウザ拡張機能の関数をwebアプリケーションから実行することはできません。

そのため、コンテンツスクリプトから、webアプリケーションのhtmlへ直接スクリプトタグを挿入します。SSS Extensionでは、SSSの連携を確認する関数やSSSオブジェクトを挿入するためのプログラムを挿入しています。

トランザクションの転送

上記で挿入したSSSオブジェクトを用いてSSS Extensionにトランザクションを登録します。

Metamaskでは、パラメタでトランザクションの情報を指定し、ブラウザ拡張機能内でトランザクションを生成し、ノードへのアナウンスを行うのですが、Symbolブロックチェーンには多種多様なトランザクションがあるため、この手法はマッチしません。そこで、生成したトランザクションを引数に実行する設計にしました。このトランザクションの情報をhttps://github.com/symbol/symbol-uri-scheme/ を用いて、URI化し文字列としてブラウザ拡張機能の保存領域へ保存します。そしてこのトランザクションの情報を署名時じ復元することで、トランザクションの情報を共有しています。

SSS Extensionの今後

SSSと連携するdAppsをみなさん作ってください(他力本願)

dApps開発をしつつ、SSS Extensionを用いて、ハードウェアウォレットを用いた署名を行うことや、Symbolの多種多様なトランザクションへのプレビュー対応を進めていきます。

Discussion