You are here

How to Hide API Keys When Building Web Apps On CodePen

Back when I first joined ProgrammableWeb, I stumbled across and fell in love with the the way you could develop and fork proof-of-concept web apps that consumed APIs. It's sort of like Github without the Git but with an interactive coding environement. The whole community can see what you're up to and other users can run, copy and fork your code. Maybe make improvements. CodePen is very much like JSFiddle, Plunker, and JSBin. For many developers, it's often a question of which one they stumbled upon first.

CodePen let's you embed your app the same way you embed a YouTube video on any webpage. So, when I first found it, I thought it would be cool to just write little apps that consume APIs show the results in a CodePen "pen" and then embed them in articles about those APIs on ProgrammableWeb. One of the downsides to doing this I discovered was that there was no easy way to hide my API key when my app was consuming some API. So, if I hosted the app on CodePen, then anyone could come, inspect my code, and steal my API Key. But now, the folks at CodePen have solved that problem with a cool workaround that they published earlier this month.

According to a blog post that was posted last week by CodePen, there's really no special facility for dealing with the problem.  "At the moment, CodePen doesn't have any great place for you to store secrets" says the post. "As in, a private place for something like an API key you don't want the world to see." But fortunately, there is a place to hide the API key on CodePen's servers in a way that other developers can't see it; in the localStorage variable. Check out the blog post (link below) to learn more.

Be sure to read the next Application Development article: Why Many Developers Choose Kubernetes' Over AWS for Managing Containers

Original Article

window.prompt and localStorage for API Keys