Freecodecamp: Redux Dev Tool Extension can access the state in production

[Twaha-Rahman]

Describe the bug
In the freecodecamp.org website, Redux dev tools extension can be used to access the current and previous state. It may be noted that, actions can not be dispatched through the Redux Dev Tool extension.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'freecodecamp.org'
2. Click on the Redux Dev Tools Extension

Expected behavior
It is widely accepted as a best practice to not have development/debugging features in the production codebase. So, in the current context the Redux Dev Tools shouldn't be able to access the state.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10 (64 Bit)
• Browser: Google Chrome
• Version: Version 81.0.4044.122 (Official Build) (64-bit)

Additional context
Redux Dev Tools Extension can be found here.

It seems that the __REDUX_DEVTOOLS_EXTENSION__ was exposed to the global window object
which allows the Redux Dev Tool extension to read state. While bundling for the production codebase, this should be removed to avoid such behaviour.

[moT01]

I dunno, the first few articles I clicked on say that this isn't a problem, here's one. Looks like it adds a tiny bit of overhead, so maybe not a bad idea.

[raisedadead]

Thanks for your report @Twaha-Rahman I agree with Tom, that this is definitely not a bug, however we would like to employ the recommended practices.

A PR is welcome.

[Twaha-Rahman]

@raisedadead I would like to help out if I could in anyway! I'm working on a PR already ;)

[Twaha-Rahman]

So, I've looked into the code and in the createStore.js on line 27 to 28, there's this bit of code ---

const composeEnhancers = composeWithDevTools({
  // options like actionSanitizer, stateSanitizer
});

This composeWithDevTools in turn checks whether the script is running in a browser or not ---

exports.devToolsEnhancer = (
  typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__ ?
    window.__REDUX_DEVTOOLS_EXTENSION__ :
    function() { return function(noop) { return noop; } }
);

Then it exposes the __REDUX_DEVTOOLS_EXTENSION__ to the window.

So, if we can detect a production environment, we can stop exposing the __REDUX_DEVTOOLS_EXTENSION__ to the window. Assuming typeof window === 'undefined' running in the browser in production will evaluate to false, this should be the solution.

@raisedadead @moT01 Should I go for it or would you guys prefer a different route?

[raisedadead]

I was hoping if we could have a build time solution, we have an env var that we use on production: FREECODECAMP_NODE_ENV=production, this is used in the build pipelines as well.

Is this something that we could use? I am not an expert on redux I would leave it to someone more experience to guide here.

[ojeytonwilliams]

Why not just use compose or composeWithDevTools depending on the value of FREECODECAMP_NODE_ENV?

[Twaha-Rahman]

@ojeytonwilliams Good point.....doing it....

[Twaha-Rahman]

Okay, I've done a PR.

[Twaha-Rahman]

Sorry! Did a wrong PR....correcting it😅

[Twaha-Rahman]

Okay, I've done the PR. If there's anything wrong or you guys think should be changed, I'll gladly oblige. Thanks for all the support @ojeytonwilliams @raisedadead !

[raisedadead]

Thanks for your patience, we will review the PR in due course.