Interactive Demo

Caution

These demos simulate a CodePen environment. The salted keys generated here are specific to each demo pen — they won’t be portable between pens.

Demo 1 — Generate and decode a key

This pen demonstrates the full workflow: configure SaltyKeys, generate a salted key in the console, then decode it.

Open in CodePen

Demo 2 — Context validation

This pen generates a salted key, then shows that changing the simulated pen ID causes getApiKey() to return null.

Open in CodePen

Demo 3 — Custom URL pattern

Configure SaltyKeys for a non-CodePen environment using a custom URL pattern.

Open in CodePen

Running demos locally

If you want to test SaltyKeys.js without CodePen:

Browser console

1. Open any webpage in your browser
2. Open Developer Tools → Console
3. Paste the contents of SaltyKeys.js
4. Override getPenId to return a fixed string:

   SaltyKeys.getPenId = () => 'test-id';
   const salted = SaltyKeys.generateSaltedKey('my-key');
   console.log(SaltyKeys.getApiKey(salted)); // → 'my-key'

Node.js (limited)

SaltyKeys.js uses browser globals (window, document, btoa). To test in Node.js, polyfill them:

global.window = { location: { href: 'https://codepen.io/user/pen/AbCdEf' } };
global.document = { querySelector: () => null };
global.btoa = (s) => Buffer.from(s, 'binary').toString('base64');
global.atob = (s) => Buffer.from(s, 'base64').toString('binary');

// Then load SaltyKeys
eval(require('fs').readFileSync('SaltyKeys.js', 'utf8'));

console.log(SaltyKeys.getPenId()); // → 'AbCdEf'