BYTEHIDE SHIELD FOR REACT
React Obfuscator
Protect your React application against reverse engineering, copying, and tampering. ByteHide Shield obfuscates your compiled React bundle, built into your pipeline.
Get started
Webpack (CRA)
npm install --save-dev @bytehide/webpack-shieldFor Create React App and Webpack projects. Protects the compiled bundle.
Full setup guide in the docsVite
npm install --save-dev @bytehide/vite-shieldFor React projects built with Vite. Protects every production build.
Full setup guide in the docsCLI
npm install -g @bytehide/shield-cli
shield protect "build/static/js/**/*.js"Protect the React build output directly.
Full setup guide in the docsFree to use with a ByteHide account
The first time Shield runs, it asks for a project token that connects it to your account. The package is free.
Get your free tokenHow it works
How to obfuscate a React application
React compiles to a JavaScript bundle before it ships. Shield protects that bundle. Three steps.
Step 01
Install Shield for your bundler
Add the ByteHide package for Webpack or Vite, depending on how your React app is built.
Step 02
Add your project token
Create a free ByteHide account, get your token, and add it to the plugin configuration.
Step 03
Build as usual
Run your normal build. React bundles, and Shield protects the output automatically.
Why obfuscate
Why obfuscate React code
A React application ships its entire frontend to the browser as a JavaScript bundle. Everything your components do is in there, readable.
- Your component logic is in the bundleThe logic inside your components, how they handle state, calls, and conditional rendering, ships readable in the bundle. Obfuscation makes it unreadable.
- Your API calls and keys are visibleThe endpoints your React app calls and any values in the client are in plain text in the bundle. Obfuscation with string encryption hides them.
- Readable React is easy to cloneA readable bundle lets a competitor study and replicate your frontend. Obfuscation raises the cost of copying your work.
Example
See React obfuscation in action
Obfuscation is easier to understand when you see it. Here is a small React component before and after Shield protects the compiled bundle.
import React, { useState, useEffect } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
fetch('https://api.example.com/count')
.then(r => r.json())
.then(data => setCount(data.value));
}, []);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}var _0xb3=['9d2a','c7f1','a4e0'];(function(_0xc1,_0x2d){var _0xf=function(_0xa){while(--_0xa){_0xc1['push'](_0xc1['shift']());}};_0xf(++_0x2d);}(_0xb3,0x1f));
var _0x1c=function(_0xe,_0xd){_0xe=_0xe-0x0;var _0xr=_0xb3[_0xe];return _0xr;};
function _0x4a(_0x2b){var _s=0x0;while(0x1)switch(_s){case 0x0:var _0x5c=_0x8f(0x0)[_0x1c('0x1')];
_s=0x1;break;case 0x1:_0x9d(_0x1c('0x2'))[_0x1c('0x3')](_0xd=>_0xd[_0x1c('0x4')]())[_0x1c('0x3')](_0x7e=>_0x5c(_0x7e[_0x1c('0x5')]));
return;}}Same behavior, unreadable result. The compiled bundle reveals nothing about your component logic.
What it covers
What ByteHide Shield protects in your React build
Shield applies its protection to the JavaScript bundle that React produces. Here is what that covers.
- Your component logicThe functions, hooks, and rendering logic from your React components become unreadable in the shipped bundle. The behavior is identical, the logic is not legible.
- Your strings and endpointsAPI endpoints, keys, messages, and configuration values are encrypted, so they cannot be read by scanning the compiled bundle.
- Your control flowThe structure of your logic is reshaped so the program flow cannot be followed, even after the code is beautified.
- Every build, automaticallyProtection runs as part of your build pipeline, so every release ships obfuscated automatically. There is no manual step to forget.
Your component code is your product. Shield protects what ships.
Build
Obfuscating React: protect the build, not the source
Obfuscation is applied to the JavaScript bundle React produces, not the .jsx or .tsx source. Knowing what gets protected is part of doing this right.
- React source is JSX, the browser runs the bundleYour .jsx and .tsx files are transformed and bundled before deployment. Obfuscation is applied to that compiled bundle, not the JSX source.
- Protect the bundle outputFor Create React App, the build output is in build/static/js. For Vite, in dist/assets. Shield protects those files.
- Reserved names keep React workingReact relies on certain names at runtime. Shield's configuration reserves them, so obfuscation does not break your app.
Protect what runs, not what you write.
Free tool vs Shield
Free obfuscator vs ByteHide Shield
For a quick test of a single JavaScript file, the free online obfuscator is enough. For a real React app, ByteHide Shield protects the whole build.
ByteHide Shield
Production-grade protection
The free online tool obfuscates single JavaScript files. ByteHide Shield protects a full React application, built into your pipeline.
Open the free JavaScript obfuscatorFrequently asked questions
What is a React obfuscator?
Can I obfuscate React source directly?
How do I add Shield to a React app?
Does obfuscation break React?
Is it free?
Can obfuscated React be reversed?
What is the best React obfuscator?
Protect your React application with
ByteHide Shield
Obfuscation is one layer. ByteHide Shield adds code virtualization, runtime self-protection, and advanced configuration, built into your React pipeline.
