ようやくできあがったWebAssemblyによるNCMBの署名処理をJavaScript SDKに組み込んでみたいと思います。なるべく現状のJavaScript SDKを変えない方法を紹介します。
使い方
コードはNCMBMania/ncmb_js_wasm: JavaScriptの署名処理をWebAssemblyに置き換えたSDKです。にアップロードしてあります。
https://github.com/NCMBMania/ncmb_js_wasm/raw/master/ncmb.min.js
変更した点としては、to_signという関数があれば、それを使って署名処理を行うようになっています。
WebAssemblyのコンパイル
NCMBMania/wasmをダウンロードします。Rust/Cargoの環境は整っていることとします。 src/lib.rs
を開いて、クライアントキーを編集します。
let key = "YOUR_CLIENT_KEY";
保存したらコンパイルします。
$ make all
ncmb.wasm というファイルができあがります。これがWebAssembly版の署名処理になります。
HTML
まずHTMLでは ncmb.min.js と bundle.js を読み込みます。bundle.jsはRustから提供されているWebAssemblyが使いやすくなるライブラリです。
HTMLと同じ階層に先ほど作った ncmb.wasm を配置してください。
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title></title> <meta charset="utf-8" /> <meta name="description" content="" /> <meta name="author" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="" /> <!--[if lt IE 9]> <script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <link rel="shortcut icon" href="" /> </head> <body> <button onclick="save()">データ保存</button> <!-- Example: <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> --> <script src="ncmb.min.js"></script> <script src="bundle.js"></script> <script src="app.js"></script> </body> </html>
NCMBの初期化
今回はアプリケーション用として app.js を作成します。初期化は通常通りです。クライアントキーはダミーのものを与えます。
const applicationKey = 'd288714a5a801f4ccaaac99c87df41d35e38b5804a9ecbcd2026c1901e914fc0'; const dummyKey = 'aaa'; const ncmb = new NCMB(applicationKey, dummyKey);
WebAssemblyの読み込み
app.jsの中で WebAssemblyのファイルを読み込みます。そしてその結果を window.to_sign としてグローバスな関数として定義します。これで署名処理に WebAssemblyを採用するようになります。
window.onload = function() { fetchAndInstantiate('ncmb.wasm') .then(mod => { exports = mod.exports; window.to_sign = s => { let outptr = exports.to_sign(newString(exports, s)); return copyCStr(exports, outptr); }; }); };
実行
後は普段使っているJavaScript SDKと同じように使えます。
const save = () => { const WebAssemblyData = ncmb.DataStore('WebAssemblyData'); const item = new WebAssemblyData(); item .set('msg', 'Hello NCMB') .save() .then((item) => { console.log(item); }) .catch((err) => { console.error(err); }) }
まとめ
WebAssembly を使えば簡単にクライアントキーや署名処理を隠蔽化できます(。ACLさえ正しく設定すれば、Webアプリケーションを作るのにも使えるでしょう。 wasmファイルを作るところが面倒ですが、これによってmBaaSの可能性が飛躍的に高まるでしょう。
2020/06/24追記:WebAssemblyで生成されるバイナリは難読化レベルであって、テキストへのコンパイルでキーが閲覧できるリスクは残ります。WebAssemblyによる署名作成処理はあくまでも平文よりは漏洩リスクが下げられる程度です。データの操作時にはACLを設定する、クラス単位での操作権限を設定することで不正なデータ操作を回避できます。