自堕落な技術者の日記 : SSL Pulseの統計情報でみるSSL/TLSの引越しについて

2014年11月頃から、SSLに関する統計情報を公開しているサイトSSL Pulseのデータから推移情報をブログで公開してきました。隔月で更新するようなことを言ってて、2015年12月から更新が無い状態になっており、「コラ～～！サボってんじゃね～～」的なことを思われたかたもいらっしゃるかもしれません。すみません。すみません。すみません。

新しいサイト

SSL Pulse Trends(SSL Pulseデータの推移) https://kjur.github.io/www/sslpulsetrend/index_j.htmlというサイトを作りました。今後の毎月の更新はこちらでやっていきます。

サイトを移行した経緯など、、、

前は、エクセルなど駆使してグラフ描いてたんですが、そりゃもう、結構手間がかってたんですよ。自分も興味があって毎月すぐ知りたいんだけど、とても、毎月はできないなと、、、ざっくりとした流れはこんな感じ：

今月のデータファイル(JSON)をwgetでダウンロードする
データの推移をTSV形式になるように変換するツールを実行する。グラフに必要なデータ列もこの時作る。
TSVファイルをUTF-16にする(Mac Excel対策)
Excelで読み込み
データを細かい整形(日付フォーマットや表ヘッダなど)
必要なグラフを作る
グラフをEMF(拡張メタファイル)でエクスポートする
PowerPointに吹き出し等を貼り付け(位置調整)
PowerPointの画面を画像キャプチャし、ブログへ

まず、第一の鬼門なんですが、自分は自宅ではMac Book Airを使ってまして、Mac用のExcel(前の2011も今のやつも)は、文字化けしないようにCSVやTSVファイルを読み込むのが骨が折れるんですよ。一応ファイルの入力候補としては普通のUTF-8でも大丈夫そうに見えるんだけど、うまくいかず。結局うまくいったのはメモ帳アプリでUTF-16に変換してから読み込ませるという方法です。Googleとかで"Mac Excel TSV 文字化け"みたいなキーワードで検索すれば、方法が出てくるでしょう。

そして、一つ一つグラフを作っていくわけです。

で、Excelのグラフの凡例ではちょっと見づらいのでパワポで吹き出しをつけます。

どうです？結構面倒くさそうでしょう？

で、新しいサイトでは

とにかくExcelでグラフをつくるのはやめにしたく、JavaScriptベースでグラフを描けないもんかと、調べてみました。最初は、ccchartなんかがデザインも良いかなぁと考えていたんですが、思っていたデザインにするのは、至難の技であると知り、D3.jsという有名なライブラリも見たんですが、一つのフツーのグラフ書くのに多くのコードを書かねばならず断念。D3.jsを簡単に使うためのラッパーがあるそうで、それを幾つか見て、rickshawで何とか許せるグラフが描けたのでそれを使うことにしました。

本当は、SSL Pulseに置いてあるJSON形式のデータファイルをそのまま、表示の度に取り込んで加工してからグラフ表示しようとしたんですが、諸々CORSの壁に阻まれ断念。動的にダウンロードする必要もなくなり、スタティックな解析データをNodeで作って、SOURCEタグで普通にデータ取り込むことになりました。

ブログでたまたまSSL Pulseについて書くだけなら、特別な断りをいれなくてもいいかと思ったんですが、定常的に今後は英語でもページを公開するとなると、SSL Pulseの作者のIvan Ristićさんに仁義というか確認取っといたほうがいいかなと思いました。IvanさんはSSL/TLSの技術解説書の中では最高に良いと思うBulletproof SSL and TLSの著者であり、SSLの設定評価サイトであるssllabsの開発などもしています。

Bulletproof SSL and TLS [ペーパーバック]

Ivan Ristic

Lightning Source Inc

2014-08

最初は、TwitterのDMで連絡取ろうとしたんですが、当然ながら私のフォローして頂いてるわけではないのでDMが送れず、メールアドレスもどこにも記載されていなので、連絡がつきませんでした。そこで、いつもJavaScriptの暗号/PKIライブラリでは情報交換などさせて頂き大変お世話になっているRyan Hurstさんに頼み込み、連絡とってくれないかと伝えました。Ryanさんは「Kenjiを紹介するよ。彼は、すげーJavaScriptの暗号/JWT/X.509ライブラリの作者だ。」と私からのお願い事項のメールを転送してくれました。2日ぐらい待ってて、「う～～ん」こりゃレス無しかなぁとも思ってたんですが、返事が来まして「SSL Labsは自由なコンテンツライセンスになってて、君の場合でも全く問題ないとわかると思うよ。同じようなこと(=データ推移情報)をやりたいと思ってたんだけど、時間がなくてね～～。」との事でした。よかった、よかった。これで安心して定常的に公開できそうです。

Rickshawの使い方は概ねこんな感じです。


<div id="chart_container"><div id="grade_chart"></div></div>

<script>
var graph = new Rickshaw.Graph({
  element: グラフを描くキャンバスが挿入されるDIVのDOM,
  width: グラフ幅,
  height: グラフ高,
  renderer: グラフ形式(棒グラフとか折れ線グラフとか),
  series: [{"color": グラフデータ色,
            "name": データ名(TLS1.2とかSHA256withRSAとかデータ名),
            "data": [{x: 値, y: 値}, {x: 値, y: 値} ...]},
            : (複数のデータがあれば続く)
          ]
});
graph.render();
</script>

同じ形式のグラフ描くのに、同じようなコード書くのも面倒なので、さらにラッパーを作りました。


RickshawUtilGraph(グラフ描くDOM IDの共通ヘッド(グラフや凡例、XY軸など),
                  グラフの共通テンプレート,
                  データ(グラフデータ、データ名)
                  [,オプションでグラフ形式を変えたい場合のパラメータ]
                  [,オプションでグラフ色変えたい場合のパラメータ]);

これでようやく、SSL Pulseの更新があっても、make 一発でグラフデータを作れるので、毎月の更新も負担にならなくなりました。

というわけで、まだ素っ気ないページですが日本語ページ公開にこぎつけました。今までなかった評価グレード(A-F)の分布推移のグラフはNPNのHTTP/2サポートプロトコルの推移のグラフも付け加わっています。

しばらくしたら英語ページの作成にとりかかりたいと思います。