Fast communication has become increasingly easy with modern technology, but unfortunately this real-time interactivity brought with it the dangers of eavesdropping and data breaches. Private messages can potentially be read by third parties such as ISPs, organizations behind chat apps, governments, or people who came in possession of personal information illegally.
Ensuring that your web app is secure prevents all unintended parties from obtaining information, even in the case of a data breach, meaning that leaked conversations stay private.
The term security in web chat apps has various meanings. One trait that is often mentioned in publications is end-to-end encryption, which consists of encrypting the message while sending and decrypting upon receiving so that no party in between can easily read it without having the cipher key. The other often quoted feature is connection security provided by Transport Layer Security (TLS), often referred as Secure Socket Layer or SSL, which allows for secure and encrypted communication between the application and the backend server.
Secure web applications should also prevent common JavaScript vulnerabilities such as XSS attacks or stealing user’s personal data which could be later used for phishing attempts or getting access to a bank account of the attacked person.
Although it is one of the most talked about features, encryption is only one part of a secure web chat application. A secure web application should not only implement encryption using an algorithm to be considered safe, but it should also ensure that other layers of data protection, such as access control and permissions, are in place.
When it comes to application security, there are a number of different ways that third parties can use to gain unauthorized access to information. We’ll discuss a few of them here.
In terms of chat application security, since most of the content is dynamic and generally created by users, it’s safe to assume that at some point, one or more malicious users are going to appear and wreak havoc. These attacks are known as Cross-Site Scripting (XSS) and if handled incorrectly, these types of messages can end up as scripts executed on end users’ machines, ultimately leading to stolen credentials.
A man in the middle attack (MITM) is a practice in which two people think they communicate privately with each other but they’re being eavesdropped on by a third party without their consent. The third party may alter their messages in order to receive important information or they may simply keep collecting information.
End-to-end encryption is a system where only communicating users can read messages. The idea is that everyone—including Internet service providers, the company behind the app or malicious actors—cannot read the messages unintended for them as long as they don’t possess the encryption/decryption key.
Now that we’ve covered the different types of security features and functionality of modern web chat apps, let’s take a look at the best practices for ensuring app security.
Nowadays, there are virtually no instances where TLS/SSL protocol should not be used and a web chat app is a primary example where a secure transfer protocol is most beneficial. When a safe protocol is being used, only the server and a client may view the content in plain text. That prevents Man in the Middle attacks for as long as the private certificate from the server is not stolen.
Because users can often type whatever they want, it’s just a matter of time before someone tries to inject custom JavaScript code. You can display users’ messages as plain text but sometimes you want rich content to be available, such as bold text fragments or italic text. Stripping this type of content would limit your users’ creativity.
If handled correctly by the party responsible for the chat app, it should be stripped of its script content or rendered purely as text for example:
But if handled incorrectly the result might end up like this:
When building an end-to-end encryption service, your content needs to be encrypted on the client side before being sent. The server must not have the cipher key and you need to decrypt your message upon receiving it also on the client side. If at any point your server application knows the cipher key or implements a back door, then you risk leaking unsecured content which can cause a data breach.
Now that you’re familiar with the basics, you can start building! Here’s a list of some additional tips to help get you started:
1. It’s typically a good idea to use an npm (package manager) library called DOMPurify that removes all malicious scripts from your messages.
2. You’ll want to use a frontend framework that is robust enough to handle this type of issue. React is a great example where using the default data binding with curly braces ({}) automatically escapes values inserted inside them which protects against XSS attacks.
3. Implement a secure algorithm for message encryption that is difficult or nearly impossible to break, for example a 128-bit AES algorithm. AES is approved by the U.S. National Security Agency (NSA) for top secret information when used in an NSA approved cryptographic module.
PubNub fits very well with security concerns, as it supports the TLS protocol by default and allows for end-to-end encryption using AES (Advanced Encryption Standard) that provides symmetric encryption to guarantee end-to-end data security with the key being defined by the developer. The module supports not only plain messages but file encryption as well.
PubNub offers several resources to help you build a chat app that is secure and reliable. If you prefer to build your own UI from scratch, visit our JavaScript SDK documentation.
But if you’re looking to greatly speed up the development process of your chat application or functionality, our ready-to-use Chat Components for React make it easy to build, expand, and customize your app. They were built with the intention to be flexible so that you can build atop of them to suit your needs.
These components include:
Message List
Member List
Message Input
Channel List
Typing Indicator
To get started, all you need to do is create a PubNub account (which is free) and import the components!
There are common underlying technologies for a dating app, and in this post, we’ll talk about the major technologies and designs...
Michael Carroll
How to use geohashing, JavaScript, Google Maps API, and BART API to build a real-time public transit schedule app.
Michael Carroll
How to track and stream real-time vehicle location on a live-updating map using EON, JavaScript, and the Mapbox API.
Michael Carroll
