FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

WebAssembly版署名処理をJavaScript SDKで利用する

f:id:mbaasdevrel:20180319115225p:plain

ようやくできあがった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を設定する、クラス単位での操作権限を設定することで不正なデータ操作を回避できます。

NCMBMania/wasm

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。