Paste API Private Keys in Codepen?

Many of the assignments ask that we show our work in CodePen. However, many of the assignments also require API requests which expose our private API keys.

Many of the API docs say to not expose the secret API keys in your js. If that’s the case, how do I post to Codepen without exposing it? :thinking:

They’re all free accounts API anyway… they’re giving away these free API accounts like candy to anybody.

Now, if it’s a paid/pro API account, it would be a different matter.

Any api key on the client will be noticeable, there is really no way to hide it. Usually the server gets the data, and then sends the code to the browser with the data already there. The purpose of hiding the key is so others can’t steal it. If other’s get your key, they can use it to request data from the API - costing you more money as you only get so many requests for data or the company charges you more. As mentioned above you don’t really need to hide the key if its free because thieves aren’t interested in it.


If for some reason you absolutely have to, and to answer your question, you can do so easily by making your own api for the api:

  • Go to www.glitch.com
  • Get the data (example)
  • Create an endpoint with Express and make sure you allow cross-origin to codepen
  • BOOM your key is hidden on codepen.
  • I really have no idea why you would even want to do this :unamused:
1 Like

To add to the Glitch suggestion that @IsaacAbrahamson mentioned, @deuscode actually did just that last week! Have a look at this post and scroll down to the fifth post for a Glitch template that can be easily remixed!

Good luck! :slight_smile:

2 Likes