Slack の localStorage のデータをデコードする
- カテゴリ:
- JavaScript
- Webサービス
- コメント数:
- Comments: 0
◆ 最近 localStorage に保存されてるチャットログなどが圧縮されるようになりました
◆ LZString.decompress という関数に通せば解凍できます
◆ LZString.decompress という関数に通せば解凍できます
Slack って最近流行ってるらしいチャットソフトがあります
ライトにですが使ってみて web でやるなら Skype より使いやすいと思います
個人とのチャットとグループチャット以外にチャンネルというこれまたグループチャットみたいなものもあってグループワークみたいのに向いてるようです
今回はこの Slack 関係です
webベースということもあって WebAPI が用意されています
ここでチャンネルのIDが必要になるのですが チャンネルのIDは普通に使っていて見えるものじゃないです
今のところ 9桁の英数字のようです
どうやって取得するのかわからなかったので 最初は websocket 通信を監視してそのデータから頑張ってチャンネルのIDを取り出してました
そのあとで localStorage にログが保存されてることに気づいたので ログのメッセージから判断するようにしました
最新のメッセージが一番最初にあるので Chrome の開発者ツールの一覧で見ていてわかりやすいです
ですが 最近になって localStorage のデータが圧縮されるようになりました
そのせいで 開発者ツールの一覧でみても文字化けしてるような文字が並んでるだけです
最初はブラウザのバージョン上げたせいで文字コードがおかしくなったのかなと思って SJIS → UTF8 などの変換を一通りかけてみたのですが 読める形式になるのがなかったので Slack の localStorage にアクセスしてるコード読んでいて 「compress」 という文字を見つけてちゃんと圧縮してるんだって気づきました
そこまでわかれば デコードする関数を見つけるだけです
LZString.decompress という関数がそれです
なので こんな風にすれば文字が読めます
全部をデコードして必要なのを探したいなら
これで 新しくチャンネルを作ってもIDがわかりますね
おまけ
localStorage への書き込みをどこのコードからしてるか どんな処理をしてから書き込んでるかを知りたいときに 大量の minify 済みコードからどうやってみつけるかについてです
JavaScript はコードが読めるし 基本は private なんてないですし ネイティブコードですら上書きできる便利仕様です
これを活かして localStorage.setItem を上書きします
上書きする関数の中身は なんでもいいですが debugger と書いておくと楽です
debugger と書いてない場合は 自分でそこに break point を付ける必要があります
これで localStorge.setItem が実行されると 一時中断になります
そのときの call stack を見ると どんな順番で関数が呼びだされて setItem まで来てるのかわかります
ここまでくれば setItem の引数に渡したデータがどうやって作られたのかを逆にたどっていくだけです
と まぁ コード読んで見つけたなんて言ってますが 実は読んだコードの行数なんて 100 行もあるかどうかです
さすがに minify されたコードを端から端まで読んで どこで圧縮されてるかを調べたりなんてしたくないですからね(笑
ライトにですが使ってみて web でやるなら Skype より使いやすいと思います
個人とのチャットとグループチャット以外にチャンネルというこれまたグループチャットみたいなものもあってグループワークみたいのに向いてるようです
今回はこの Slack 関係です
webベースということもあって WebAPI が用意されています
ここでチャンネルのIDが必要になるのですが チャンネルのIDは普通に使っていて見えるものじゃないです
今のところ 9桁の英数字のようです
どうやって取得するのかわからなかったので 最初は websocket 通信を監視してそのデータから頑張ってチャンネルのIDを取り出してました
そのあとで localStorage にログが保存されてることに気づいたので ログのメッセージから判断するようにしました
最新のメッセージが一番最初にあるので Chrome の開発者ツールの一覧で見ていてわかりやすいです
ですが 最近になって localStorage のデータが圧縮されるようになりました
そのせいで 開発者ツールの一覧でみても文字化けしてるような文字が並んでるだけです
最初はブラウザのバージョン上げたせいで文字コードがおかしくなったのかなと思って SJIS → UTF8 などの変換を一通りかけてみたのですが 読める形式になるのがなかったので Slack の localStorage にアクセスしてるコード読んでいて 「compress」 という文字を見つけてちゃんと圧縮してるんだって気づきました
そこまでわかれば デコードする関数を見つけるだけです
LZString.decompress という関数がそれです
なので こんな風にすれば文字が読めます
LZString.decompress(localStorage.xxxxx)
xxxxx のところには localStorage のキーを入れます全部をデコードして必要なのを探したいなら
for(var key in localStorage)
localStorage.hasOwnProperty(key) && console.log(key, localStorage[key].substr(0, 64))
全部出すとすごく長くなるので 64 文字だけ表示してますlocalStorage.hasOwnProperty(key) && console.log(key, localStorage[key].substr(0, 64))
これで 新しくチャンネルを作ってもIDがわかりますね
おまけ
localStorage への書き込みをどこのコードからしてるか どんな処理をしてから書き込んでるかを知りたいときに 大量の minify 済みコードからどうやってみつけるかについてです
JavaScript はコードが読めるし 基本は private なんてないですし ネイティブコードですら上書きできる便利仕様です
これを活かして localStorage.setItem を上書きします
上書きする関数の中身は なんでもいいですが debugger と書いておくと楽です
debugger と書いてない場合は 自分でそこに break point を付ける必要があります
これで localStorge.setItem が実行されると 一時中断になります
そのときの call stack を見ると どんな順番で関数が呼びだされて setItem まで来てるのかわかります
ここまでくれば setItem の引数に渡したデータがどうやって作られたのかを逆にたどっていくだけです
と まぁ コード読んで見つけたなんて言ってますが 実は読んだコードの行数なんて 100 行もあるかどうかです
さすがに minify されたコードを端から端まで読んで どこで圧縮されてるかを調べたりなんてしたくないですからね(笑