SaltyKeys.js - Client-Side API Key Obfuscation for CodePen

Important: SaltyKeys is not a security solution. It's an educational tool to demonstrate context-binding and obfuscation techniques. For production applications, always use server-side approaches for managing API keys.

What is SaltyKeys.js?

SaltyKeys.js is a specialized JavaScript library designed to help developers working with CodePen projects that need to use non-sensitive API keys. It provides a client-side approach to obfuscating and verifying API keys, binding them to a specific CodePen context to help prevent casual extraction.

Context-Aware

Keys are bound to specific CodePen IDs, making them usable only in the originating environment. This helps prevent simple copy-paste extraction of your keys.

Multi-Level Obfuscation

Uses a combination of encoding techniques, timestamps, and random nonces to obscure API keys beyond simple base64 encoding.

Configurable

Can be configured for different environments beyond CodePen with custom URL patterns and environment settings.

Why SaltyKeys?

When developing on CodePen or similar platforms, you might need to use API keys for external services. Exposing these keys directly in client-side code makes them easily accessible to anyone viewing your pen. SaltyKeys helps address this challenge by:

Adding a layer of obfuscation beyond simple encoding
Making keys context-dependent so they don't work when copied elsewhere
Adding metadata like timestamps and nonces for extra complexity
Providing a simple API for generating and retrieving keys

How To Use

Include the Library

Add SaltyKeys.js to your project:
```
<script src="SaltyKeys.js"></script>
```

Configure (Optional)

Configure the library with your preferred settings:

SaltyKeys.configure({
    urlPattern: /codepen\.io\/[^/]+\/(?:pen|debug|fullpage|fullembedgrid)\/([^?#]+)/,
    cacheEnabled: true,
    environment: 'codepen'
});

Generate a Salted Key

In the console or a separate script, generate your salted key:

const apiKey = 'my-api-key-123'; // Your actual API key
const saltedKey = SaltyKeys.generateSaltedKey(apiKey);
console.log('Your salted key:', saltedKey);

Store the Salted Key

Use the salted key in your CodePen project instead of the raw API key:

// In your main script
const saltedKey = 'your-salted-key-from-console';
const actualApiKey = SaltyKeys.getApiKey(saltedKey);

if (actualApiKey) {
    // Use the API key with your service
    initializeApiService(actualApiKey);
} else {
    console.error('Failed to retrieve API key');
}

Try the Interactive Demo →

When To Use

SaltyKeys is appropriate for:

CodePen demonstrations and experiments
Educational projects about API usage
Quick prototypes where API key security is not critical
Learning about client-side obfuscation techniques

SaltyKeys is not appropriate for:

Production applications
Projects handling sensitive or paid API services
Applications where security is a concern
As a replacement for proper server-side API key management

Best Practices for API Key Security

For proper API key security in production applications:

Use Server-Side Proxies

Create a server endpoint that makes API calls on behalf of your client-side code.

Environment Variables

Store API keys in environment variables on your server, never in client-side code.

Implement Rate Limiting

Prevent abuse by implementing rate limits on your API endpoints.

Use API Key Rotation

Regularly rotate your API keys to limit the impact of any exposure.

┌─────────────┐      ┌─────────────┐      ┌───────────────┐
│             │      │             │      │               │
│  Client     │──────│  API Proxy  │──────│  External API │
│  Browser    │      │  Server     │      │  Service      │
│             │      │             │      │               │
└─────────────┘      └─────────────┘      └───────────────┘
     No keys           Secure key
                      management