How To Hide API Keys in HTML5 Storage For Public Code Samples

JS Bin on

Editor's Note: The interactive window above is an embedded "Bin", the canonical version of which can be found on JSBin. It offers you the ability to experiment with the Sample Code in place (no need to cut and paste it to your own environment). You can change the HTML, the CSS, and/or the JavaScript and any changes you make will be reflected in the Output pane on the right hand side (the resulting web page). Go ahead and play with it! You can't hurt it. Try resizing the panes by clicking and dragging their vertical borders. If you click the JSBin button in the top left hand corner, it will give you the ability to edit the Bin over on  If you click the Save button next to it, it will give you the opportunity to Clone the same Bin under your own JSBin account. Whether you're working in the embedded version or on JSBin's site, you can view the Bin's Console. There are five buttons at the top-center of the interactive window above. Each button toggles the corresponding pane on and off. Note that this feature may not work 100% in some browser's private browser windows.

For a few years now, we’ve been talking about including an interactive coding element into ProgrammableWeb’s developer tutorials most of which teach readers how to access an API. I’ve always enjoyed working with as a way of whipping up some minimally viable clients-side Javascript to play with some API just to get a feel for what the API can do and the data it returns. 

When viewed on the CodePen site, a CodePen “pen”  typically offers four panes; one for the HTML of the web page you’re building, one for the CSS that’s applied to that web page, one for the Javascript that handles the scripting of that web page, and finally, one for what the resulting web page looks like as a result of your HTML, CSS, and Javascript.  

A Pen on CodePen typically has 4 Panes: ones for HTML, CSS, Javascript, and the resulting Web page

Like a YouTube video, the entire pen can be embedded into another web page. The web app works within that embedded player and, if you subscribe to CodePen's Pro level as ProgrammableWeb tried, all of the interactivity of seeing what happens when you play with the code can happen in place without leaving the web page that the pen is embedded on. We thought that this made it very suitable for ProgrammableWeb’s developer tutorials.

However, after some experimentation, we shifted to a Codepen competitor called JSBin. We switched for four primary reasons. First, both offer a Javascript console to which all kinds of output can be echoed for debugging purposes. However, whereas that console is available to embedded users of JSBin at the time of publication of this article, it was not available to users of the embedded version of Codepen. Second, JSBin included a much more comprehensive list of frameworks and tooling (like JQuery) that could be imported via menu. Third, in the embedded version of JSBin, the vertical borders between the different panes can be dragged back and forth so that user can resize the different panes to their heart's content. With the embedded version of Codepen, the panes cannot be resized. Lastly, JSBin did not block the usage of external image files for use with HTML's <IMG> tag the way Codepen did. 

So, as you can imagine, we can develop the code in a JSBin bin, and then embed the bin right on one of our pages. Developers can come, read the tutorial, play with the code, copy the code to their clipboards, or press JSBin's "Save"  button to clone our bin into a bin of their own. Like the facilities of many API developer portals that allow for experimenting with code without leaving the Portal, we think of these as "playgrounds."

This is not meant to be a review of JSBin and CodePen and some of you who are reading this may have already established a preference for other competitors like JSFiddle or plunker

Hiding API Keys For Public Code Samples

Over the years, one downside we’ve seen to publicly shared Source Code that demonstrates the consumption of an API (for example, a code sample that an API provider might include in its API Documentation) is how that source code must deal with API keys. API keys are often required to access an API and API providers issue them on a per developer or per application basis. Unlike your house or car keys, API keys by themselves should not be considered an API security mechanism. But they’re a great way for API providers to, within their dashboards, tie API usage to certain developers or applications. 

When sharing source code publicly, it’s a really bad idea to leave any API keys hard-coded into that source code. When you do that, you’re basically sharing something that’s confidential to you with the world. You really don’t want other developers copying and pasting  your key into their code. 

One way some developers handle this is they chop their API Key out of the code they're sharing, and its place, they substitute a placeholder. Maybe something that says <PUT YOUR API KEY HERE>

But with interactive coding services like JSBin and CodePen, there’s actually an even better way that will work with any Javascript-backed web app. Last year, CodePen published a tip regarding an alternative solution. Instead of including the API key (or placeholder) in the code that you might be sharing through CodePen or JSBin, prompt the end-user of the pen for their API key at runtime. Then, store whatever key they supply into local HTML5 storage so they don’t have to enter it over and over again.

This way, no matter who comes and uses the pen, s/he has to BYOAK (Bring Your Own API Key) and the same pen works for everyone without modification. 

So, while it was one thing for us here at ProgrammableWeb to write about it as we did, it’s another to actually do it.  After all, it really didn't take a lot of work. So, what I’ve done is I’ve built a bin whose only purpose in life is to demonstrate this concept. It doesn’t actually access an API. It’s meant to work in such a way that you can just cut and paste all of it into your own code. 

Yes, it’s not particularly elegant. Like I said earlier, it’s just minimally viable to get you started. We realize there are different ways to accomplish the same thing. But minimally, this code has buttons to prompt the user for an API key, to display the API key on the web page (if one has been stored in HTML5 storage), to wipe the display of the API key (but not necessarily from storage), and to clear the HTML5 storage of the API key. You will see this code appear in many of our forthcoming tutorials.

Be sure to read the next Application Development article: How To Get YouTube Playlist Contents from the YouTube Data API