mirror of
https://github.com/mjl-/mox.git
synced 2024-12-26 16:33:47 +03:00
0f8bf2f220
the http basic auth we had was very simple to reason about, and to implement. but it has a major downside: there is no way to logout, browsers keep sending credentials. ideally, browsers themselves would show a button to stop sending credentials. a related downside: the http auth mechanism doesn't indicate for which server paths the credentials are. another downside: the original password is sent to the server with each request. though sending original passwords to web servers seems to be considered normal. our new approach uses session cookies, along with csrf values when we can. the sessions are server-side managed, automatically extended on each use. this makes it easy to invalidate sessions and keeps the frontend simpler (than with long- vs short-term sessions and refreshing). the cookies are httponly, samesite=strict, scoped to the path of the web interface. cookies are set "secure" when set over https. the cookie is set by a successful call to Login. a call to Logout invalidates a session. changing a password invalidates all sessions for a user, but keeps the session with which the password was changed alive. the csrf value is also random, and associated with the session cookie. the csrf must be sent as header for api calls, or as parameter for direct form posts (where we cannot set a custom header). rest-like calls made directly by the browser, e.g. for images, don't have a csrf protection. the csrf value is returned by the Login api call and stored in localstorage. api calls without credentials return code "user:noAuth", and with bad credentials return "user:badAuth". the api client recognizes this and triggers a login. after a login, all auth-failed api calls are automatically retried. only for "user:badAuth" is an error message displayed in the login form (e.g. session expired). in an ideal world, browsers would take care of most session management. a server would indicate authentication is needed (like http basic auth), and the browsers uses trusted ui to request credentials for the server & path. the browser could use safer mechanism than sending original passwords to the server, such as scram, along with a standard way to create sessions. for now, web developers have to do authentication themselves: from showing the login prompt, ensuring the right session/csrf cookies/localstorage/headers/etc are sent with each request. webauthn is a newer way to do authentication, perhaps we'll implement it in the future. though hardware tokens aren't an attractive option for many users, and it may be overkill as long as we still do old-fashioned authentication in smtp & imap where passwords can be sent to the server. for issue #58
85 lines
4.9 KiB
HTML
85 lines
4.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Mox Webmail</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1" />
|
|
<link rel="icon" href="noNeedlessFaviconRequestsPlease:" />
|
|
<style>
|
|
* { font-size: inherit; font-family: 'ubuntu', 'lato', sans-serif; margin: 0; padding: 0; box-sizing: border-box; }
|
|
.mono, .mono * { font-family: 'ubuntu mono', monospace; }
|
|
h1, h2 { margin-bottom: 1ex; }
|
|
h1 { font-size: 1.1rem; }
|
|
table td, table th { padding: .15em .25em; }
|
|
[title] { text-decoration: underline; text-decoration-style: dotted; }
|
|
.silenttitle { text-decoration: none; }
|
|
fieldset { border: 0; }
|
|
.loading { opacity: 0.1; animation: fadeout 1s ease-out; }
|
|
@keyframes fadein { 0% { opacity: 0 } 100% { opacity: 1 } }
|
|
@keyframes fadeout { 0% { opacity: 1 } 100% { opacity: 0.1 } }
|
|
.button { display: inline-block; }
|
|
button, .button { border-radius: .15em; background-color: #eee; border: 1px solid #888; padding: 0 .15em; color: inherit; /* for ipad, which shows blue or white text */ }
|
|
button.active, .button.active, button.active:hover, .button.active:hover { background-color: gold; }
|
|
button:hover, .button:hover { background-color: #ddd; }
|
|
button.keyword:hover { background-color: #ffbd21; }
|
|
button.keyword { cursor: pointer; }
|
|
.btngroup button, .btngroup .button { border-radius: 0; border-right-width: 0; }
|
|
.btngroup button:first-child, .btngroup .button:first-child { border-radius: .15em 0 0 .15em; }
|
|
.btngroup button:last-child, .btngroup .button:last-child { border-radius: 0 .15em .15em 0; border-right-width: 1px; }
|
|
iframe { border: 0; }
|
|
.pad { padding: .5em; }
|
|
.invert { filter: invert(100%); }
|
|
.scriptswitch { text-decoration: underline #dca053 2px; }
|
|
|
|
.msgitem { display: flex; user-select: none; }
|
|
.msgitemcell { padding: 2px 4px; }
|
|
/* note: we assign widths to .msgitemflags, .msgitemfrom, .msgitemsubject, .msgitemage, and offsets through a stylesheet created in js */
|
|
.msgitemage { text-align: right; }
|
|
.msgitemfrom { position: relative; }
|
|
.msgitemfromtext { white-space: nowrap; overflow: hidden; }
|
|
.msgitemfromthreadbar { position: absolute; border-right: 2px solid #666; right: 0; top: 0; bottom: 0; /* top or bottom set with inline style for first & last */ }
|
|
.msgitemsubjecttext { white-space: nowrap; overflow: hidden; }
|
|
.msgitemsubjectsnippet { font-weight: normal; color: #666; }
|
|
.msgitemmailbox { background: #999; color: white; border: 1px solid #777; padding: 0 .15em; margin-left: .15em; border-radius: .15em; font-weight: normal; font-size: .9em; white-space: nowrap; }
|
|
.msgitemmailbox.msgitemmailboxcollapsed { background: #eee; color: #333; }
|
|
.msgitemidentity { background-color: #999; color: white; border: 1px solid #777; padding: 0 .15em; margin-left: .15em; border-radius: .15em; font-weight: normal; font-size: .9em; white-space: nowrap; }
|
|
|
|
.topbar, .mailboxesbar { background-color: #fdfdf1; }
|
|
.msglist { background-color: #f5ffff; }
|
|
table.search td { padding: .25em; }
|
|
.keyword { background-color: gold; color: black; border: 1px solid #8c7600; padding: 0 .15em; border-radius: .15em; font-weight: normal; font-size: .9em; margin: 0 .15em; white-space: nowrap; }
|
|
.keyword.keywordcollapsed { background-color: #ffeb7e; color: #333; }
|
|
.mailbox { padding: .15em .25em; }
|
|
.mailboxitem { cursor: pointer; border-radius: .15em; user-select: none; }
|
|
.mailboxitem.dropping { background: gold !important; }
|
|
.mailboxitem:hover { background: #eee; }
|
|
.mailboxitem.active { background: linear-gradient(135deg, #ffc7ab 0%, #ffdeab 100%); }
|
|
.mailboxhoveronly { visibility: hidden; }
|
|
.mailboxitem:hover .mailboxhoveronly, .mailboxitem:focus .mailboxhoveronly { visibility: visible; }
|
|
.mailboxcollapse { visibility: hidden; }
|
|
.mailboxitem:hover .mailboxcollapse, .mailboxitem:focus .mailboxcollapse { visibility: visible; }
|
|
.msgitem { cursor: pointer; border-radius: .15em; border: 1px solid transparent; }
|
|
.msgitem.focus { border: 1px solid #2685ff; }
|
|
.msgitem:hover { background-color: #eee; }
|
|
.msgitem.active { background: linear-gradient(135deg, #8bc8ff 0%, #8ee5ff 100%); }
|
|
.msgitemsubject { position: relative; }
|
|
.msgitemflag { margin-right: 1px; font-weight: normal; font-size: .9em; }
|
|
.msgitemflag.msgitemflagcollapsed { color: #666; }
|
|
.msgheaders td { word-break: break-word; /* prevent horizontal scroll bar for long header values */ }
|
|
.quoted1 { color: #03828f; }
|
|
.quoted2 { color: #c7445c; }
|
|
.quoted3 { color: #417c10; }
|
|
.autosize { display: inline-grid; max-width: 90vw; }
|
|
.autosize.input { grid-area: 1 / 2; }
|
|
.autosize::after { content: attr(data-value); margin-right: 1em; line-height: 0; visibility: hidden; white-space: pre-wrap; overflow-x: hidden; }
|
|
|
|
.scrollparent { position: relative; }
|
|
.yscroll { overflow-y: scroll; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
|
|
.yscrollauto { overflow-y: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="page"><div style="padding: 1em; text-align: center">Loading...</div></div>
|
|
<script>/* placeholder */</script>
|
|
</body>
|
|
</html>
|