Skip to content

Add an option to remove devtools from production #440

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Closed
6 tasks done
tiziodcaio opened this issue Apr 3, 2025 · 6 comments
Closed
6 tasks done

Add an option to remove devtools from production #440

tiziodcaio opened this issue Apr 3, 2025 · 6 comments

Comments

@tiziodcaio
Copy link

tiziodcaio commented Apr 3, 2025

Related plugins

Description

React developer tool works also in production by default...
It might be a security hole!

Suggested solution

Might the vite plugin inject this code on index.html as said in this thread?

<script>
window.__REACT_DEVTOOLS_GLOBAL_HOOK__&& 
(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject=function(){})
</script>

Alternative

We can inject manually the script tag in our main.html file:

<script>
window.__REACT_DEVTOOLS_GLOBAL_HOOK__&& 
(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject=function(){})
</script>

A good idea might be documenting it.

Additional context

No response

Validations

@sapphi-red
Copy link
Member

sapphi-red commented Apr 4, 2025

I wasn't able to reproduce it. It does not have __REACT_DEVTOOLS_GLOBAL_HOOK__ defined.
https://stackblitz.com/edit/vitejs-vite-fcdfrwn8?file=index.html&terminal=build
I don't think it's enabled by plugin-react / plugin-react-swc or Vite core.
Image

@tiziodcaio
Copy link
Author

Try this on a new tab!

with the tag

Image

without the tag

Image

@tiziodcaio
Copy link
Author

npm vite build && npm vite preview to run on production

@sapphi-red
Copy link
Member

So it seems setting __REACT_DEVTOOLS_GLOBAL_HOOK__: { isDisabled: true } is the expected way.
facebook/react#3877, facebook/react-devtools#191

This just hides it and isn't a security hole though. Users can easily bypass it.

You can use a config like this to achieve it.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig(({ command }) => ({
  plugins: [react()],
  define:
    command === 'build'
      ? {
          __REACT_DEVTOOLS_GLOBAL_HOOK__: { isDisabled: true },
        }
      : {},
}));

@ArnaudBarre
Copy link
Member

That's quite a useful feature. There is not security hole at all. It's enabled on facebook so I don't think we should do something for that

Image

@ArnaudBarre
Copy link
Member

I'm going to close as not planned. This seems quite a niche need and is quite easy to do already as @sapphi-red showed.

@ArnaudBarre ArnaudBarre closed this as not planned Won't fix, can't repro, duplicate, stale Apr 19, 2025
@github-actions github-actions bot locked and limited conversation to collaborators May 4, 2025
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Projects
None yet
Development

No branches or pull requests

3 participants