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

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

ニフクラ mobile backendをWebアプリケーションでも安全に使うには

JavaScript f:id:mbaasdevrel:20171212211252p:plain

ニフクラ mobile backendはスマートフォンアプリのバックエンド(サーバサイド)で必要な技術を提供します。しかし、バックエンドが必要なのはアプリだけとは限りません。サーバサイドで動く、Webアプリケーションにおいてもデータベースやストレージのような仕組みは必要です。

JavaScript SDKはWebブラウザ上のJavaScriptでも動作します。しかし、その際にアプリケーションキーとクライアントキーを入力しなければなりません。この二つのキーはニフクラ mobile backendのアプリ認証キーとして使われますので漏洩、または閲覧できる状態にあるのはよくありません。

そこで今回はWebアプリケーションでニフクラ mobile backendを安全に使うための方法を紹介します。

方法はつ

Webアプリケーションでニフクラ mobile backendを使う方法は主につあります。

  1. サーバサイド
  2. 署名作成処理をサーバサイド化
  3. 署名作成処理をWeb Assembly化

サーバサイド

JavaScript SDKはNode.js上でも動作します。そこで、ExpressといったWebアプリケーションフレームワークと組み合わせて使う方法があります。最近流行のVueのSSR(サーバサイドレンダリング)を提供するNuxtとNCMBを組み合わせることもできます。

サーバサイドの場合、アプリケーションキーやクライアントキーを隠蔽できますので、安心してWebアプリケーションの中で利用できます。

コミュニティベースではRuby SDKPHP SDKをリリースしています。これらのSDKを使うことで、より簡単にサーバサイドのプログラミング言語からmBaaSを利用できます。

署名作成処理をサーバサイド化

NCMBMania/ncmb_server_v2NCMBMania/sign_server_v2 を組み合わせることで署名作成処理をサーバサイドで行えるようになります。署名処理作成だけをサーバ化しますので、使い方は普段のJavaScript SDKと同じです。

この方法は手軽ですが、署名作成処理の分だけネットワークアクセスが一回増えてしまうのが難点です。署名サーバはHerokuでも立てられるようにしていますので、アクセスが少ない限りは無料で使い続けられるでしょう。

署名作成処理をWeb Assembly化

NCMBMania/wasmNCMBMania/ncmb_js_wasm: JavaScriptの署名処理をWebAssemblyに置き換えたSDKです。を組み合わせることで署名作成処理をWeb Assemblyで行います。Web AssemblyはWebブラウザ上で動作する実行ファイルで、コンパイルされているのでクライアントキーを読み取られる心配がありません。

この方法は上記の署名作成処理のサーバサイド化と比べてネットワークアクセスが発生しないというメリットがあります。ただしWeb Assemblyをサポートしたブラウザでしか動作せず、IE11では使えないでしょう。

まとめ

いずれの方法についても一長一短があります。簡単にまとめると次のようになります。

サーバサイド 署名作成処理をサーバサイド化 署名作成処理をWeb Assembly化
SEO × ×
認証後のセッション
SDKの修正 ×
対象ブラウザ
外部サーバ 不要
ネットワークアクセス数 ×

通常のJavaScript SDKをそのままWebブラウザ上で動かすのはリスクが大きいので注意しましょう。なお、署名作成処理をサーバサイド化したり、Web Assembly化したとしても、ロジックは見えたままです。その点は注意して利用する必要があるでしょう。そうしたロジックも隠蔽したい場合にはサーバサイドで実行したり、スクリプトの利用をお勧めします。

中津川 篤司

中津川 篤司

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