まとめ

• Webページのリバースエンジニアリングの支援をする研究
• コール情報やDOMの変化を記録、閲覧可能に
• 該当のソースを見つけるまでの時間が早くなる
• chrome拡張が公開されているので実際に試せる

はじめに

このエントリは「ヒューマンコンピュータインタラクション論文紹介 Advent Calendar 2015」の13日目のものです。

今回はUIST20015からWeb系の論文でいいのがあったので紹介します。
実は昨日のUIST勉強会で読んだので、参加してる人にとってはまたかよ…ってなりますが、
去年を見る限りUIST勉強会は資料を公開しないようなので、参加しなかった人にとってはお得なはずです…

論文の内容

今回紹介する論文は「Unravel: Rapid Web Application Reverse Engineering via Interaction Recording, Source Tracing, and Library Detection」です。 この論文は、UnravelというWebページのリバースエンジニアリングを支援するツールについての論文です。

このツールはまず、Webページ上で動いているDOMの変化やJSのコール情報を記録していきます、 そして、Chromeのデベロッパーツールにタブを追加し、そこに変更回数や呼び出し回数でソートして情報を表示します。 これにより、Webページ上での動きが、どのようなJSとDOMの変化によって実現されているのかを簡単に調べることができます。

動画はこちらになります。

先行研究との比較

論文中でいくつかあげられていますが、先行研究は条件が限定的だったり、巨大なサイトを対象にしたときに動作が遅くなってしまうのに対し、 このツールは任意のサイトに適応可能で、巨大なサイトでも遅くならないと述べられています。

実装方法

documentへの書き込みを全てフックして情報を保存してるらしいです。 そのため、他の研究に比べて取れる情報が限定的になりますが、任意のサイトに適応可能になっているとのことです。 また、後述するようにソースが公開されているので、詳しく知りたい方はコードを読むのがいいと思います。

実験

このツールのありなしで、TumblerやApple等のサイトのアニメーションを再現するタスクを行い、途中のチェックポイントごとに比較をしたそうです。 結果として、システムアリの方が関連するソースの最初に見つけるまでの時間が50%短縮され、全体としても30%短縮されたそうです。 ただし、関連するコードを見つけてからタスク終了までの時間に差は無いらしく、動きからコードの位置を調べるのには役に立っているが、 ソースコードが理解しやすくなっているわけではなさそうです。 なお、上級者と初級者で特に差は無かったそうです。

残念なことに、論文ではこのツールのありなしでしか比較しておらず、先行研究との比較がされていませんでした。 このツールの押しの1つであるポータブル製（環境が特殊で無くてもどこでも使える）は比較が難しいですが、 もう一つの巨大なサイトでも遅くならないという速度に関しては比較できそうなので、そっちは既存のやつとの差を調べてほしかったと思いました。

その他

このツールは公開されているので普通に使う事が出来ます。
https://github.com/NUDelta/Unravel

ただし、minifyされているとJSのコール情報部分がとてもわかりにくいので、事前にunminifyしておく必要があります。
（実験ではunminify済みの状態で行った）

知っているコードならともかく、知らないコードに対しては動きと対応する部分を見つけるのはとても大変なので、 もの凄く便利そうでした。自動minifyとかが出来ると、普通に実用的なツールになると思います。

なお、今日が「ヒューマンコンピュータインタラクション論文紹介 Advent Calendar 2015」の13日目ですが、14日目はあいているのでおすすめな論文がある人や面白い論文を読んだことがある人は是非！