🔮 Obscura — JavaScript Obfuscator

Protect your JavaScript source code directly in the browser. No uploads, no server, fully client-side.

🔗 Live Demo: https://obscura-nine-peach.vercel.app/

📖 Table of Contents

Overview
Features
How It Works
Getting Started
Obfuscation Options
Target Environments
Engine System
Third-Party Libraries / APIs
Security Headers
- Cloudflare Pages (_headers)
- Vercel (vercel.json)
Deployment
Privacy
File Structure

Overview

Obscura is a fully client-side JavaScript obfuscation tool built as a single index.html file. It allows developers to obfuscate their JavaScript code directly in the browser without sending any code to a server.

The tool uses a dual-engine approach:

Full engine — javascript-obfuscator (primary, all features)
Lite engine — Terser (fallback, if primary CDN fails)

Features

✅ Paste or upload .js, .ts, .mjs, .cjs files
✅ Drag & drop file support
✅ 10+ configurable obfuscation options
✅ Dual-engine with automatic fallback
✅ Capability guard — warns before running unsupported features
✅ Progress bar animation during processing
✅ Copy to clipboard & download obfuscated output
✅ Input/output character count + size ratio stats
✅ DevTools protection (blocks right-click, F12, Ctrl+Shift+I, etc.)
✅ Responsive layout (mobile-friendly)
✅ Built-in Help page
✅ Zero dependencies, single HTML file
✅ No analytics, no cookies, no data collection

How It Works

User pastes or uploads JavaScript code into the Input panel.
The tool reads the selected obfuscation options.
On clicking OBFUSCATE → (or pressing Ctrl+Enter):
- The engine is detected (full or lite).
- A capability guard checks if any active options are unsupported by the current engine — if so, a modal warns the user.
- The obfuscation runs entirely in the browser.
The obfuscated code appears in the Output panel.
User can Copy or Download the result as .obfuscated.js.

Getting Started

Since Obscura is a single HTML file, no build step or installation is required.

# Clone the repository
git clone https://github.com/andiasriefail2004/Obscura—JavaScript-Obfuscator.git

# Open directly in browser
open index.html

Or just visit the live demo: https://obscura-nine-peach.vercel.app/

Obfuscation Options

Option	Engine	Description
Rename Variables	Full + Lite	Replaces all variable, function, and parameter names with short unreadable identifiers.
String Array	Full only	Extracts all string literals into a hidden encoded array and replaces them with lookup calls.
Dead Code Injection	Full only	Injects random fake code blocks that never execute, making the real flow harder to follow. ⚠ Can increase output size by up to 200%.
Control Flow Flattening	Full only	Restructures every function into a flat dispatcher loop, hiding the original logical order. ⚠ Can slow runtime by up to 1.5×.
Self Defending	Full only	Makes the obfuscated code break if it is reformatted or beautified.
Debug Protection	Full only	Continuously forces the debugger to activate, making DevTools nearly unusable on the output. ⚠ May freeze the browser tab.
Drop Console	Full + Lite	Replaces all `console.*` calls with empty functions, silencing runtime logging.
Drop Debugger	Full + Lite	Removes all `debugger;` statements from the output.
Numbers to Expressions	Full only	Converts numeric literals into complex arithmetic expressions that evaluate to the same value.
Split Strings	Full only	Splits string literals into smaller chunks joined at runtime, making strings harder to search.

Identifier Style (Full only)

Value	Description
`hexadecimal`	Identifiers like `_0x1a2b3c`
`mangled`	Short identifiers like `a`, `b`, `c`
`mangled-shuffled`	Short identifiers in shuffled order

Target Environments

Target	Description
Browser	Standard web page. Default — suitable for most browser JS.
Browser (no eval)	Same as Browser but avoids `eval()`. Use with strict CSP policies.
Node.js	Server-side Node.js. Disables browser-specific protections relying on `window`/`document`.
Service Worker	Service Worker context. Uses `self` global instead of `window`.
Userscript	Tampermonkey / Greasemonkey sandbox. Defenses adjusted for userscript environment.
Bytenode	Prepares output for compilation into V8 cached bytecode (`.jsc`) via bytenode.

Engine System

Obscura loads the primary engine (javascript-obfuscator) asynchronously from CDN on startup. If the CDN fails to load, it falls back to Terser (lite engine).

Startup
  └── Load javascript-obfuscator from jsDelivr CDN
        ├── Success → window._obfEngine = 'full'
        └── Fail    → Load source-map.js → Load terser bundle.min.js
              ├── Success → window._obfEngine = 'lite'
              └── Fail    → window._obfEngine = null (shows error)

When the engine is lite, features exclusive to full (String Array, Dead Code Injection, etc.) are blocked. If the user has those options enabled, a capability modal appears before processing, listing which features will be skipped and which will still run.

Third-Party Libraries / APIs

Obscura loads all libraries from jsDelivr CDN — no custom backend API is used.

Library	Role	CDN URL
javascript-obfuscator	Primary obfuscation engine (full engine)	`https://cdn.jsdelivr.net/npm/javascript-obfuscator/dist/index.browser.js`
source-map	Dependency required by Terser (loaded only on fallback)	`https://cdn.jsdelivr.net/npm/source-map@latest/dist/source-map.js`
Terser	Fallback minification/obfuscation engine (lite engine)	`https://cdn.jsdelivr.net/npm/terser@latest/dist/bundle.min.js`
Google Fonts	Loads `JetBrains Mono` and `Inter` typefaces for the UI	`https://fonts.googleapis.com` / `https://fonts.gstatic.com`

