In this tutorial, we dive into a simple example of how to deploy highly-secure encrypted data streams with advanced serverless event handling, based on meta attributes. We’ll demonstrate the encryption in a realtime Angular 2 web app.

Encryption is Paramount

Encryption is extremely important for a variety of use cases, from healthcare and government to advanced IoT and messaging use cases. Using layers of encryption ensures that application data and functionality are safe from eavesdropping and tampering. However, once all the encryption is in place, it can be difficult to implement other features (such as alerting or quality of service).

In this application, we implement a message “severity” field so that users can tag message events with an importance level, and these tags can be used within our Functions handler to take specific actions (for example, calling an Ops Management API, sending an SMS or email, or even just decorating the message with additional meta attributes).

As realtime apps gain traction in real-world situations, there are three primary infrastructure requirements that come to mind.

High Availability: For services that provide critical services to connected vehicles, homes, and businesses, there can be no downtime. When all HVAC, doors, lights, security systems and windows are controlled by devices, that means there must always be a data connection!

High Performance: Since recording, processing media, encoding/decoding speech, and translating text are latency-critical operations (especially on slower, bandwidth-constrained mobile data networks), response time is critical for user experience and building trust.

High Security: These services carry private user communications and data that controls cars and homes, so there must be clear capabilities for locking down and controlling access to authorized users and applications.

Encryption and PubNub

These 3 requirements, Availability, Performance, and Security, are exactly where the PubNub Data Stream Network comes into the picture. PubNub is a global data stream network that provides “always-on” connectivity to just about any device with an internet connection (there are now over 70+ SDKs for a huge range of programming languages and platforms). PubNub’s Publish-Subscribe messaging provides the mechanism for secure channels in your application, where servers and devices can publish and subscribe to structured data message streams in realtime: messages propagate worldwide in under a quarter of a second (250ms for the performance enthusiasts out there).

In addition to those 3 strengths, we take advantage of Functions, an awesome new PubNub feature that allows us to decorate messages with supplementary data. In this article, we create a PubNub BLOCK of JavaScript that runs entirely in the network and analyzes message “meta” attributes (with zero knowledge of the message contents) to enable advanced processing so that the web client UI code can stay simple and just display the messages. With PubNub Functions, it’s very easy to integrate third-party applications into your data stream processing. You can find the complete catalog of pre-made Functions here.

As we prepare to explore our sample Angular2 web application with data stream encryption and meta attribute handling, let’s check out the underlying PubNub API features that make it all possible.

The first layer of security is high-grade HTTPS/TLS security. This applies to the PubNub connection itself and is enabled via the ssl:true configuration option. This means that traffic between your client app and PubNub is protected from eavesdropping (as long as the client is not configured to allow MITM/man-in-the-middle TLS traffic inspection). For more information, see this link.

The next layer of security is end-to-end encryption using 256-bit AES. To enable this, we use the cipherKey:'YOUR_SUPER_SECRET_CIPHER_KEY' attribute. When this feature is enabled, it means that even an observer inside the PubNub network could not decrypt your message payloads (only clients knowing the secret/shared key). For more information, see this link as well. Note: for maximum security, we advise that the cipherKey attribute (and ideally, other PubNub credentials) should only be transmitted to clients who have already been successfully authenticated using your application’s auth mechanism (in contrast to this sample app, which does not feature app-level authentication).

In addition, PubNub supports advanced capability-based access control using PubNub Access Manager (PAM). This allows developers to give fine-grained client access to applications that can expire at a specified time or last indefinitely. Although we won’t go into the details here, we highly recommend checking out the feature here.

This encryption covers a lot of ground in terms of the data stream messages themselves, but we thought it would be worthwhile to note a few commonly used items that aren’t guaranteed to be encrypted within the PubNub network (although they are encrypted over client TLS). You should be aware of these cases when designing your application.

Presence & Custom State : when using presence features and custom state, UUIDs and state values are not encrypted under the hood

