Webpack Integration

ByteHide Shield provides a dedicated Webpack plugin that allows you to seamlessly protect your JavaScript code during the build process. This guide explains how to install and configure the Shield Webpack plugin.

Installation

Install the ByteHide Shield Webpack plugin from npm:

npm install --save-dev @bytehide/webpack-shield

Or with yarn:

yarn add --dev @bytehide/webpack-shield

Basic Setup

Add the Shield plugin to your Webpack configuration:

const ByteHideShieldPlugin = require('@bytehide/webpack-shield');

module.exports = {
  // ... your webpack configuration ...
  plugins: [
    new ByteHideShieldPlugin({
      projectToken: 'your-project-token', // Required: Get this from your ByteHide account
    })
  ]
};

With this minimal configuration, Shield will apply default protections to your bundled code.

Configuration Options

The Webpack plugin accepts the following options:

Advanced Configuration

For more advanced use cases, you can provide additional Shield protection options:

const ByteHideShieldPlugin = require('@bytehide/webpack-shield');

module.exports = {
  // ... your webpack configuration ...
  plugins: [
    new ByteHideShieldPlugin({
      projectToken: 'your-project-token',
      replace: false,
      obfuscatedExtension: '.obf',
      exclude: ['vendor.js', 'polyfills.js'],
      include: ['.js', '.mjs', '.cjs', '.jsx'],
      config: {
        controlFlowFlattening: true,
        debugProtection: true,
        devtoolsBlocking: true,
        stringArray: true,
        stringArrayEncoding: ['base64'],
        selfDefending: true,
        identifierNamesGenerator: 'hexadecimal'
      }
    })
  ]
};

Environment-Specific Configuration

You can apply different protection settings based on the environment:

const ByteHideShieldPlugin = require('@bytehide/webpack-shield');

module.exports = (env, argv) => {
  const isProd = argv.mode === 'production';
  
  return {
    // ... your webpack configuration ...
    plugins: [
      // Only apply Shield in production builds
      isProd && new ByteHideShieldPlugin({
        projectToken: process.env.BYTEHIDE_PROJECT_TOKEN,
        replace: true,
        config: {
          // More aggressive settings for production
          controlFlowFlattening: true,
          debugProtection: true,
          devtoolsBlocking: true
        }
      })
    ].filter(Boolean) // Filter out falsy plugins
  };
};

File Exclusions

You can exclude specific files from obfuscation using the exclude option:

const ByteHideShieldPlugin = require('@bytehide/webpack-shield');

module.exports = {
  // ... your webpack configuration ...
  plugins: [
    new ByteHideShieldPlugin({
      projectToken: 'your-project-token',
      exclude: [
        'node_modules/**/*.js', // Exclude all node_modules
        'src/vendor/**/*.js',    // Exclude vendor files
        'src/polyfills.js'       // Exclude specific file
      ]
    })
  ]
};

Features

The Webpack plugin for ByteHide Shield provides the following features:

• Advanced Obfuscation: Implements various obfuscation techniques to protect your code
• JavaScript file protection: Compatible with .js, .mjs, .cjs, and .jsx files
• Build-time obfuscation: Integrate protection directly into your build process
• Watermarking for protected files: Add watermarks to identify protected code

Complete Example

Here's a complete example of a Webpack configuration with Shield:

const path = require('path');
const ByteHideShieldPlugin = require('@bytehide/webpack-shield');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = (env, argv) => {
  const isProd = argv.mode === 'production';
  
  return {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react']
            }
          }
        }
      ]
    },
    optimization: {
      minimize: isProd,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            format: {
              comments: false,
            },
          },
          extractComments: false,
        }),
      ],
    },
    plugins: [
      isProd && new ByteHideShieldPlugin({
        projectToken: process.env.BYTEHIDE_PROJECT_TOKEN || 'your-project-token',
        replace: true,
        exclude: ['vendor/**/*.js'],
        config: {
          controlFlowFlattening: true,
          debugProtection: true,
          devtoolsBlocking: true,
          stringArray: true,
          stringArrayEncoding: ['base64'],
          selfDefending: true,
          identifierNamesGenerator: 'hexadecimal',
          reservedNames: [
            '^React$', '^useState$', '^useEffect$',
            '^render$', '^Component$'
          ]
        }
      })
    ].filter(Boolean),
    devtool: isProd ? false : 'source-map'
  };
};

Example Output

If you have an index.js file with this content:

console.log("Hello, world!");

The processed result will include a unique marker and the obfuscated code:

// _0xBHSHLD_<uniqueId>_marker
console.log(_0x123456("Hello, world!"));

Troubleshooting

Common Issues

Network Error

If you encounter network errors during the build process:

• Ensure you have an active internet connection as the plugin uses a remote service for code obfuscation
• Check if your network firewall is blocking requests to the ByteHide service

Invalid Token

If you see an error about an invalid token:

• Verify that your project token is valid and correctly typed
• Make sure the token has permissions for JavaScript projects

Next Steps

• Get your project token
• Learn about protection options
• Configure exclusions and reserved items