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

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

mBaaSを使ったPWAを作る(その6 WebAssemblyによるクライアントキーの隠蔽化)

f:id:mbaasdevrel:20180319115225p:plain

最近にわかに盛り上がっているのがPWA(Progressive Web App)です。PWAは固有の技術を指すキーワードではなく、モバイルWebアプリを作るためのベストプラクティスと言えます。

今回から何回かに分けて、mBaaSを使ったPWAを作っていきます。今回はWebAssemblyを用いてクライアントキーを隠蔽化します。

クライアントキーの隠蔽化とは

mBaaSではアプリケーションキーとクライアントキーを用いて認証を行い、クラウド上のデータを操作します。そのため、この二つのキーが漏洩すると、自由にデータ追加ができたり、認証不要なデータを操作できるようになります。認証を用いてACL設定を行っているものは操作できませんが、データを追加できるのは問題があります。

そこでクライアントキーを隠蔽化することで、PWAであっても(またはWebアプリであっても)mBaaSを安全に使えるようにします。

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.wasmbundle.jspublic フォルダの中に移動してください。

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の中で用いる際にはクライアントキーを必ず隠蔽化するようにしましょう。

f:id:mbaasdevrel:20180625094536g:plain

なお、WebAssemblyは署名部分しか使っていませんので、ロジックは隠蔽化されていません。クラス名などはコードを探せば見られてしまいます。もしクラス名なども隠蔽化したい場合にはスクリプト機能を使ってください。

ここまでのコードはNCMBMania/PWA-NCMB at v6にアップロードしてあります。実装時の参考にしてください。

中津川 篤司

中津川 篤司

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