100 lines
3.3 KiB
Markdown
100 lines
3.3 KiB
Markdown
+++
|
|
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"> 
|
|
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"></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 >}} |