Build

Emulating a Secure API Server in a Chrome Web Browser

4 min read Michael Carroll on Sep 18, 2014
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

How to run a server in a web browser. In this case, we'll write the server in JavaScript on the front-end. The server handles permissions for authorization.

In our previous tutorial on private chat, we left off letting users grant themselves access to protected channels. However, obviously this isn’t very secure if every client has access to the secret key. It’s not private chat if anyone can grant access to themselves. Let’s change that.

In this tutorial, we’ll walk you through how to run a secure API server in a web browser. In this case, we’ll write the server in JavaScript on the front-end. To control authorization, we’ll move the PubNub Access Manager (PAM) permissions “server-side” in a simulated NodeJS environment.

Our “server” will be created in a second file that handles permissions and acts as an administrator, and will also handle our game logic or “truth.”

Wait what? Why would you ever want to do this?

Instead of building out cloud servers, you can run a secure API server on your own machine, all in a web browser. You can open up your laptop, and essentially your laptop becomes the server. No backend required.


We’ve now covered both building a multiplayer game lobby with a chatroom and the different ways we can use matchmaking to connect two different users. Here’s what we’ve covered so far:

This blog post is Part Twelve of PubNub Developer Evangelist Ian Jennings‘s series on creating a multiplayer game with JavaScript.


Creating a Client-side Secure API “Server” with JavaScript

In most instances, a server would be written in NodeJS, Ruby, Python, or PHP. In our case, we’re going to write the server in Javascript on the front-end.

This is not traditionally the way we would build a game backend, but our front-end PubNub Javascript SDK will translate to NodeJS with minimal effort. Note: PubNub supports SDKs for more than 50 languages, all of which can be seen here.

Getting Started with HTML and CSS

You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal.

We’ll start by creating a new html file, which should look familiar.

You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal. Once you have, clone the GitHub repository, and enter your unique PubNub keys on the PubNub initialization, for example:

Here we’ve created another chat window which has no input. It’s going to server as a convenient log of activity happening in our application.

We’ll then add some basic CSS.

Coding the Secure API Server

Let’s start coding our server. The app will start exactly the same as in the past. Copy the same publish_keysubscribe_key, and secret_key from the other examples.

Granting Permissions Globally on the Server-side

Great! Now we’re going to add a global permissions grant to everyone on our server.

In the last Private Chat tutorial, we created a new auth_key on every page load, and then granted that auth_key access. In this example, we omit the auth_key which will grant everyone permissions.

We grant permissions to two channels at a time by using a comma separated list.

Then we subscribe to the channel. When messages come through, we output them to the server output box. We use JSON.stringify to format the object as JSON.

Now when we talk in “Lobby Chat” we should see the message output in the “Server Output.”

Private Chat Permissions

Remember how our client gave itself permission to private chat channels on request? Now we move that logic to the server.

When a new-private-chat message comes through, we grant the uuid who sent the request permission and the target using a comma separated list just like we did with multiple channels before.

We’ll also output a special alert into the server output that shows we granted a user access.

The Code So Far

The full code looks like this:

Remove secret_key and grants from Client

There’s one more part. Sure we can see the output on the server, but the client still has access to the secret_key and is granting permissions!

Back on the “client code” (the one with “Lobby Chat”) we remove the secret_key fromPUBNUB.init().

Now that the secret_key has been removed we should remove our grants as well. There are two when the app starts:

And there is one when a new PrivateChat is made.

Remove all these grants, and we’re done!

Full Code

The Secure Demo

The Server:

See the Pen Memewarz – Server Side [server] by Ian Jennings (@ianjennings) on CodePen.0

The Client:

See the Pen Memewarz – Server Side [client] by Ian Jennings (@ianjennings) on CodePen.0

More from PubNub

NPP and HIPAA: Notice of Privacy Practices Definition
Healthcare CategoryJan 6, 20235 min read

NPP and HIPAA: Notice of Privacy Practices Definition

A Notice of Privacy Practices (NPP) is one of the requirements of HIPAA and helps patients understand their personal data rights.

Michael Carroll

Michael Carroll

HIPAA Violation Examples
Healthcare CategoryJan 5, 20236 min read

HIPAA Violation Examples

HIPAA violations can be financially expensive and devastating to a brand. Examine some examples of HIPAA violations, and learn...

Michael Carroll

Michael Carroll

HIPAA Technical Safeguards: How To Protect Sensitive Data
Healthcare CategoryJan 5, 20236 min read

HIPAA Technical Safeguards: How To Protect Sensitive Data

HIPAA covered entities must follow the five technical safeguards to achieve HIPAA compliance and prevent data corruption.

Michael Carroll

Michael Carroll