最近にわかに盛り上がっているのがPWA（Progressive Web App）です。PWAは固有の技術を指すキーワードではなく、モバイルWebアプリを作るためのベストプラクティスと言えます。
今回から何回かに分けて、mBaaSを使ったPWAを作っていきます。今回はWebAssemblyを用いてクライアントキーを隠蔽化します。
クライアントキーの隠蔽化とは
mBaaSではアプリケーションキーとクライアントキーを用いて認証を行い、クラウド上のデータを操作します。そのため、この二つのキーが漏洩すると、正しい設定をしていないとデータの追加や編集ができてしまいます。ACLやクラスの権限設定で防げますが、安全性を高めるためにクライアントキーと署名処理の隠蔽化を考えてみましょう。
WebAssemblyの生成
WebAssembly化にはRustを用います。Rustの環境設定については省きます。環境設定ができたら、NCMBMania/wasmをダウンロードします。
そして、 src/lib.rs を編集します。 YOUR_CLIENT_KEY となっている部分を自分のクライアントキーに置き換えてください。
// Change to your client key let key = "YOUR_CLIENT_KEY";
後はコンパイルします。
$ make all
そうすると ncmb.wasm というファイルが生成されますので、ncmb.wasm と bundle.js を public フォルダの中に移動してください。
WebAssemblyの読み込み
ファイルは main.js にて読み込みます。
require('@/bundle');
さらに関数を有効化します。この関数がないとmBaaSを実行できなくなるので、 window.to_sign が読み込まれた後で Vue インスタンスを作るようにします。
Vue.config.productionTip = false window.onload = function() { window.fetchAndInstantiate('ncmb.wasm') .then(mod => { const exports = mod.exports; window.to_sign = s => { let outptr = exports.to_sign(window.newString(exports, s)); return window.copyCStr(exports, outptr); }; new Vue({ render: h => h(App) }).$mount('#app'); }); };
NCMB JavaScript SDKの修正
node_modules/ncmb/lib/signature.js を開いて、署名生成部分を変更します。 WebAssembly の window.to_sign を実行するようにします。
var sig = window.to_sign(sigStr);
/*
var sig = crypto
.createHmac("SHA256", clientkey || this.clientkey)
.update(sigStr).digest("base64");
*/
config.json の変更
config.json にはクライアントキーが書かれているので、これは適当な文字にします。
{ "applicationKey": "aed...5fd", "clientKey": "dummy" }
これでWebアプリケーションとして公開しても安全になりました。
まとめ
後はTodoアプリがこれまでと変わらずに操作できるのを確認してください。WebAssembly化したことで、クライアントキーがなくとも動作するのが分かるかと思います。mBaaSをWebアプリケーションであったり、PWAの中で用いる際にはクライアントキーを必ず隠蔽化するようにしましょう。
なお、WebAssemblyは署名部分しか使っていませんので、ロジックは隠蔽化されていません。クラス名などはコードを探せば見られてしまいます。もしクラス名なども隠蔽化したい場合にはスクリプト機能を使ってください。
ここまでのコードはNCMBMania/PWA-NCMB at v6にアップロードしてあります。実装時の参考にしてください。
- その１ ベースの作成
- その２ タスク管理の完成
- その３ データ表示のオフライン化
- その４ 通信回数を減らす
- その５ タスク追加/更新/削除をオフライン化
- その６ WebAssemblyによるクライアントキーの隠蔽化
- その７ manifest.jsonとPWA化
