Let’s say you wanted to use some API in a Pen or Project here on CodePen, and that API required you to have an API Key.

  .then(response => {/* do something */});

At the moment, CodePen doesn’t have any great place for you to store “secrets”. As in, a private place for something like an API key you don’t want the world to see.

When you’re working somewhere you can spin up your own servers, a common technique is to make your own little proxy service. Instead of making an Ajax call directly to the API, you make the Ajax call to your own server-side file, which makes the request for you and returns the result. That way you can hide your API in a server-side file that isn’t visible in the front-end code. If you want to spin up a server elsewhere to do this kind of thing, of course, you’re free to do that, but there isn’t a way directly on CodePen to do that.

There is a workaround right here on CodePen though, and that would be to just tuck your API key in something like localStorage, so that it’s available to for use to you but it isn’t directly in your code.

Here’s a very simple way to do that, where you prompt() for the key and save it, so it only asks you once.

See the Pen Save API Key to localStorage by Chris Coyier (@chriscoyier) on CodePen.