ブラウザでWebSocketの通信内容を覗き見て解析する方法

最近はWebSocketを使うウェブサービスやゲームなどが増えました。

もしかするとゲームの拡張機能（MOD）を作ったり、ウェブサービスを解析したいといった用途でWebSocketの通信内容を覗き見たいという人がいるかもしれません。

今回はブラウザ上でWebSocketの通信内容を覗き見る方法をご紹介します。

JavaScriptで動作するのでとても手軽にできる手法です。以下がコードになります。

WebSocket.prototype._send = WebSocket.prototype.send;

WebSocket.prototype.send = function(data) {
    this._send(data);
    console.log(data);
}

これはWebSocketでサイトからサーバーに送信される内容をコンソールに出力できるコードです。

これをTampermonkey（Google Chromeの拡張機能）を使ってサイトの読み込みと同時に実行すればいいだけです。

コードの説明

最初のWebSocket.prototype._send = WebSocket.prototype.send;は、send関数を書き換える前に_sendに元の関数を代入しておく意味があります。

_sendの部分は任意です。

WebSocket.prototype.send = function(data) {
    this._send(data);
    console.log(data);
}

その後、sendに任意の関数を代入しています。

ただ、元の関数を代入した_send関数を呼び出すのを忘れてはいけません。これを忘れるとデータが送信されなくなってしまいます。

条件文を書いて任意のデータのときは_send関数を呼び出さない（送信をブロックする）というのも可能です。

このコードは海外ではWebSocket Snifferなどと呼ばれていたりします。

さいごに

本格的な解析をしたいなら、やはり対象サイトのコードをみるのがいいでしょう。

しかし、通信内容を覗き見たり通信をブロックしたりするだけなら、このような簡単な方法もあります。

ゲームの拡張機能などを作っている方にとっては便利なので覚えておくとよいと思います。