Monacaはハイブリッドアプリ開発PFであり、開発はHTML/JavaScript/CSSで行います。そのため、アプリはストアでリリースされたものであってもソースが閲覧できる状態になっています。防ぐためにはエンタープライズプランで提供されるアプリのロジック暗号化プラグインやtkyaji/cordova-plugin-crypt-fileを導入する必要があります(独自プラグインの導入はプロプラン以上でなければいけません)。
万一コードを見られても(ある程度)安全でいられるために、WebAssembly版のJavaScript SDKを使いましょう。この方法であればフリープランでも使えますし、クライアントキーが漏洩する訳ではありません。なおWebAssemblyのバイナリはテキストへの変換も可能で、キーを探すことは不可能ではない点に注意してください。
WebAssembly版JavaScript SDKを作る
WebAssemblyはRustで書かれたコードをコンパイルしなければなりません。そのためRustの開発環境またはDockerを使います。今回はより手軽なDocker版を紹介します。
Dockerの準備
Dockerはすでにインストールされていることとします。そして下記コマンドでビルド環境ができあがります。
git clone git@github.com:pjama/rust-wasm-docker.git cd rust-wasm-docker docker build -t ubuntu-wasm docker/
WebAssembly版の準備
次に別なディレクトリでWebAssembly版の準備をします。
git clone git@github.com:NCMBMania/wasm.git cd wasm
そして src/lib.rs
の YOUR_CLIENT_KEY
と書かれている部分を自分のクライアントキーに書き換えます。書き換えたらビルドを実行します。
sh build.sh
終わると ncmb.wasm というファイルができあがっています。他に必要なファイルとしては下記があります。
- ncmb.min.js(WebAssembly版を使うように修正されたもの)
- builder.js(WebAssemblyを使いやすくするライブラリ)
Monacaで利用する
では修正したJavaScript SDKとWebAssemblyをMonacaアプリにアップロードします。今回は以下のようにアップロードします。
- ncmb.min.js -> www/vendors/ncmb/
- ncmb.wasm -> www/vendors/ncmb/
- builder.js -> www/vendors/wasm/
そしてHTMLファイルで読み込みます。
<script src="www/vendors/wasm/builder.js"></script> <script src="www/vendors/ncmb/ncmb.min.js"></script>
プログラミングを書くJavaScriptファイル(app.jsなど)では以下のように実行します。ncmb.wasmのパスは環境に応じて書き換えてください。また、YOUR_APPLICATION_KEYはあなたのアプリケーションキーと書き換えてください。
let ncmb; window.onload = async () => { window.exports = {}; const mod = await fetchAndInstantiate('./vendors/ncmb.wasm') const exports = mod.exports; window.wasm_sign = s => { let outptr = exports.to_sign(newString(exports, s)); return copyCStr(exports, outptr); }; const applicationKey = 'YOUR_APPLICATION_KEY'; ncmb = new NCMB(applicationKey, 'dummy'); };
wasm_sign という関数があるかどうかでWebAssembly版を使うかどうかが判別されます。JavaScript SDKの初期化のタイミングは特に関係ないのですが、wasm_signを定義してから実行すれば、常にwasm_signを使って署名処理を行うようになります。
注意点
WebAssembly版ではクライアントキーの隠蔽化が行われるので、クライアントキーは簡単には露見しなくなります。ただしJavaScript自体のコードは隠蔽化されないのでロジックは見えてしまうでしょう。データの安全性のためにはログインユーザごとの権限設定や、クラスごとの権限設定を正しく行うようにしましょう。
まとめ
WebAssembly版はごく簡単に導入ができます。クライアントキーを難読化する際に利用してください。