showroom コメントログビューア「しょころ(仮)」の解説を作るためのページです

はじめに

通信内容の解析と聞くと真っ先に思いつくのがWiresharkでパケットキャプチャー。
これは手軽でいいのですが、showroomの通信はhttps。暗号化されているのです。
wiresharkでも暗号化を解除できますが、秘密鍵を持っている場合に限ります。
秘密鍵は、サイトのサーバ内にしかなくて一般のひとは入手することは不可能なものなのです。
じゃあなんで「しゅころ(仮)」ではブラウザの通信方法を代行して通信できているのか。
同じようなツール作ってみたいと思ってあきらめた方もいらっしゃるのではないかと思います。
最近のブラウザには「ディベロッパーツール」なるものが用意されていて、ブラウザの通信内容を記録することができるようになっているのです。
ここでは、その足掛かりになる程度のご紹介をさせていただきます。

さっそく起動してみよう

google chromeを使います。ほかのブラウザでもできると思います。
バージョン 45.0.2454.93 mで説明します。
メニューの「その他ツール」⇒「ディベロッパー ツール」を選びます。


すると、なにやら出てきたと思います。
丸で囲んだ部分をクリックすると、縦横どちらにするか選べます。見やすい方を使うといいです。


そして、お目当てのサイトにつないでみます。

どばーっと出てくると思います。
これはつないだタイミングの最初からのブラウザが通信した内容が時系列に並べられたものです。
DTMとか、動画編集されている方は見たことがあるような画面じゃないでしょうか。
この1行1行がブラウザがサーバに対して送信したリクエストと、レスポンスになります。
では、一番最初に行ってみます。
1つ目をクリックすると、画面がわかれて詳細が表示されるようになります。
この内容をプログラムで再現することで「しょころ(仮)」は動いています。

Requestというのは、ブラウザからこのURLのページをちょうだい!っていう命令です。
Responsはサーバからの回答、HTMLのテキストの情報だったり、画像、動画、音声のデータだったりします。
Request Header
リクエストには、ブラウザ側の情報を一緒に送ることで、ほしい情報をどういう感じでほしいのかサーバーに伝えたり、ログインが済んでいるのかという情報を知らせることができます。
そういう情報がリクエストヘッダーに込めてられています。

詳細をみるにはView sorceをクリックします。


見るだけじゃなくテキストとして取り出したい場合は一覧の部分で右クリックして「Copy request headers」というのを選ぶとクリップボードにコピーされるのでメモ帳かなんかに張り付けることで見ることができます。

Respons Header
これはリクエストした結果になります。
説明は上とかぶるので割愛しますね。

以上です。
うん、これくらい知っていればOKです。
あとは各画面でボタンを押したときにどういうリクエストが飛ぶのかじっと見ているだけです。

コメントをかく


ユーザーIDでかく場合はこちら

画像に記載されている文字を下のフォームに入力してください。

「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

×

この広告は60日間更新がないwikiに表示されております。

どなたでも編集できます