Fully end to end encrypted anonymous chat program. Server only stores public key lookup for users and the encrypted messages. No credentials are transfered to the server, but kept in local browser storage. This allows 100% safe chatting.
https://safechat.ch
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
221 lines
11 KiB
221 lines
11 KiB
<!DOCTYPE HTML> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|
<meta name="viewport" content="width=device-width initial-scale=1" /> |
|
<link href="stylesheets/safechat.css" rel="stylesheet" type="text/css" /> |
|
<script type="text/javascript" src="jquery.js"></script> |
|
<script type="text/javascript" src="openpgp.js"></script> |
|
<script type="text/javascript" src="socket.io/socket.io.js"></script> |
|
<script type="text/javascript" src="javascripts/mediarecorder.js"></script> |
|
<script type="text/javascript" src="javascripts/safechat.js"></script> |
|
<link href="stylesheets/jquery.cssemoticons.css" media="screen" rel="stylesheet" type="text/css" /> |
|
<script src="javascripts/ext/jquery.cssemoticons.js" type="text/javascript"></script> |
|
<title>Safe Chat</title> |
|
</head> |
|
|
|
<body> |
|
|
|
<div id="header" class="header"> |
|
<h1>Safe Chat <%= package.version %></h1> |
|
<div id="togglemenu"> |
|
<span id="username">[unknown]</span> |
|
<span id="connectionstatus"> |
|
<span id="good" title="connected" style="display: none">✔</span> |
|
<span id="bad" title="disconnected">✘</span> |
|
</span> |
|
<img id="menuicon" onclick="togglemenu()" src="images/menu.svg" /> |
|
</div> |
|
</div> |
|
|
|
<ul id="menu" style="display: none"> |
|
<li onclick="backup()">Download Backup</li> |
|
<li id="restore-menu-item" class="toolbutton"><label for="restore">Restore Backup</label><input autocomplete="off" type="file" accept="*.bak" id="restore" /></li> |
|
<li id="groups" onclick="groups()">Edit Groups</li> |
|
<li id="removeKey" style="display: none" onclick="removeKey()">Password Forgotten</li> |
|
<li id="android-download" href="safechat.apk"><a href="safechat.apk">Download Android-App</a></li> |
|
<li href="<%= package.documentation %>" target="_blank"><a href="<%= package.documentation %>" target="_blank">About Safe Chat</a></li> |
|
</ul> |
|
<script type="text/javascript"> |
|
$(function() { // on load: without cordova, remove andoid-download |
|
if ("@CORDOVA@" == "0") $("#android-download").hide(); |
|
if (!window.FileReader) $("#restore").hide(); // not supported by browser |
|
$("#groups").hide(); |
|
}) |
|
$("#restore").change(function(evt){restore(evt)}); |
|
</script> |
|
|
|
<div id="main"> |
|
|
|
<!-- Register New User --> |
|
<div id="newuser" style="display: none"> |
|
<h2>Register User</h2> |
|
<p>All you need to start is a username and a password:</p> |
|
<form id="register" autocomplete="off" onsubmit="safechat.createuser(document.getElementById('user').value, document.getElementById('pwd').value)"> |
|
<input placeholder="username" autocomplete="off" type="text" id="user" oninput="safechat.lookup(this.value)" /> |
|
<input placeholder="password" autocomplete="off" type="password" id="pwd" oninput="safechat.checkpasswords(this.value, document.getElementById('pwd2').value)"/> |
|
<input placeholder="repeat password" autocomplete="off" type="password" id="pwd2" oninput="safechat.checkpasswords(document.getElementById('pwd').value, this.value)"/> |
|
<input id="createuser" type="submit" value="register" disabled /> |
|
</form> |
|
<p>Please chose any username, e.g. a pseudonym, your e-mail, |
|
your phone number, your real name, and chose a safe |
|
password.</p> |
|
<h2>What is Safe Chat?</h2> |
|
<p>Safe Chat is a chat program to protect your privacy. It is |
|
designed to be extremely easy to use, with all cool features, |
|
but with highest security through strong encryption. For more |
|
information, open «About Safe Chat» in the menu |
|
(<img style="height: 1em; border: 2px solid green; |
|
vertical-align: text-bottom; background-color: green" |
|
src="images/menu.svg" />) above.</p> |
|
<h2>Never forget your Password!</h2> |
|
<p>This messenger is absolutely secure. But on the other hand, |
|
that means, no one except you knows your password. No one can |
|
read your messages exept you, not even our administrator. It |
|
is technically impossible to restore a password. You would |
|
have to delete your account and create a new one. In that |
|
case, all messages are lost.</p> |
|
<h3>Keys and Password</h3> |
|
<p>Safe Chat internally uses OpenPGP for public/private-key |
|
encryption. Your password is not transfered to the server and |
|
not stored, it is used only to create and encrypt your private |
|
key. There are two keys, a secret private key, that is stored |
|
in the browser (or app) on your computer, encrypted with your |
|
password and not sent to the server. There is also public key, |
|
which is sent to the server and used by other users to encrypt |
|
messages that only you can read. You can backup and restore |
|
your keys and setings to and from a file. This is the only way |
|
to transfer your account to another browser or to computer. Do |
|
not delete your browser's local storage unless you have backed |
|
up your keys.</p> |
|
</div> |
|
|
|
<!-- Enter Password --> |
|
<div id="getpwd" style="display: none"> |
|
<form autocomplete="off"> |
|
<input placeholder="please enter password" autocomplete="off" id="pwd" oninput="setpw(this.value)" |
|
type="password" /> |
|
</form> |
|
</div> |
|
|
|
<!-- Chat Screen --> |
|
<div id="chat" style="display: none"> |
|
<div id="message"> |
|
<form id="chat" autocomplete="off" onsubmit="sendmessage(this.elements['recv'].value, this.elements['msg'].value)"> |
|
<input placeholder="receiver" autocomplete="off" type="text" list="allusers" id="recv" oninput="checkpartner(this.value)" /> |
|
<datalist id="allusers"></datalist> |
|
<input placeholder="message" autocomplete="off" type="text" id="msg"/> |
|
<div class="buttongroup"> |
|
<span class="toolbutton"> |
|
<label for="photo"><img src="images/photo.svg"/></label> |
|
<input autocomplete="off" type="file" accept="image/*" id="photo" multiple/> |
|
</span> |
|
<span class="toolbutton"> |
|
<label for="video"><img src="images/video.svg"/></label> |
|
<input id="video" type="button" onclick="recordvideo()"/> |
|
<!--input autocomplete="off" type="file" accept="video/*" id="video"/--> |
|
</span> |
|
<span class="toolbutton"> |
|
<label for="audio"><img src="images/audio.svg"/></label> |
|
<input autocomplete="off" type="file" accept="audio/*" id="audio"/> |
|
</span> |
|
<span class="toolbutton"> |
|
<label for="file"><img src="images/attachment.svg"/></label> |
|
<input autocomplete="off" type="file" id="file"/> |
|
</span> |
|
<span class="toolbutton"> |
|
<label for="send"><img src="images/send.svg"/></label> |
|
<input type="submit" id="send" disabled/> |
|
</span> |
|
<span class="toolbutton"> |
|
<label for="reset"><img src="images/abort.svg" /></label> |
|
<input type="reset" id="reset" onclick="clearmessage();" /> |
|
</span> |
|
</div> |
|
</form> |
|
<div id="videorecorder" style="display: none"> |
|
<video autoplay muted></video><br/> |
|
<button id="done" onclick="done()">done</button> |
|
<button id="abort" onclick="abort()">abort</button> |
|
</div> |
|
<div id="preview"></div> |
|
</div> |
|
<div id="msgs"></div> |
|
<script> |
|
$("#file,#photo,#audio,#video").change(function(evt){fileupload(evt)}); |
|
if (!window.FileReader) $("#file,#photo,#audio,#video").hide(); // not supported by browser |
|
</script> |
|
</div> |
|
|
|
<!-- Password Forgotten --> |
|
<div id="forgotpassword" style="display: none"> |
|
<h2>Password Forgotten</h2> |
|
<div class="warning"><strong>Warning!</strong> |
|
<ul> |
|
<li>You loose all messages.</li> |
|
<li>You loose your account name.</li> |
|
<li>You should backup now, before you continue!</li> |
|
</ul> |
|
</div> |
|
<p>You can only remove your local data. You will have to |
|
create a new account with a new name on the server. This |
|
means, you loose all your messages and you loose your |
|
account name forever. This chat program is secure, nobody |
|
can restore your password. Without password, you can't |
|
decrypt your messages.</p> |
|
<div class="buttongroup"> |
|
<p class="toolbutton bad" onclick="deleteUser()"> |
|
Yes, I really forgot my password.<br/> |
|
I want to loose my data to get a new account.</p> |
|
<p class="toolbutton good" onclick="start()"> |
|
No, bring me back!.<br/> |
|
I'll try to remember my password.</p> |
|
</div> |
|
</div> |
|
|
|
<!-- Fatal: Abort --> |
|
|
|
<div id="fatal" style="display: none"> |
|
<h2 id="fatal-msg">Failure</h2> |
|
<p>SafeChat has been aborted due to a fatal error.</p> |
|
<p>There is a problem in your browser. Please try to reload. If the problem persists, please update your web browser or try SafeChat in another browser.</p> |
|
<p>The following java script features are required:</p> |
|
<ul class="features"> |
|
<li id="localstorage">Local Storage</li> |
|
<li id="indexeddb">Indexed DB</li> |
|
<li id="randomvalues">Cryptography: Random Values</li> |
|
</ul> |
|
<p>The following java script features are optional:</p> |
|
<ul class="features"> |
|
<li id="vibrate">Vibration (vibrates when new message arrives)</li> |
|
<li id="filereader">File Reader (required to restore backup)</li> |
|
</ul> |
|
</div> |
|
|
|
<!-- Error: Missing JavaScript --> |
|
<noscript> |
|
<h2>JavasScript Required!</h2> |
|
<p>This is a secure and encryptet chat application, that runs |
|
in your browser and does not send any credentials to the |
|
server. Your password and your secret key are fully under |
|
your control. That's why you must enable javascript and |
|
local storage for this application.</p> |
|
<p><a href="<%= package.documentation %>" target="_blank">more information</a></p> |
|
</noscript> |
|
|
|
<!-- Notice: Setup Messages --> |
|
<div id="allmessages" style="display: none"> |
|
<p>Setting up all previous messages, please wait …</p> |
|
</div> |
|
|
|
<!-- Notice: Startup --> |
|
<div id="startup"> |
|
<p>Starting up …</p> |
|
</div> |
|
|
|
</div> |
|
|
|
<div id="status"></div> |
|
|
|
</body> |
|
</html>
|
|
|