Pen ID extraction
Reads the CodePen URL, falling back to the canonical link when the demo runs inside an iframe.
01 · Boundary
This is for demos, not production secrets.
CodePen is public. If a demo calls a third-party API directly, putting a real key in source is a bad idea. The correct production answer is a server-side proxy that keeps the key off the client.
SaltyKeys.js is a smaller answer for demo contexts where a proxy is too much. It makes a copied token useless outside the original pen, but it is still obfuscation. Anyone with enough time and JavaScript skill can inspect client code.
Workflow
The pen ID becomes part of the token.
One-time generation
Run generateSaltedKey() from the console on the saved pen, then paste only the generated token.
Context validation
getApiKey() compares the embedded pen ID to the current pen ID before returning a key.
Custom environments
The URL pattern and environment label can be overridden for non-CodePen demo hosts.
02 · API
Three static methods cover the common flow.
| Method | Purpose |
|---|---|
SaltyKeys.configure(options) |
Override URL pattern, environment, and cache behavior. |
SaltyKeys.getPenId() |
Extract the current pen or page identifier. |
SaltyKeys.generateSaltedKey(apiKey) |
Generate a context-bound token from the real key. |
SaltyKeys.getApiKey(saltedKey) |
Return the key only when the current context matches the token context. |
03 · Use safely
Use the right pattern for the risk.
| Scenario | Recommendation |
|---|---|
| Classroom demo | Reasonable if the key is restricted and disposable. |
| Public CodePen experiment | Useful for lightweight friction, with strict API restrictions. |
| Production app | Use a server-side API proxy instead. |
| Paid or privileged API key | Do not expose it to client-side code. |