+++
title = "Chatto - A Self Hosted E2EE Chat Application"
date = "2020-06-01T15:02:07+05:30"
disable_comments = true
draft = false

[sidebar]
    disable = true

categories = [

    "Projects"

]
tags = [

    "java",
    "spring-boot",
    "hibernate",
    "self-hosted",
    "e2ee",
    "encryption",
    "typescript"

]

[menu]

    [menu.main]
    parent = "Projects"
    name = "Chatto"

+++
Chatto is a self hosted, end to end encrypted chat application. 

[Repository](https://git.arcusiridis.com/nova/Chatto)
[Documentation](https://git.arcusiridis.com/nova/Chatto/wiki)

## Key Features

1. Open Source, Self Hosted
2. Messages are encrypted end to end using AES GCM encryption (paramters like keysize can be configured)
3. No personal information such as names or email required
4. Does not rely on any external services like auth services, mail servers or captcha services
5. You are in control of your data.
6. Backend exposes a JSON API that can be used by third party clients
7. The chat messages support markdown

## Technical Features

1. Made with Java, Spring Boot and Hibernate
2. Front end is made with Thymeleaf templates and uses AJAX(written in TypeScript) to provide dynamic functionality
3. All password are stored hashed using Bcrypt
4. Uses a custom token based authentication scheme making use of Spring Security. Tokens are cached using EhCache
5. Care has been taken to safeguard against attacks like CSRF and XSS 

   * Server side cookies are protected against CSRF using CSRF tokens
   * To protect the JSON API auth token against XSS, DomPurify is used to sanitize any user provided HTML
   * Server side DTO validation is used to sanitize user input

## Tech Stack

* **Backend** - Java, Spring Boot, Hibernate, Maven

 + Database migrations using flyway
 * Caching using EhCache

* **Frontend** - 
  + Server side templating - Thymeleaf
  + JS - TypeScript, Browserify (and plugins like tsify), Terser, Grunt, Yarn
      * Templating using Handlebars

## Preview

### Design

+ **Full layout**
    <p align="center"> ![Preview](/img/projects/chatto/chatto-preview-main.png)
    Design adapted from [bootsnip](https://bootsnipp.com/snippets/nNg98)</p>
+ **Mobile layout** <br>
    The UI uses bootstrap grid system for a fully responsive layout. This is how it might look on a mobile screen -
    <p align="center">![chatto-on-mobile](/img/projects/chatto/chatto-preview-main-2.png)</p>
<!-- <video autoplay loop style=" width: 100%    !important;
  height: auto   !important;">
    <source type="video/mp4" src="/img/projects/chatto/chatto-preview-infinite-scroll.mkv">
    </source>
</video> -->
### Infinite scroll
{{< apvid >}}/img/projects/chatto/chatto-preview-infinite-scroll-2.webm{{< /apvid >}}
Decryption takes place on the fly on a background thread using the web worker API for a smooth user experience.

### E2EE Passphrase
{{< avid >}}/img/projects/chatto/chatto-preview-passphrase.mp4{{</ avid>}}
Note - passphrase is not stored on the server, or anywhere other than client's memory. The app simply checks whether decryption was successful to determine whether the passphrase is correct.

### Markdown in chat
{{< avid >}}/img/projects/chatto/chatto-preview-markdown.webm{{</ avid>}}

### User search 
{{< apvid >}}/img/projects/chatto/chatto-preview-usersearch.webm{{< /apvid >}}