JavaとJavaScriptでRSA鍵交換とAES暗号化

どうも、hide92795です。

Bukkit RemoteControllerのBukkitDev上に「iPhone(WinPhone)のも作ってくれ」という要望が結構あったので、本来は来年にMacを買ってからネイティブアプリとして作る予定でしたが、なんか審査に通らない気がしてきたので、Webアプリとして作ることにしました。

JavaScriptなにこれ?おいしいの?状態からのスタートでしたが、なんとか1週間でメインの通信可能な状態まで持って行くことが出来ました。

というわけで、今回はそこでやっていたJavaとJavaScript間での暗号化について書いていこうと思います。


自分の実装ではサーバー側がJava、クライアント側がJavaScript、

Java側でRSA鍵を生成、RSA公開鍵をJavascriptへ送信、Javascriptで生成したAES共通鍵をRSAで暗号化して送信、Java側でそれを復号という手順になっています。

また、通信の方法はWebSocket(Java側はTooTallNate/Java-WebSocket、JavaScript側はデフォルトのもの)を使っています。

まず、Java側でのRSA鍵の生成から

WebSocketで通信する際には、普通の文字(String)で送信できるので、ModulesとPublicExponentを16進数の文字列表現に変換して、コロンでつなげています。

次に、JavaScript側でのAES鍵作成とそれの暗号化へ

JavaScript側での暗号化では、RSA暗号化に以下のものを使用します。

  1. RSA and ECC in JavaScript : http://www-cs-students.stanford.edu/~tjw/jsbn/
    • jsbn.js, jsbn2.js, prng4.js, rng.js, base64.jsを使用
  2. A Client-Side JavaScript RSA Encrypter : http://www.peterrowntree.com/?d0=papers/clientRSA
    • rsa.jsを使用
  3. crypto-js : http://code.google.com/p/crypto-js/
    • aes.js, pbkdf2.jsを使用

AESキーはPBKDF2でランダムに生成(random_strは指定された文字数の英数字文字列を返す関数)

受信した文字列をコロンで区切って、それからRSAKeyを作成。

rsa.encryptで返されるのは、16進数文字列なので、crypto-jsでBase64に変換

Base64に変換したものをJava側に送り返します。

ちなみに、この部分をJavaで行うと、こんな感じになります。

違いは、AES鍵を生成する際にUUIDを使用しているくらいですかね

次はJava側での復号化

ここで出てきたbyte[] keyがAES暗号鍵です。


ここからはAESを使った暗号化です。

まず、Java側での暗号化はこんな感じです

モードがAES/CBC/PKCS5なので、IVを送る必要があります。

このIVを送るために、IVと暗号化したデータをそれぞれBase64で符号化、連結しているので多少ややこしくなってしまっています。

(Java同士の実装だと、byte[]を連結させればよかったのですが、JSと組み合わせた時にIVの長さが15byteになったりと不都合があったのでこうなりました)

次に、Java側での復号化

まぁ、暗号化とは逆な感じですね。

最初にコロンで区切ってあるIVと暗号文を分け、それぞれを復号、交換したAES鍵を使用して復号化といった感じです。

次はこれを作り始めて一番時間がかかったJavaScript側の実装です。

まずは暗号化のほうから

やっている事は

  1. 暗号化するデータをWordArrayに変換
  2. IVをランダムに生成
  3. データを暗号化
  4. IVと暗号化したデータをそれぞれBase64化
  5. それらをコロンでつなげる

と言った感じです。

最後は復号化の部分です

一番の謎は、CryptoJS.AES.decryptに渡すencryptedの中身にivとkeyを渡さないとエラーが出るということです。


JavaScriptは引数にどのクラス?の変数を渡していいのかがわかりにくいのでもう大変でしたw

