@bytehide/angular-shield

A powerful plugin for Angular projects that enables JavaScript obfuscation to enhance the security of your codebase. This plugin integrates seamlessly with your Angular build process to obfuscate sensitive files, protecting your intellectual property.

Features

• Code Obfuscation: Protect your JavaScript code from reverse engineering
• Angular CLI Integration: Works seamlessly with Angular CLI build process
• Customizable Options: Configure obfuscation settings to suit your needs
• File Exclusion: Exclude specific files from obfuscation
• Framework Detection: Automatically detects Angular framework and version

Installation

Install the plugin using npm or yarn:

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

Usage

Method 1: Post-Build Script

Create a post-build script to obfuscate your Angular build output:

// scripts/obfuscate.ts
import { createAngularShield } from '@bytehide/angular-shield';

const shield = createAngularShield({
  projectToken: 'your-project-token', // Required: Your ByteHide project token
  replace: true,                      // Optional: Replace original files
  controlFlowFlattening: true,        // Optional: Enable control flow flattening
  debugProtection: false,             // Optional: Enable debug protection
  devtoolsBlocking: false,            // Optional: Enable devtools blocking
  exclude: ['main.js'],               // Optional: Exclude specific files
  obfuscatedExtension: '.obf',        // Optional: Extension for obfuscated files
});

// Apply obfuscation to the dist folder
await shield.applyShield();

Add to your package.json:

{
  "scripts": {
    "build": "ng build",
    "build:prod": "ng build --configuration production",
    "postbuild:prod": "ts-node scripts/obfuscate.ts"
  }
}

Method 2: Custom Builder

Create a custom Angular builder:

// builders/bytehide-builder.ts
import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect';
import { createAngularShield } from '@bytehide/angular-shield';

interface ByteHideOptions {
  projectToken: string;
  replace?: boolean;
  controlFlowFlattening?: boolean;
  debugProtection?: boolean;
  devtoolsBlocking?: boolean;
  exclude?: string[];
  obfuscatedExtension?: string;
}

export default createBuilder<ByteHideOptions>(async (options, context) => {
  try {
    const shield = createAngularShield({
      projectToken: options.projectToken,
      replace: options.replace ?? true,
      controlFlowFlattening: options.controlFlowFlattening ?? true,
      debugProtection: options.debugProtection ?? false,
      devtoolsBlocking: options.devtoolsBlocking ?? false,
      exclude: options.exclude ?? [],
      obfuscatedExtension: options.obfuscatedExtension ?? '.obf',
    });

    await shield.applyShield();
    
    return { success: true };
  } catch (error) {
    context.logger.error('ByteHide Shield obfuscation failed:', error);
    return { success: false, error: error.message };
  }
});

Method 3: Angular CLI Hook

Use Angular CLI hooks in your angular.json:

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/your-app"
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all"
            }
          }
        },
        "obfuscate": {
          "builder": "./builders/bytehide-builder",
          "options": {
            "projectToken": "your-project-token"
          }
        }
      }
    }
  }
}

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | projectToken | string | Required | Your ByteHide project token | | replace | boolean | false | Whether to replace original files | | obfuscatedExtension | string | .obf | Extension for obfuscated files | | controlFlowFlattening | boolean | true | Enable control flow flattening | | debugProtection | boolean | false | Enable debug protection | | devtoolsBlocking | boolean | false | Enable devtools blocking | | exclude | string[] | [] | Files to exclude from obfuscation |

Excluded Files

The plugin automatically excludes common Angular files that shouldn't be obfuscated:

• main.js - Application entry point
• polyfills.js - Browser polyfills
• runtime.js - Webpack runtime
• styles.js - Compiled styles
• vendor.js - Third-party libraries
• common.js - Common modules

Example

Here's how an obfuscated Angular file is generated:

• Input: dist/your-app/main.js
• Output: dist/your-app/main.obf.js (if replace is false) or replaces the original file

Integration with Angular CLI

Using with ng build

# Build your Angular app
ng build --configuration production

# Run obfuscation
npm run postbuild:prod

Using with custom builders

# Build and obfuscate in one command
ng run your-app:obfuscate

Limitations

• Requires a valid ByteHide project token
• Obfuscation might slightly increase build time
• Some Angular-specific files are automatically excluded for compatibility

License

This project is licensed under the MIT License. See the LICENSE file for details.

Happy coding but keep it safe with @bytehide/angular-shield! 🛡️