Hacky way to view Instagram Redux Store

Redux DevTools Running on Instagram Site

A full stack developer who managed to turn a few eyes by participating in Facebook’s Bug Bounty Hunter.

At times my white-hat hacking skills have helped me solve through many development struggles and am sharing one such here.

In my earlier projects, as mentioned in Mihail Diordiev’s (Created Redux DevTools Extension) blog, i realized the advantage of keeping the redux dev tool in production.

Recently i was added as a new joinee to a project where i noted that my team had turned the redux dev tool OFF in the production bundle js file.

The child in me wanted to understand the app from production version of code via “redux action history or time travel”, even before setting up the local work space.

Since production code of file is just a transformed(minified and uglified) version of actual code. I wanted to play with transform version by injecting the redux dev tool using web proxy tools.

After successful injection, i enjoyed the whole process of mirroring the same in other public website (twitter).

Just before blogging my experience, i tried to search similar case and found this link . 😢😢😢

Since this case has already been blogged neatly, leaving out initial hiccups, i felt happy/proud about my thought process on completing the things without with google help.

When i was on a search for a good implementation technique of ‘react/redux’ combo i found Instagram

Here’s the recipe for understanding Instagram Redux store

If you setup your store with middleware and enhancers, change:

  1. While creating Redux store, Instagram uses some middleware/enhancer. So one can’t follow the same steps mentioned in that blog(twitter/redux one)
  2. As mentioned in redux-devtools-extension github,The application which uses middleware and enhancers in redux store should follow the below approach.
import { createStore, applyMiddleware, compose } from 'redux';

+ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+ const store = createStore(reducer, /* preloadedState, */ composeEnhancers(

- const store = createStore(reducer, /* preloadedState, */ compose(
applyMiddleware(...middleware)
));

So we need to target specific lines of code(compose) from minified bundle js and replace it with above mentioned composeEnhancers function.

3. So searched for applymiddlerware redux function in bundle.js

Searched for applymiddlerware redux function in bundle.js

4. I injected the required below redux-dev tool code into the above mentioned file 54944540b86c.js (line from 10350 to 10351)

,  sn = null;
var composeEnhancers = typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : Object(L.a);
var cn = Object(composeEnhancers)(Object(B.applyMiddleware)(function(e) {

5.I altered the file using charles proxy Map Local tool

Charles proxy Map Local tool enables you to use local files as if they were part of a remote website.

6. Let’s check the redux-devtool timeline..

7. Yeah.. i told you right its working :) :)

The production code of file is just a transformed(minified and uglified) version of actual code.

7. But surprisingly, i have seen lot of <UNDEFINED> actions :O :O

8. After inspecting the code, found that Instagram team are using Symbols (without any key) in actions and reducer

9. So now i have following problems,

Since we don’t know the action type names, it is tough to understand and distinguish each action in redux-dev tool time travel action sequence

10. To solve this, we need to assign a unique key to each of those Symbols. Since it is a repetitive task, i created vs code extension which solved my problem. (Using this extension, i have assigned unique key to all Symbols and updated my js file serving from charles proxy Map Local tool)

11. To read the symbols, we need to add `{serialize: true}` in redux dev tool compose function

,  nn = null;
var composeEnhancers = typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({serialize: true}) : Object(R.a);
var on = Object(composeEnhancers)(Object(L.applyMiddleware)(function(e) {

12. Let check the redex dev tool again, Wow now can distinguish each action using their symbol name.

13. Finally Mission Accomplished, now we have better way to distinguish each action in redux-dev tool time travel

Conclusion

Here is my key takeaway from above activity,

  1. As mentioned by Mihail Diordiev blog, enable redux dev tool in production.
  2. Use Symbol as Redux action, which may give certain level of obstructing in understanding redux action history to others.
  3. Since now anyone can view Redux dev tool history, don’t save sensitive data in redux state.

Finally Happy hacking folks.

I hope that this article can help you with something!!! I really love to talk about software development, web security , numismatic. If you want to, just ping me at:

Note: If you have time and patience, Please read and help me to correct any verbal mistakes in this post as personal note.

Thanks harshan, for your time and effort to correct this post

Like what you read? Give Raja Sekar Durairaj a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.