Channel Names : channel names are not encrypted, so for maximum security make them hard to guess (or use PAM to restrict access)

Meta Attributes : in our case, this is a desirable feature (we use meta attributes for Functions signaling) – but just keep that in mind!

Since you’re reading this at PubNub, we’ll presume you have a realtime application use case in mind, such as ride-hailing, messaging, IoT or other. In the sections below, we’ll dive into the encrypted data stream use case, saving other security use cases for the future.

Obtaining your PubNub Developer Keys

The first things you’ll need before you can create a realtime application with PubNub are publish and subscribe keys. Just in case you haven’t already, you can create an account, get your keys and be ready to use the PubNub network in less than 60 seconds using the handy signup form.

Once you do that, the publish and subscribe keys look like UUIDs and start with “pub-c-” and “sub-c-” prefixes respectively. Keep those handy – you’ll need to plug them in when initializing the PubNub object in your HTML5 app below.

Setting up the BLOCK

With PubNub Functions, it’s really easy to create code to run in the network. Here’s how to make it happen:

Start the block, and test it using the “publish message” button and payload on the left-hand side of the screen.

That’s all it takes to create your serverless code running in the cloud!

Diving into the Code – the BLOCK

You’ll want to grab the 32 lines of BLOCK JavaScript and save them to a file, say, pubnub_encrypt_block.js. It’s available as a Gist on GitHub for your convenience.

First up, we create a function to handle incoming messages. You’ll notice a few comments here that describe the payload of the message. In our case, the message itself is encrypted, so we concentrate on the “meta” attributes.

Next, we take one of three actions based on the incoming severity meta attribute. In this case, we have placeholders for creating an “incident” with high severity, firing off an SMS, or sending email in the case of low severity.

Overall, we were pretty pleased that we could build a nifty UI with so few dependencies. And with that… on to the UI!

The User Interface

Here’s what we intend the UI to look like:

image

The UI is pretty straightforward – everything is inside a main-component tag that is managed by a single component that we’ll set up in the Angular2 code.

<body>
<main-component>
Loading...
</main-component>

Let’s skip forward and show that Angular2 component template. The h3 heading should be pretty self-explanatory. We provide a text box for the message, a select box for the severity and a simple button to perform the publish()action to send a request to be processed by the BLOCK.

The component UI consists of a simple list of events (in our case, the message objects). We iterate over the messages in the component scope using a trusty ngFor. Each message includes the data from the network. In our case, the payloads are encrypted and include a duplicate severity attribute (equal to the meta severity attribute) to simplify the UI code.

And that’s it – a functioning realtime UI in just a handful of code (thanks, Angular2)!

The Angular2 Code

Right on! Now we’re ready to dive into the Angular2 code. It’s not a ton of JavaScript, so this should hopefully be pretty straightforward.

The first lines we encounter set up our application (with a necessary dependency on the PubNub AngularJS service) and a single component (which we dub main-component).

The component has a constructor that takes care of initializing the PubNub service and configuring the channel name, auth keys, and initial values. NOTE: make sure the channel matches the channel specified by your BLOCK configuration and the BLOCK itself!

We also create a publish() event handler that performs the action of publishing the new message to the PubNub channel. Note that we use the meta attributes section to publish the severity attribute in the message envelope, and duplicate the severity attribute in the message itself for UI convenience.

Now that we have a new component, we can create a main module for the Angular2 app that uses it. This is pretty standard boilerplate that configures dependencies on the Browser and Forms modules and the PubNubAngular service.

All in all, we found it pretty easy to use advanced message processing features on encrypted data streams using the API, and we look forward to using some of the more advanced capabilities in our secure messaging applications!

Conclusion

Thank you so much for joining us in the encrypted data streams post of our Advanced Functions Techniques series! Hopefully it’s been a useful experience learning about working with encrypted data streams. In future articles, we’ll dive deeper into additional techniques for crafting Functions and integrating other nifty services in realtime web applications.

Stay tuned, and please reach out anytime if you feel especially inspired or need any help!