あとthisの仕組みが未だによくわからん(´・ω・`)

まぁ、とりあえずは動いているので、細かな修正は色々組み上げて大分わかってきてからにしましょうかね

ではノシ

Firefox(PaleMoon)を艦これ用にカスタマイズしてみる

※12/16追記 推奨アドオンリストを変更しました。

どうも、hide92795です

なんだかんだで艦これを始めたのですが、窓の杜で紹介されていた「航海日誌」を使うために、メインのブラウザのプロキシ設定を変えるのはめんどいので、新しくブラウザを調達&専用ブラウザとしてカスタマイズしてみることにしました。

目標とする完成形はこちら

2013-12-16 17-10-19_v2

できる限りウィンドウを小さく、かつゲーム画面を広くを目指して

ーーー

まずはベースとなるブラウザのダウンロードから

Firefox系列なら基本的に大丈夫です(自分はPaleMoonを使用しています)。

ここでダウンロードするのはポータブル用にカスタムされているものをおすすめします。

USBに入れることも出来ますからね。

Firefoxならここ、PaleMoonならここからDLできます。

起動する前に、PaleMoonPortableを選んだ人は、「Palemoon-Portable.ini」の「;MOZ_NO_REMOTE=1」の先頭の「;」を削除しておいて下さい。(他のでもiniがあれば設定をしておいて下さい(特にFireFox系列のブラウザをメインで使っている人))

PaleMoonはデフォルトでは日本語化されていないので各自言語パックを入れて下さい(FFはデフォルトで入ってるかわからない)

ーーー

起動したら、以下のアドオンをぶっこみます

  1. Always on Top (最前面に表示させるボタンを追加する)
  2. Browsizer (ブラウザのサイズをボタン1つで変えられるようにする)
  3. Hide Caption Titlebar Plus (タイトルバー周りのカスタマイズ)
  4. Minimize On Start and Close (閉じてもプログラムが終了しないように)
  5. Stylish (カスタムCSSの適用)
  6. Tab Mix Plus (タブ周りのカスタマイズ)
  7. FireGestures (マウスジェスチャーに操作を割り振る)
  8. Pearl Crescent Page Saver Basic (スクショ撮影)

このうち、1,2,4,6,7,8は必須ではないですが、個人的に合ったほうが良いと思っているものです。

アドオンを入れ終わったら再起動し、設定を行っていきます

まず、オプション→一般 からホームページを艦これのページ(http://www.dmm.com/netgame/social/-/gadgets/=/app_id=854854/)に設定します。

次に、オプション→タブ→Tab Mix Plusオプション からTMPの設定画面を開き、左下の「設定」ボタンから「インポート」を選び、ここからダウンロード出来る設定ファイルを選択、適用します。

ダウンロードされずに内容が表示されてしまう場合は、右クリックから「対象を保存」だったりでダウンロードして下さい。

次に、Stylishの設定です。

アドオン→四角にSと書かれたボタン→新しいスタイルを書く  からスタイルの新規作成画面を出します。

名前は任意の名前、タグは空白、真ん中の一番広いところには

これをコピペして下さい。

次はHide Caption Titlebar Plusの設定です。

左上のFireFoxボタン(派生ブラウザの場合はそれに相当するボタン)を右クリック→’Hide Caption Titlebar Plus’ Options(O)をクリック

以下の画像のように設定します

2013-10-13 11-54-42

2013-10-13 11-54-52

2013-10-13 11-55-01

ここまで来るとだいぶ完成形に近づいていますが、さらにワンプッシュしていきます。

ーーーーー

Firefoxボタンの上にカーソルを持って行くと、メニューが表示されるので、「表示」→「ツールバー」から、チェックされている項目をすべてチェックを外します。

そうしたら、同じく「表示」→「ツールバー」の中にあるカスタマイズを選択します。

ドラッグ・アンド・ドロップで以下の画像のように配置します

2013-12-16 17-12-00_v2

ナビゲーションツールバー部分にロケーションバーを(通常は隠しているが、何かあった時にロケーションバーを表示することで使えるようにしておく)

タブ部分右側に左から「Page Saver」「スペース」「Browsizer」「スペース」「ブックマーク」「スペース」「Always on Top」「スペース」の順で配置します。

このとき、Always on Topのアイコンがパレット部分ではピンの形ではなく、たくさんアイコンがでてしまっている奴(マウスホバーで「Always on Top」と出る)のを選んで下さい。

ーーー

次に、アドオンからFireGesturesの設定を開き、「一般」の「ジェスチャを開始するために押すボタン」を「中」に

「マッピング」を開き、「更新(キャッシュを無視)」に「RDLUR」(横長の長方形を12時の部分から時計回りに一周する感じ)

「ウィンドウを閉じる」に「LDR」(Cの文字を描く感じ)

「ウィンドウを最小化」に「RU」(少し下にふくらませながら右上に向かって伸ばす感じ)を追加します。

このとき、他のジェスチャ設定は全て消すことをおすすめします。

また、設定の値も自分が使いやすいと思っているものなので、適宜変えていって下さい。

ーーー

最後に、先ほど配置したBrowsizerのアイコンを右クリック→「設定」から

「幅804 高さ507」の設定を追加

ただし、この数字はWindows7+PaleMoonで計測したものなので、別の環境であったり、Hide Caption Titlebar Plusで枠幅を別のにしたりしていると変わってきます。

ちょうど良いサイズに変更してから、「現在の設定を保存」を行い、ウィンドウの位置の情報を消すというのがいいと思います。

その他の設定の「テキストではなく~~~」と「右クリックではなく~~~」にチェックを入れて「OK」をクリック

タブ部分にあるBrowsizerのアイコンを左クリックし、追加した設定を選択すれば、ちょうどいい感じになるはずです。

ーーーー

おそらくこれで最初の画像の用な感じになっているのではないでしょうか

ちなみに、TabMixPlusの設定ファイルにタブをダブルクリックで保護&ロックの設定を書いてあるので、ダブルクリックしておけば間違えてタブを閉じてしまうことはないと思います。

また、Minimize On Start and Closeのお陰で閉じるボタンを押してしまってもタスクバーに最小化されるだけになっています。

ーーーー

さらに艦これ用にカスタマイズしたい人向けに

(PaleMoon-Portableでのディレクトリ)\Bin\Palemoon\browser\chrome\icons\default フォルダ(新しく作る)に「main-window.ico(WIndowsの場合)」を配置することで、タスクバーに表示されるアイコンを変更することが出来ます。

こんなかんじ↓

キャプチャ

 

ーーーー

タブ横に設置するボタンはあくまで自分が必要かなと思ったものです

  • Pearl Crescent Page Saver Basic・・・スクショを撮影する時に
  • Browsizer・・・・間違えてウィンドウサイズを変えてしまった時に戻すように
  • ブックマーク・・・一応Googleを追加しておく
  • Always on Top・・・別のソフトが全画面でも前面に表示できるように

また、間に挟んでいるスペースも、自分向けの誤クリック防止のためです。

自分が必要だと思うのを配置して下さい。

残りは、航海日誌を使うならプロキシ設定や自分でHide Caption Titlebar PlusやTab Mix Plusの設定を弄ってみるのもいいかもしれません。

それでは良い艦これライフを

ではノシ

ーー 11/25追記ーー

サイトの構造が少し変わったらしく、空白ができたりしてしまっていたので、それに対応したStylyshの設定に置き換えました。

下にあるのは古いものです。

Bukkitプラグイン 「RemoteAdmin」 公開!※追記あり

どうも、hide92795です

タイトル通りですが、Bukkitプラグイン「RemoteAdmin」を公開しました。

Bukkitをリモート操作できるようにするプラグインです。

制作期間は1ヶ月強

久々にAndroidアプリを作ったので前からの違いで少し凹みかけましたw(主にFragmentとかFragmentとか)

詳細はこちらのページで

http://minecraft.hide92795.org/plugins/remoteadmin/

フォーラムでも公開しています。

http://forum.minecraftuser.jp/viewtopic.php?f=38&t=15469

しばらくしたらBukkitDevの方にも載っけてみようかなーと思ってます。

ではノシ

※追記

BukkitDevに載せようとしたところ名前変えろと怒られてしまったので「RemoteController」に変更しました

http://minecraft.hide92795.org/plugins/remotecontroller/

WordPressにログイン監視プラグインを入れてみたら

どうも、hide92795です

WordPressの方に移行してから1ヶ月半ほど立ちましたが、最近になってスパムコメントが多く来るようになりました。

元々承認制のため表示されることはないのですが、来るたびにメールが送信されるためうざったらしいことこの上ない。

という訳で元々から入ってるAkismetを有効化しました。

こうかは ばつぐんだ!

とばかりに精度が高く仕分けされます。

まぁ今ではコメント送信時にCAPTCHAを表示させるために「SI CAPTCHA Anti-Spam」を導入しているのでコメント自体が来なくなりましたがねw

んで、このCpatchaについて調べていた時にブルートフォースアタックが結構あるという情報を見つけました

来ているのかなーと試しにログイン監視プラグインである「狂骨(Crazy Bone)」を導入して3日ほど様子見をみてみたところ・・・

2013-08-24 23-10-11

40/day程度の割合で来ていることが判明しました

無駄にトラフィック増やされてもアレなので、WP-Banにてアクセス禁止にしておきましたが、この際このログイン監視プラグインの作者さんのブログにあったユーザー名ホワイトリスト制でも試して見ましょうかね

Brute force attack との戦い

ちなみに、3日間だけですが自分が持っているWordPressのサイト3つ(blog, apps, minecraft)に同じように監視をつけたところ、

・blog&minecraft

中国から100件ほどカナダから15件ほどポーランドから5件ほど

中国からのはすべてユーザー名がadmin、パスワードが英単語やみんなが使ってるパスワードランキングに乗っていそうなものばかり

カナダとポーランドからのものは普通な感じのIDとパスを使ってきていますが、どっかから漏れたものでも使ってるんですかね?

あとはアタックの間隔からしてカナダとポーランドは手動(数分間隔)、中国は自動(毎秒)でしょうね

・appsブルートフォースアタックはされていませんでした

とりあえずログイン画面へのCpatchaの有効化とログイン試行回数の制限でもしておきますかね

これでも収まらなければ先程のユーザー名ホワイトリスト制を採用しましょうw

ではノシ

 

C84 お疲れ様でした!

夏コミには出ないと言ったな、あれは嘘だ

\うわーーっ/

 

というわけでどうも、hide92795です。

(コマンドー8/20に放送ですってよ!)

今年も夏コミが終わりました。

暑い中スタッフのみなさん、サークル参加、レイヤー参加、一般参加のみなさん、お疲れ様でした。

初日からTwitterなどで流れているように去年の夏コミと比べて非常に暑くなりました。

自分は初めは参加する予定はありませんでしたが、いつもは3日目の(男性向け)が2日目(日曜)に移っていたため、参加することにしましたw

では今回の感想や反省点などを。。。

今回のコミケは特に暑さがひどくなると言われていたので水分などの暑さ対策を知っかりするように心がけました。

現地で水を買うのは在庫的にも効率的にも悪いと判断したので500mlペットを5本(うち3本を凍らせた)持って行きました。

あとは塩と砂糖を持って行きました。

Tシャツは予備を2枚、タオルを2枚と帽子を持って行きました。

結論から言うと水分はジャスト、Tシャツは帰りの大井町のトイレで1回着替えただけ、タオルは逆に不足と言った感じでした。(さらに言えば水は凍らせるのは他のペットボトルの保冷目的で1本だけで良かったような気がします。)

そして今回の一番の反省点、寝坊をしてしまったことですw

5時前の電車に乗る予定が寝坊したせいで6時前の電車に。。。

到着時刻が40分ほど送れ、並んだ場所は1つ隣のグループと言った感じでした。

待っている間は殆どその場から動かず、ずっと座っていました(並んだのは西側です)

10時時点での場所は前回の建物で影が出来る場所から大きく下がり階段を登ったすぐ先でした。

中に入ってからは、一番初めに毎回行っている壁サークル(毎年1:30弱並ぶ)に向かいました。

今回も1時間ほど炎天下で待つかと考えていたところ、びっくりするほど列が短く、10分ほどで買えてしまいましたw

(隣に並んでいたいかにも野球かサッカーなどのスポーツやってます感あふれる兄ちゃんとあそこで曲がるんですかねーみたいに話していましたw めっちゃ優しかった)

呆気にとられたまま次のサークルへ・・・

その後のサークルでも並んで10分というのが連続し、なんだかおかしな感じがしましたw

結局今回マークしていた20サークル弱をすべてを2時間ほどで周り終わり、そのまま帰宅することにしました。

では今回の反省点と良かった点を

反省すべき点はなんといっても寝坊したことです

正直今回買える物は少なくなるだろうなぁと思っていました

あとは買ったものを入れる袋です

前回の反省を踏まえ、一番大きいサイズでも入る袋を持って行きましたが、その袋以外に別の袋を持って行かなかったためはじめからその袋を使うことに・・・・

動きにくくなりますし、何より持つのが辛いw

さらには帰り道で持ち手の部分が壊れるという。。。。

あとはタオルの数です

2枚じゃ圧倒的に足りませんでしたw

ココらへんが次への反省点でしょう

今回の良かった点は熱中症対策です

凍らせたものも一緒に入れておいたので最後の方でも全部が冷たい状態で飲むことが出来ました。

ただし、3本凍らせていたので、先の2本を飲み終わった後に溶けるまでまたないといけないという事態が発生しました。

今回はここら辺で、

今回の成果は

サークル数18

使用金額24,000円ほど

以上です

次の冬コミはこんどこそ行かない予定です(さすがにヤヴァイ)

関係者のみなさん、本当にお疲れ様でした。そしてありがとうございました。

ではノシ

Twit Time Web Beta公開

どうも、hide92795です

友人の提案でTwit TimeのWebアプリバージョンを作ることになりました。

これで先日コメントにあったような、iPhoneを使っている方でもアクセスすることが出来るようになると思います。

PHPのセッションやら見た目部分はその友人が手伝ってくれました。感謝

(PHPは先日WordPressのDownloadMonitorプラグインでおかしな所をPullRequest(2行)したくらいにしか嗜んでいませんから・・・)

機能としてはPC版から設定画面と詳細ウィンドウを除いた感じです。

投速算出設定は最新50ツイート分から算出します。

いつかは設定も出来るようにしたいのですがね・・・・

PHPはなんか自分には扱いづらくて・・・(ちゃんとしたエディタを使えば変わるのかな?)

Webアプリ版Twit Time 「Twit Time Web Beta」はこちらからアクセスできます。

http://apps.hide92795.org/twit_time/

WordPressをマルチサイト化しようとしたお話

どうも、hide92795です。

先日このブログもfc2からこのWordPressへ移行しましたが、それに伴いマイクラのMod関係やTwitter系のアプリも個別ドメインにインストールしたWPで運用するようにしました。

(すべてhttp://www.hide92795.org から飛ぶことが出来ます。)

んで、昨日友達と通話中に

さくらサーバーの容量が増える→今どれくらい使ってる?→300MBって多くね→別々にWP入れてる?

という感じに話がつながり、マルチサイトという機能があることを知りましたww

プラグインの大半は被っていますし、テンプレートも全部同じものを使っているのでマルチサイト化したいと思い、既存のものを移行させる手順を調べていました。

どこのサイトでも一番面倒と書かれていたのがSQLの統合というところでした

しかしながら、自分のところの3つのWPはすべて同じデータベースを使っているので既にこの部分はクリアしていましたw

なら簡単にできるかなー と思っていたのですが、ドメインの設定方法やWPを設置する場所だったりがイマイチ分からない

変に設置して繋がらないなんてなったらイヤですし、調べていると中にはマルチサイトに対応していないプラグインもあるようで・・・

結局、いまさらインストールしなおすのも面倒&容量そこまで圧迫してない(さらに増えるし)という訳で3つのWPをそのまま運用することにしました

こういうのは初めにちゃんと調べておくべきでしたねw

残るはTwit Syncの個別ページのみ

頑張っていきましょー

ではノシ

Blog移転のお知らせ

どうも、hide92795です

やっとのことで全部の記事のチェックが終わったのでこちらに移転します。

fc2の方には強制リダイレクトでこちらに飛ぶように設定しておきます。

やっぱりWordPressは拡張性が高くていいですねw

ではノシ

Twit Time&Twit Sync更新のお知らせ

どうも、hide92795です
どうやらTwitterAPIが1.1に移行し、1.0が使えなくなったようなので
自分のTwitter系アプリを全部更新するはめになりましたw
どうやらTwitter4Jのバージョンが古いのがダメだったようで、最新のモノに変えたら
エラーなど出ずに正常終了したので大丈夫でしょう
今回の更新点は全て
・TwitterAPI1.1への対応
です
ダウンロードはそれぞれの記事からお願い致します
Twit Time
http://blog.hide92795.org/twit_time
Twit Sync
http://blog.hide92795.org/twit_sync

トランジションをどうするか

どうも、hide92795です。
自作ゲームフェスの方は残念ながら落選となってしまいました。
どうやらツール部門は受賞なしだそうで驚いていますw
今回のお題は「トランジション(画面遷移エフェクト)」です。
デフォルトでもフェードだったりの基本的なものは搭載しますが、既存のノベルゲームエンジンで有名な吉里吉里さんの方では、画像を用いたトランジションが出来るようになっています。
白黒の画像(ルール画像)の濃淡で順番に表示・非表示する といったものですね。
この機能は非常に優秀なので是非リスペクトしたいと思っていますが、なんせどう実装すればいいのかわからない・・・
個人的な決め事で「既存のノベルゲームエンジンのソースは(出来る限り)見ない」というのを決めているので・・・
というわけで色々考えてみたわけですが、一番しっくりした方法を書いてみようと思います
パフォーマンスは非常に悪そうで、さらにサンプルソースすら書いてませんけどねwww


①ルール画像の濃淡を8bitに直し、0.0~1.0の間に割り当てる
②全ピクセルの濃淡だけを抽出し、Client用に保存
③Client側で、②で保存したものを読み取り、①の数字をZ軸にしてVBOを作成
④トランジション実行中にVBOをデプスバッファのみ有効で書き込む
⑤フォグで指定範囲より奥にあるピクセルに霧をかけ、アルファ値が下がってるような感じをする
⑥指定範囲の閾値を時間ごとに変えていく
これが1週間ほど悩んだ結果に出された案です
非常に気がかりなのが③のVBO作成時に頂点数がバカにならない数になってしまう(800*600で48万)ということです
アルファテストとかでがんばろうかと思いましたが、閾値から完全に見えなくなるまでの範囲の濃淡をどうするか
という問題にぶち当たり没になりましたw
サンプルソースでパフォーマンスが非常によろしくなかった場合には禁じ手のソース閲覧を使うしかないのかなぁ・・・・
(ちなみに今まで見たことありません)
サンプル書くのも非常に大変・・・・
けどそれが楽しいんだけどねww
ではノシ