Achmad Kurnianto
Achmad Kurnianto

Achmad Kurnianto

Make your React App can't be exposed by React DevTools

Photo by Nathan Van Egmond on Unsplash

Make your React App can't be exposed by React DevTools

Achmad Kurnianto's photo
Achmad Kurnianto
·Jun 18, 2022·

3 min read

Play this article

Table of contents

  • Congratulation!
  • What!
  • Restrictions
  • Usage
  • Result

DISCLAIMER
This article is intended to share knowledge with react developers in order to make our react app safer. This article doesn't intend to persuade Tokopedia users, or other apps which uses react, to not use it anymore because the confidential data can be exposed by React DevTools.

Congratulation!

Wow! You're successfully deployed your react app to the internet! Customers will use your app and be happy with that. But, are you sure your app is not being inspected by strangers using React DevTools? What will you do if you/your teammate accidentally store confidential data into your component props, state, and/or hooks?

Unfortunately, React DevTools still shows your app component hierarchy using both the development and production version of react. React DevTools also still show your component props, state, and hooks, although you can't modify its value when the app uses the production version of react. It's not like Vue DevTools which disables inspection when using the production version of vue.

Let's compare web apps that use either react or vue. AFAIK, Tokopedia use react and Mamikos use vue in development. Both web apps can be exposed by either React or Vue DevTools. We can't see component hierarchy on Mamikos app because the devtool inspection is disabled by Vue DevTools. Unfortunately, you can see props inside components in Tokopedia.

image_2022-06-18_14-41-20.png

Inspection result with random component inside Tokopedia Web App

What!

That app stores user address data in component props. It's made the consumers so insecure. What should we do as developer, specifically react developer? Should we use vue instead react?

No no no, you can still use react. There is one tool to make it happen from Puru Vijay called vite-preset-react. That plugin has an option called removeDevtoolsInProd to remove React DevTools in the production build.

Restrictions

Unfortunately, this tool only applies if you (and your teammate) develop react app using vite. If you develop react app with webpack / CRA, I hope there is webpack plugin, specifically html-webpack-plugin addon to support this feature. I hope maintainers of React DevTools agree to add the option to enable the showing component hierarchy and its attributes, too.

Usage

If you already develop react app using vite, you have to replace @vitejs/plugin-react with vite-preset-react in your package.json dependencies. Then update vite.config.js / vite-config.ts file like below.

// vite.config.js/ vite.config.ts file

import { defineConfig } from 'vite';
import react from 'vite-preset-react';

export default defineConfig({
  // rest of vite configurations
  plugins: [
    // rest of vite plugins
    react({
      removeDevtoolsInProd: true
    })
  ],
});

Simple usage of vite-preset-react

Result

There are the results after successfully building react app with vite.

Screenshot from 2022-06-18 16-13-16.png

Although it can still be exposed by Wappalyzer, look at that react icon! My App seems not to develop with react!

Screenshot from 2022-06-18 16-15-01.png

Internet browser which has installed React Devtools doesn't show Components and Profiler tab.

Thanks for reading my article. Please donate to me in the links below if this article is beneficial. Keep developing an awesome react app!

 
Share this