SimpleX-Chat/index.html

567 lines
22 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SimpleX Chat: private, secure, no user identitifiers</title>
<meta
name="description"
content="Free open-source chat protocol and software - complete privacy, security and ownership of your contacts and messages."
/>
<meta name="Content-Type" content="text/html;charset=utf-8" />
<meta property="og:type" content="website" />
<meta property="og:title" content="SimpleX chat: private, secure, de-centralised" />
<meta
property="og:description"
content="Free open-source chat protocol and software - complete privacy, security and ownership of your contacts and messages."
/>
<meta property="og:url" content="https://simplex.chat/" />
<meta property="og:image" content="https://simplex.chat/img/share_simplex.png" />
<meta name="twitter:card" content="summary" />
<link href="/css/tailwind.css" rel="stylesheet" />
<link href="/css/style.css" rel="stylesheet" />
<link href="css/index.css" rel="stylesheet" />
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico">
<script async defer src="js/index.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body>
<header>
<nav class="container">
<div class="flex items-center gap-[16px] h-full">
<a href="/">
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
</a>
<div class="hidden lg:flex gap-[16px]">
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md"
target="_blank">Whitepaper</a>
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
href="/#comparison">Comparison</a>
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
</div>
</div>
<div class="flex gap-4">
<div class="nav__buttons">
<div class="github">
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
</div>
<div class="donate d-none-576">
<a href="https://opencollective.com/simplex-chat" target="_blank">
<span class="button">Donate</span></a>
</div>
</div>
<div class="toggle self-stretch">
<label class="toggle-btn"><span></span></i></label>
</div>
</div>
</nav>
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
href="/#comparison">Comparison</a>
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
href="/blog">Blog</a>
</div>
</header>
<script>
const toggleBtn = document.querySelector(".toggle-btn")
toggleBtn.addEventListener("click", () => {
if (toggleBtn.classList.contains("active-toggle-btn")) {
console.log("unchecked")
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
toggleBtn.classList.remove("active-toggle-btn")
} else {
console.log("checked")
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
toggleBtn.classList.add("active-toggle-btn")
}
})
</script>
<style>
header {
overflow: hidden;
}
/* ====== NAV TOGGLE BUTTON ====== */
.toggle {
display: none;
}
.toggle-btn {
height: 100%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.toggle-btn span {
width: 20px;
height: 2px;
background-color: #062d56;
position: relative;
}
.toggle-btn span::after,
.toggle-btn span::before {
content: "";
width: 100%;
height: 100%;
background-color: #062d56;
position: absolute;
left: 0;
}
span::before {
top: -8px;
}
span::after {
top: 8px;
}
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
.active-toggle-btn span {
background-color: transparent;
}
.active-toggle-btn span::before {
top: 0;
transform: rotate(45deg);
background-color: #062d56;
}
.active-toggle-btn span::after {
top: 0;
transform: rotate(-45deg);
background-color: #062d56;
}
.mobile-nav {
display: none;
transform: translateX(-100%);
transition: transform 0.5s ease-out;
}
.mobile-nav-active {
display: block;
transform: translateX(0%);
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
}
@media (max-width: 1024px) {
.toggle {
display: inline-block;
}
}
</style>
<section id="demo" class="z-10">
<div class="container">
<h1>SimpleX Chat</h1>
<h3>Private & encrypted - the only platform without user identifiers!</h3>
<div class="app__links">
<a href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img src="./img/apple_store.svg" height="42"></a>
<a href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img src="./img/google_play.svg"></a>
<a href="https://app.simplex.chat" target="_blank" title="SimpleX F-Droid Repository"><img src="./img/f_droid.svg" height="41"></a>
<a href="https://testflight.apple.com/join/DWuT2LQu" target="_blank"><img src="./img/testflight.png" width="41" height="41"></a>
<a href="https://github.com/simplex-chat/simplex-chat/releases/latest/download/simplex.apk" target="_blank"><img src="./img/apk_icon.png" width="41" height="41"></a>
</div>
<p class="d-none-576">You can download terminal chat app from GitHub or using this command:</p>
<p class="content_copy_with_tooltip install d-none-576">
<span class="content">curl -o- https://raw.githubusercontent.com/simplex-chat/simplex-chat/master/install.sh | bash</span>
<span class="tooltip">
<span class="tooltiptext">Copy to clipboard</span>
<img class="content_copy" src="./img/icons/content-copy.svg">
</span>
</p>
<div class="all-users">
<div class="user alice">
<h3>Alice</h3>
<div class="terminal">
<div class="display"></div>
<div class="input"></div>
<input type="text" />
</div>
</div>
<div class="user bob d-none">
<h3>Bob</h3>
<div class="terminal">
<div class="display"></div>
<div class="input"></div>
<input type="text" />
</div>
</div>
<div class="user simplex_mobile d-none-890">
<img src="./img/simplex_mobile.png" alt="" width="320">
</div>
<div class="user tom d-none">
<h3>Tom</h3>
<div class="terminal">
<div class="display"></div>
<div class="input"></div>
<input type="text" />
</div>
</div>
<button class="run-demo d-none-890">Run demo</button>
<button class="run-faster d-none-890">Faster!</button>
<button class="try-it d-none-890">Try it!</button>
</div>
</div>
</section>
<section id="introduction">
<div class="container">
<h2>Privacy redefined</h2>
<h3>SimpleX advantage:</h3>
<p>SimpleX ensures data and meta-data privacy</p>
<p>with a new protocol design it delivers messages</p>
<p>without using senders' and recipients' identifiers,</p>
<p>unlike any other messaging platform.</p>
<figure class="section">
<div class="feature">
<div class="doodle control"></div>
<h4>Security</h4>
<p>Two-layer encryption and communication integrity</p>
</div>
<div class="feature">
<div class="doodle privacy"></div>
<h4>Privacy</h4>
<p>Your contacts and messages are stored on your device</p>
</div>
<div class="feature">
<div class="doodle convenience"></div>
<h4>Convenience</h4>
<p>Easy to add contacts and start talking</p>
</div>
</figure>
</div>
</section>
<section id="problem">
<div class="container">
<h2>Problem: chat security</h2>
<a id="problem-explained"></a>
<section class="problem intro">
<h3>End-to-end encryption?</h3>
<p>Alice sends the key to Bob (e.g. via p2p network or via chat server)</p>
<div class="problem-section">
<figure class="communication">
<figure class="party alice">Alice</figure>
<img alt="Alice sends the key to Bob" src="./img/problem11.svg" />
<figure class="party bob">Bob</figure>
</figure>
</div>
<p>Now Bob can send encrypted messages to Alice - he believes it is secure!</p>
<div class="problem-section">
<figure class="communication">
<figure class="party alice">Alice</figure>
<img alt="They believe it is secure" src="./img/problem12.svg" />
<figure class="party bob">Bob</figure>
</figure>
</div>
</section>
<section class="problem explained">
<h3>Man-in-the-middle attack!</h3>
<p>But the key can be intercepted and substituted by Tom (the attacker)</p>
<div class="problem-section">
<figure class="communication">
<figure class="party alice">Alice</figure>
<img alt="key is intercepted" src="./img/problem21.svg" />
<figure class="party bob">Bob</figure>
<div class="tom">Tom</div>
</figure>
</div>
<p>Now the attacker can read the messages without Alice or Bob knowing</p>
<div class="problem-section">
<figure class="communication">
<figure class="party alice">Alice</figure>
<img alt="attacker can read messages" src="./img/problem22.svg" />
<figure class="party bob">Bob</figure>
<div class="tom">Tom</div>
</figure>
</div>
</section>
<div class="pagination">
<a class="page intro" href="#problem-intro"></a>
<a class="page explained" href="#problem-explained"></a>
</div>
</div>
</section>
<section id="solution">
<div class="container">
<h2>What is the solution?</h2>
<p>
To create secure encrypted channel you need an existing secure channel
<br />where you can pass the encryption key (or key fingerprint).
</p>
<p>Any alternative solution can be compromised.</p>
</div>
</section>
<section id="connection">
<div class="container">
<h2>Make a private connection!</h2>
<h3>To add contact and to start chat</h3>
<p>
Adding a contact in mobile app will require sharing your one-time QR code.
<br>In the <a href="https://github.com/simplex-chat/simplex-chat">terminal UI</a> you need to share an invitation with your contact.
</p>
<h4>After creating your chat profile in the app:</h4>
<figure class="section">
<figure class="conn-stage">
<p>1.<br>Show QR code or share link</p>
<figure class="device">
<img alt="mobile app: show QR code to add contact" src="./img/1_show_qr_code.png" width="187px"/>
</figure>
<figure class="party alice small">Alice</figure>
</figure>
<img src="img/arrow.svg" class="arrow" />
<figure class="conn-stage">
<p>2.<br>Your contact scans QR code or opens link</p>
<figure class="device">
<img alt="mobile app: scan QR code" src="./img/2_scan_qr_code.png" width="187px"/>
</figure>
<figure class="party bob small">Bob</figure>
</figure>
<img src="img/arrow.svg" class="arrow" />
<figure class="conn-stage">
<p>3.<br>A private connection is established</p>
<figure class="device">
<img alt="mobile app: confirm contact" src="./img/3_connected.png" width="187px"/>
</figure>
<figure class="party alice small">Alice</figure>
</figure>
<img src="img/arrow.svg" class="arrow" />
<figure class="conn-stage">
<p>4.<br>Now you can chat privately!</p>
<figure class="device">
<img alt="mobile app: start chat" src="./img/4_chat.png" width="187px"/ />
</figure>
<figure class="party bob small">Bob</figure>
</figure>
</figure>
</div>
</section>
<section id="comparison">
<div class="container">
<h2>Comparison with other protocols</h2>
<div class="table-holder">
<table class="systems">
<thead>
<tr>
<th></th>
<th class="simplex"><img alt="simplex logo" src="img/icon.svg" /> SimpleX chat</th>
<th>Signal, big platforms</th>
<th>XMPP, Matrix</th>
<th>P2P protocols</th>
</tr>
</thead>
<tbody>
<tr>
<td>Requires global identity</td>
<td class="highlight good">No - private</td>
<td class="highlight bad">Yes <sup>1</sup></td>
<td class="highlight bad">Yes <sup>2</sup></td>
<td class="highlight bad">Yes <sup>3</sup></td>
</tr>
<tr>
<td>Possibility of MITM</td>
<td class="highlight good">No - secure</td>
<td class="highlight bad">Yes <sup>4</sup></td>
<td class="highlight bad">Yes</td>
<td class="highlight bad">Yes</td>
</tr>
<tr>
<td>Dependence on DNS</td>
<td class="highlight good">No - resilient</td>
<td class="highlight bad">Yes</td>
<td class="highlight bad">Yes</td>
<td class="highlight good">No</td>
</tr>
<tr>
<td>Single or centralized network</td>
<td class="highlight good">No - decentralized</td>
<td class="highlight bad">Yes</td>
<td class="highlight good">No - federated <sup>5</sup></td>
<td class="highlight bad">Yes <sup>6</sup></td>
</tr>
<tr>
<td>Central component or other network-wide attack</td>
<td class="highlight good">No - resilient</td>
<td class="highlight bad">Yes</td>
<td class="highlight bad">Yes <sup>2</sup></td>
<td class="highlight bad">Yes <sup>7</sup></td>
</tr>
</tbody>
</table>
</div>
<div class="table-comments">
<ul class="legend">
<li class="good">Good</li>
<li class="bad">Bad</li>
</ul>
<div class="footnotes">
<ol>
<li>Usually based on a phone number, in some cases on usernames</li>
<li>DNS-based addresses</li>
<li>Public key or some other globally unique ID</li>
<li>If operators servers are compromised</li>
<li>Does not protect users' metadata</li>
<li>
While P2P are distributed, they are not federated - they operate as a single network
</li>
<li>
P2P networks either have a central authority or the whole network can be compromised -
see
<a
href="https://github.com/simplex-chat/protocol#comparison-with-p2p-messaging-protocols"
>here</a
>
</li>
</ol>
</div>
</div>
</div>
</section>
<section id="messaging">
<div class="container flex flex-col items-center">
<div>
<h2>SimpleX messaging protocol</h2>
<h3>Unidirectional (simplex) queues</h3>
<p>
<a
href="https://github.com/simplex-chat/simplexmq/blob/master/protocol/simplex-messaging.md"
target="_blank"
>Simplex messaging protocol</a
>
(SMP) for messaging via secure persistent queues will serve as the low level protocol for
SimpleX chat - see
<a href="https://github.com/simplex-chat/simplex-messaging" target="_blank"
>demo server implementation</a
>.<br />
It uses different encryption keys for each message queue - the key is passed via existing
secure channel - e.g. QR code or another simplex queue.<br />
</p>
</div>
<img alt="simplex messaging protocol" src="./img/messaging.png">
</div>
</section>
<section id="chat">
<div class="container flex flex-col items-center">
<div>
<h2>Chat</h2>
<h3>Communication integrity</h3>
<p>
Each chat uses two (or more) simplex queues for duplex communication. Each message contains the
hash of the previous message to detect if messages are lost or changed.
</p>
</div>
<img alt="simplex chat: duplex conversation" src="./img/chat.png">
</div>
</section>
<section id="simplex">
<div class="container">
<article id="use-simplex" class="half">
<h3>Use SimpleX</h3>
<p>
SimpleX chat terminal client
<a href="https://github.com/simplex-chat/simplex-chat/releases/tag/v2.0.0" target="_blank">v2.0.0</a> is
released!<br />
groups and files<br />
two-layer E2E encryption, with double-ratchet algorithm<br />
protocol is compatible with mobile apps<br />
</p>
<p>
You can use our servers or deploy your own, e.g. using
<a href="https://github.com/simplex-chat/simplexmq#deploy-smp-server-on-linode" target="_blank">
StackScript on Linode</a>.
</p>
<p>
Sign up to be updated about the new releases.
</p>
<form class="sign-up"
action="https://chat.us2.list-manage.com/subscribe/post?u=ddd892b258ae36e5438e6d4e1&amp;id=ad6037a2fe"
method="post" target="_blank" novalidate>
<div>
<input name="EMAIL" placeholder="Your email" />
<span style="position: absolute; left: -5000px" aria-hidden="true">
<input type="text" name="b_ddd892b258ae36e5438e6d4e1_ad6037a2fe" tabindex="-1" value="" />
</span>
<button type="submit">Submit</button>
</div>
</form>
</article>
<article id="join-simplex" class="half">
<h3>Join SimpleX</h3>
<p>
The project can move faster with your help.<br />
We develop it in Haskell.
</p>
<div id="contacts">
<p>
<a href="mailto:chat@simplex.chat">
<span class="button">Email</span>&nbsp; chat@simplex.chat</a>
</p>
<p>
<a href="https://github.com/simplex-chat/simplex-chat" target="_blank"><span
class="button">Join</span>&nbsp; github.com/simplex-chat</a>
</p>
<p>
<a href="https://opencollective.com/simplex-chat" target="_blank"><span class="button">Donate</span>&nbsp;
opencollective.com/simplex-chat</a> <strong>(now accepts crypto)</strong>
</p>
</div>
</article>
</div>
</section>
<footer>
<div class="container">
<img alt="simplex logo" class="logo d-none-992" src="./img/simplex.svg" />
<div class="copyright__text_and_links">
<p class="copyright">&#169; 2020-22 SimpleX | Open-Source Project <span class="d-none-576">|</span></p>
<div>
<a class="" href="https://github.com/simplex-chat" target="_blank"><img
src="./img/icons/github.svg"></a>
<a class="" href="https://www.reddit.com/r/SimpleXChat/" target="_blank"><img
src="./img/icons/reddit.svg"></a>
<a class="" href="https://twitter.com/simplexchat" target="_blank"><img
src="./img/icons/twitter.svg"></a>
<a class="" href="https://www.linkedin.com/company/simplex-chat/" target="_blank"><img
src="./img/icons/linkedin.svg"></a>
<a class="" href="mailto:chat@simplex.chat" target="_blank"><img src="./img/icons/email.svg"></a>
</div>
</div>
<div class="github d-none-992">
<a class="github-button" href="https://github.com/simplex-chat/protocol" data-size="large"
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
</div>
</div>
</footer>
</body>
</html>