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

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

Monaca/Cordovaアプリでのアプリケーションキー/クライアントキーの隠し方

Monacaアプリを作っていて気になるのはJavaScript SDKのアプリケーションキー、クライアントキーをソースコード中に書かなければならないことではないでしょうか。そのため、利用に際して二の足を踏んでしまっていたケースがあるかと思います。

MonacaのCordovaバージョンが6.2系になったことで、cordova-plugin-crypt-fileプラグインが使えるようになりました。これはHTML/JavaScript/CSSファイルを暗号化してくれるプラグインです。

利用法

Cordovaとプラグインの管理を開いて、Cordovaバージョンが6.2.0以上になっていることを確認しましょう。

そして、cordova-plugin-crypt-file をインストールします。これで準備は完了です。

コードを書く

後はいつも通りコードを書きます。

// Add your code here
function onDeviceReady() {
  var application_key = "YOUR_APPLICATION_KEY";
  var client_key      = "YOUR_CLIENT_KEY";
  var ncmb = new NCMB(application_key, client_key);
  
  var Item = ncmb.DataStore("Item");
  var item = new Item;
  item.set("msg", "Hello World");
  item.save()
    .then(function() {
      alert("保存しました!");
    });
}
document.addEventListener('deviceready', onDeviceReady, false);

ビルドする

そしてiOSまたはAndroidアプリとしてビルドします。特に設定は必要ありません。

中身を見る

例えばAndroidアプリとしてビルド後、ダウンロードして拡張子をapkからzipに変えてみます。そしてZipファイルとして解凍します。

assetsフォルダの中は通常のMonaca/Cordovaアプリのようにwwwフォルダが確認できます。さらにファイル構成も確認できます。

しかし、HTML/JavaScript/CSSファイルを見ると暗号化されているのが分かるはずです。

仕組み

このプラグインはビルド時にAES256でファイルを暗号化します。その際のキーはランダムに生成され、iOSであればCDVCryptURLProtocol.m、AndroidであればDecryptResource.javaに直接キーを書き込んだ上でコンパイルされます。

なお、ファイル構成は変わらないのでファイル名に大事な名前をつけない方が良いでしょう。

注意点

Monacaアプリでプラグインを使う場合はゴールドプラン以上が必須になりますので注意してください。元々エンタープライズ向けの機能として同様の機能が提供されている暗号化ですが、より手軽に利用できるようになったと言えるでしょう。mBaaSとMonacaを組み合わせる際にぜひ活用してください。

tkyaji/cordova-plugin-crypt-file: This plugin to encrypt/decrypt the source files.