No server-side API calls are made with user code. All processing happens in the browser.

Security Headers

Both deployment configurations apply the same four security headers to all routes.

Header Reference

Header	Value	Purpose
`Content-Security-Policy`	(see below)	Controls which resources the browser is allowed to load
`X-Content-Type-Options`	`nosniff`	Prevents MIME type sniffing
`X-Frame-Options`	`DENY`	Blocks the page from being embedded in iframes
`Referrer-Policy`	`strict-origin-when-cross-origin`	Limits referrer info sent to other origins

Content-Security-Policy Breakdown

default-src 'self'

By default, only same-origin resources are allowed.

script-src 'self' 'unsafe-inline' 'unsafe-eval'
  https://cdn.jsdelivr.net/npm/javascript-obfuscator/dist/index.browser.js
  https://cdn.jsdelivr.net/npm/source-map@latest/dist/source-map.js
  https://cdn.jsdelivr.net/npm/terser@latest/dist/bundle.min.js

unsafe-inline is required for the inline <script> blocks. unsafe-eval is required because javascript-obfuscator uses eval() internally. Only the three specific jsDelivr CDN scripts are whitelisted.

style-src  'self' 'unsafe-inline' https://fonts.googleapis.com
font-src   'self' https://fonts.gstatic.com
connect-src 'self'
img-src    'self' data:
object-src 'none'
base-uri   'self'
frame-ancestors 'none'

data: is allowed under img-src to support the inline SVG favicon. frame-ancestors 'none' reinforces the X-Frame-Options: DENY directive at the CSP level.

Cloudflare Pages (`_headers`)

Place _headers in the root of your repository (next to index.html). Cloudflare Pages picks it up automatically.

/*
  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net/npm/javascript-obfuscator/dist/index.browser.js https://cdn.jsdelivr.net/npm/source-map@latest/dist/source-map.js https://cdn.jsdelivr.net/npm/terser@latest/dist/bundle.min.js; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; connect-src 'self'; img-src 'self' data:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'
  X-Content-Type-Options: nosniff
  X-Frame-Options: DENY
  Referrer-Policy: strict-origin-when-cross-origin

The /* pattern applies the headers to every page and asset.

Vercel (`vercel.json`)

Place vercel.json in the root of your repository. Vercel reads it on each deployment.

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net/npm/javascript-obfuscator/dist/index.browser.js https://cdn.jsdelivr.net/npm/source-map@latest/dist/source-map.js https://cdn.jsdelivr.net/npm/terser@latest/dist/bundle.min.js; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; connect-src 'self'; img-src 'self' data:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'"
        },
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "X-Frame-Options", "value": "DENY" },
        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }
      ]
    }
  ]
}

The source: "/(.*)" regex matches every route.

Deployment

Vercel

Push index.html and vercel.json to a GitHub/GitLab repository.
Import the repository at vercel.com.
No build command or output directory needed — Vercel serves index.html directly.
Security headers are applied automatically via vercel.json.

Cloudflare Pages

Push index.html and _headers to a GitHub/GitLab repository.
Create a new Pages project at pages.cloudflare.com.
No build command needed — set the output directory to / (root).
Security headers are applied automatically via _headers.

Static / Self-hosted

Just serve index.html from any static file server (Nginx, Apache, GitHub Pages, etc.). Configure the security headers manually in the server config if needed.

Privacy

Your code is never uploaded or stored. All obfuscation runs entirely inside your browser.
This tool makes no server requests with your code. The only network activity is loading the obfuscator libraries from jsDelivr CDN on first use.
No analytics, cookies, or personally identifiable information are collected.
Third-party libraries (javascript-obfuscator and Terser) are open-source and can be audited independently.

File Structure

.
├── index.html      # The entire application — UI, styles, and logic in one file
├── _headers        # Security headers for Cloudflare Pages deployment
├── vercel.json     # Security headers + config for Vercel deployment
└── README.md       # This file

License

MIT — free to use, modify, and deploy.

Name		Name	Last commit message	Last commit date
LICENSE		LICENSE
README.md		README.md
_headers.txt		_headers.txt
index.html		index.html
vercel.json		vercel.json

Navigation Menu

Repository files navigation

🔮 Obscura — JavaScript Obfuscator

📖 Table of Contents

Overview

Features

How It Works

Getting Started

Obfuscation Options

Identifier Style (Full only)

Target Environments

Engine System

Third-Party Libraries / APIs

Security Headers

Header Reference

Content-Security-Policy Breakdown

Cloudflare Pages (`_headers`)

Vercel (`vercel.json`)

Deployment

Vercel

Cloudflare Pages

Static / Self-hosted

Privacy

File Structure

License

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

🔮 Obscura — JavaScript Obfuscator

📖 Table of Contents

Overview

Features

How It Works

Getting Started

Obfuscation Options

Identifier Style (Full only)

Target Environments

Engine System

Third-Party Libraries / APIs

Security Headers

Header Reference

Content-Security-Policy Breakdown

Cloudflare Pages (_headers)

Vercel (vercel.json)

Deployment

Vercel

Cloudflare Pages

Static / Self-hosted

Privacy

File Structure

License

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Cloudflare Pages (`_headers`)

Vercel (`vercel.json`)