ric930/ric930-fake-smtp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

release: 1.1.1 - session auth and security improvements

Browse Source
This commit is contained in:
astelm
2026-10-05 22:36:24 +03:00
parent 1cd3cb9a2e
commit b1cd985720
8 changed files with 2539 additions and 539 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.js
+382 -129
View File
@@ -1,56 +1,88 @@
'use strict';
document.addEventListener('DOMContentLoaded', function () {
initializeEmailList();
});
var iframeObservers = new WeakMap();
document.addEventListener(
'DOMContentLoaded',
function () {
initializeEmailList();
}
);
function initializeEmailList() {
var emailItems = document.querySelectorAll('.email-item');
var emailItems =
document.querySelectorAll('.email-item');
emailItems.forEach(function (item) {
var summary = item.querySelector('.email-summary');
var downloadButton = item.querySelector('.download-icon');
var summary =
item.querySelector('.email-summary');
var downloadButton =
item.querySelector('.download-icon');
if (summary) {
summary.addEventListener('click', function (event) {
if (event.target.closest('.download-icon')) {
return;
summary.addEventListener(
'click',
function (event) {
if (
event.target.closest(
'.download-icon'
)
) {
return;
}
toggleEmail(item);
}
);
toggleEmail(item);
});
summary.addEventListener(
'keydown',
function (event) {
if (
event.key !== 'Enter' &&
event.key !== ' '
) {
return;
}
summary.addEventListener('keydown', function (event) {
if (
event.key !== 'Enter' &&
event.key !== ' '
) {
return;
if (
event.target.closest(
'.download-icon'
)
) {
return;
}
event.preventDefault();
toggleEmail(item);
}
if (event.target.closest('.download-icon')) {
return;
}
event.preventDefault();
toggleEmail(item);
});
);
}
if (downloadButton) {
downloadButton.addEventListener('click', function (event) {
event.stopPropagation();
downloadButton.addEventListener(
'click',
function (event) {
event.stopPropagation();
var id = item.dataset.id;
var id = item.dataset.id;
if (!id) {
console.error('Email ID is missing');
return;
if (!id) {
console.error(
'Email ID is missing'
);
return;
}
downloadEmail(
event,
id
);
}
downloadEmail(event, id);
});
);
}
});
}
@@ -59,14 +91,26 @@ function toggleEmail(item) {
var id = item.dataset.id;
if (!id) {
console.error('Email ID is missing');
console.error(
'Email ID is missing'
);
return;
}
var summary = item.querySelector('.email-summary');
var detail = item.querySelector('.email-detail');
var toggleIcon = item.querySelector('.toggle');
var iframe = item.querySelector('.email-content-frame');
var summary =
item.querySelector('.email-summary');
var detail =
item.querySelector('.email-detail');
var toggleIcon =
item.querySelector('.toggle');
var iframe =
item.querySelector(
'.email-content-frame'
);
if (!detail || !iframe) {
console.error(
@@ -77,13 +121,16 @@ function toggleEmail(item) {
return;
}
var isHidden = detail.classList.contains('hidden');
var isHidden =
detail.classList.contains('hidden');
if (isHidden) {
detail.classList.remove('hidden');
if (toggleIcon) {
toggleIcon.classList.add('rotated');
toggleIcon.classList.add(
'rotated'
);
}
if (summary) {
@@ -101,7 +148,9 @@ function toggleEmail(item) {
detail.classList.add('hidden');
if (toggleIcon) {
toggleIcon.classList.remove('rotated');
toggleIcon.classList.remove(
'rotated'
);
}
if (summary) {
@@ -114,11 +163,19 @@ function toggleEmail(item) {
}
function loadEmailContent(id, iframe) {
if (iframe.dataset.loaded === 'true') {
if (
iframe.dataset.loaded === 'true'
) {
resizeIframe(iframe);
return;
}
if (
iframe.dataset.loading === 'true'
) {
return;
}
iframe.dataset.loading = 'true';
fetch(
@@ -130,6 +187,8 @@ function loadEmailContent(id, iframe) {
}
)
.then(function (response) {
handleUnauthorized(response);
if (!response.ok) {
throw new Error(
'HTTP error ' +
@@ -140,12 +199,15 @@ function loadEmailContent(id, iframe) {
return response.text();
})
.then(function (data) {
resetIframeObserver(iframe);
writeEmailToIframe(
iframe,
data
);
iframe.dataset.loaded = 'true';
iframe.dataset.loaded =
'true';
delete iframe.dataset.loading;
@@ -154,6 +216,17 @@ function loadEmailContent(id, iframe) {
.catch(function (error) {
delete iframe.dataset.loading;
// При 401 уже выполняется redirect.
if (
error &&
error.message ===
'Session expired'
) {
return;
}
resetIframeObserver(iframe);
writeErrorToIframe(
iframe,
error.message
@@ -167,71 +240,94 @@ function loadEmailContent(id, iframe) {
});
}
function writeEmailToIframe(iframe, emailBody) {
var doc = iframe.contentWindow.document;
function handleUnauthorized(response) {
if (response.status !== 401) {
return;
}
window.location.href = '/login';
throw new Error(
'Session expired'
);
}
function writeEmailToIframe(
iframe,
emailBody
) {
var doc =
iframe.contentWindow.document;
doc.open();
doc.write(
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="UTF-8">' +
'<meta name="viewport" content="width=device-width, initial-scale=1.0">' +
'<meta ' +
'name="viewport" ' +
'content="width=device-width, initial-scale=1.0"' +
'>' +
'<base target="_blank">' +
'<style>' +
'html {' +
'margin: 0 !important;' +
'padding: 0 !important;' +
'background: white !important;' +
'margin:0 !important;' +
'padding:0 !important;' +
'background:white !important;' +
'}' +
'body {' +
'margin: 0 !important;' +
'padding: 15px !important;' +
'font-family: monospace !important;' +
'font-size: 12px !important;' +
'line-height: 1.4 !important;' +
'background: white !important;' +
'color: #333 !important;' +
'overflow-wrap: anywhere !important;' +
'margin:0 !important;' +
'padding:15px !important;' +
'font-family:monospace !important;' +
'font-size:12px !important;' +
'line-height:1.4 !important;' +
'background:white !important;' +
'color:#333 !important;' +
'overflow-wrap:anywhere !important;' +
'}' +
'* {' +
'box-sizing: border-box !important;' +
'max-width: 100% !important;' +
'box-sizing:border-box !important;' +
'max-width:100% !important;' +
'}' +
'img {' +
'max-width: 100% !important;' +
'height: auto !important;' +
'max-width:100% !important;' +
'height:auto !important;' +
'}' +
'table {' +
'max-width: 100% !important;' +
'max-width:100% !important;' +
'}' +
'pre {' +
'margin: 0 !important;' +
'font-family: inherit !important;' +
'white-space: pre-wrap !important;' +
'overflow-wrap: anywhere !important;' +
'margin:0 !important;' +
'font-family:inherit !important;' +
'white-space:pre-wrap !important;' +
'overflow-wrap:anywhere !important;' +
'}' +
'a {' +
'color: #2563eb !important;' +
'text-decoration: underline !important;' +
'color:#2563eb !important;' +
'text-decoration:underline !important;' +
'}' +
'a:visited {' +
'color: #7c3aed !important;' +
'color:#7c3aed !important;' +
'}' +
'a:hover {' +
'color: #1d4ed8 !important;' +
'color:#1d4ed8 !important;' +
'}' +
'</style>' +
@@ -239,7 +335,7 @@ function writeEmailToIframe(iframe, emailBody) {
'</head>' +
'<body>' +
emailBody +
emailBody +
'</body>' +
'</html>'
@@ -248,26 +344,36 @@ function writeEmailToIframe(iframe, emailBody) {
doc.close();
}
function writeErrorToIframe(iframe, message) {
var doc = iframe.contentWindow.document;
function writeErrorToIframe(
iframe,
message
) {
var doc =
iframe.contentWindow.document;
doc.open();
doc.write(
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="UTF-8">' +
'<meta charset="UTF-8">' +
'</head>' +
'<body style="' +
'padding:15px;' +
'font-family:monospace;' +
'font-size:12px;' +
'color:#b91c1c;' +
'">' +
'Error loading email: ' +
escapeHTML(message) +
'</body>' +
'</html>'
);
@@ -276,68 +382,81 @@ function writeErrorToIframe(iframe, message) {
resizeIframe(iframe);
}
function resetIframeObserver(iframe) {
var observer =
iframeObservers.get(iframe);
if (observer) {
observer.disconnect();
iframeObservers.delete(
iframe
);
}
}
function resizeIframe(iframe) {
if (!iframe || !iframe.contentWindow) {
if (
!iframe ||
!iframe.contentWindow
) {
return;
}
try {
var doc = iframe.contentWindow.document;
var doc =
iframe.contentWindow.document;
if (!doc || !doc.body) {
return;
}
var height = Math.max(
doc.body.scrollHeight,
doc.documentElement
? doc.documentElement.scrollHeight
: 0
updateIframeHeight(
iframe,
doc
);
iframe.style.height =
Math.max(height + 20, 200) +
'px';
if (
!iframe.dataset.resizeObserver &&
typeof ResizeObserver !== 'undefined'
typeof ResizeObserver ===
'undefined'
) {
var observer = new ResizeObserver(
return;
}
var existing =
iframeObservers.get(iframe);
if (existing) {
return;
}
var observer =
new ResizeObserver(
function () {
try {
var body =
iframe.contentWindow.document.body;
var currentDoc =
iframe
.contentWindow
.document;
var html =
iframe.contentWindow.document.documentElement;
var newHeight = Math.max(
body
? body.scrollHeight
: 0,
html
? html.scrollHeight
: 0
updateIframeHeight(
iframe,
currentDoc
);
iframe.style.height =
Math.max(
newHeight + 20,
200
) +
'px';
} catch (error) {
// Iframe may have been replaced.
}
}
);
observer.observe(doc.body);
observer.observe(
doc.body
);
iframe.dataset.resizeObserver =
'true';
}
iframeObservers.set(
iframe,
observer
);
} catch (error) {
console.warn(
'Cannot resize email iframe:',
@@ -346,39 +465,173 @@ function resizeIframe(iframe) {
}
}
function downloadEmail(event, id) {
var icon = event.currentTarget;
function updateIframeHeight(
iframe,
doc
) {
if (!doc || !doc.body) {
return;
}
var bodyHeight =
doc.body.scrollHeight;
var htmlHeight =
doc.documentElement
? doc.documentElement.scrollHeight
: 0;
var height = Math.max(
bodyHeight,
htmlHeight,
180
);
iframe.style.height =
height + 20 + 'px';
}
function downloadEmail(
event,
id
) {
var button =
event.currentTarget;
if (!id) {
return;
}
var originalTransform =
icon.style.transform;
button.style.transform;
var originalOpacity =
icon.style.opacity;
button.style.opacity;
icon.style.transform =
button.disabled = true;
button.style.transform =
'scale(0.8)';
icon.style.opacity =
button.style.opacity =
'0.5';
window.location.href =
fetch(
'/api/download?id=' +
encodeURIComponent(id);
encodeURIComponent(id),
{
method: 'GET',
credentials: 'same-origin'
}
)
.then(function (response) {
handleUnauthorized(response);
window.setTimeout(
function () {
icon.style.transform =
if (!response.ok) {
throw new Error(
'HTTP error ' +
response.status
);
}
return Promise.all([
response.blob(),
Promise.resolve(
getDownloadFilename(
response,
id
)
)
]);
})
.then(function (result) {
var blob = result[0];
var filename = result[1];
var objectURL =
URL.createObjectURL(blob);
var link =
document.createElement('a');
link.href = objectURL;
link.download = filename;
document.body.appendChild(
link
);
link.click();
link.remove();
window.setTimeout(
function () {
URL.revokeObjectURL(
objectURL
);
},
1000
);
})
.catch(function (error) {
if (
error &&
error.message ===
'Session expired'
) {
return;
}
console.error(
'Failed to download email:',
id,
error
);
window.alert(
'Failed to download email'
);
})
.finally(function () {
button.disabled = false;
button.style.transform =
originalTransform;
icon.style.opacity =
button.style.opacity =
originalOpacity;
},
150
);
});
}
function getDownloadFilename(
response,
id
) {
var contentDisposition =
response.headers.get(
'Content-Disposition'
);
if (contentDisposition) {
var match =
contentDisposition.match(
/filename="([^"]+)"/i
);
if (match && match[1]) {
return match[1];
}
}
var parts = id.split('/');
if (parts.length > 0) {
return parts[
parts.length - 1
];
}
return 'email.eml';
}
function escapeHTML(value) {
web/index.html
+40 -13
View File
@@ -19,28 +19,49 @@
</head>
<body class="bg-gray-100">
<div class="max-w-6xl mx-auto bg-white min-h-screen shadow-sm">
<!-- Header -->
<header class="bg-gray-800 text-white px-6 py-4 border-b-4 border-red-600">
<h1 class="text-2xl font-normal">
Fake SMTP Server
</h1>
<header class="bg-gray-800 text-white px-6 py-4 border-b-4 border-red-600 flex justify-between items-center">
<div>
<h1 class="text-2xl font-normal">
Fake SMTP Server
</h1>
<p class="text-gray-400 text-sm mt-1">
Email storage
</p>
</div>
<form
method="post"
action="/logout"
>
<input
type="hidden"
name="csrf_token"
value="{{.CSRFToken}}"
>
<button
type="submit"
class="text-sm text-gray-300 hover:text-white px-3 py-2 border border-gray-600 hover:border-gray-400"
>
Logout
</button>
</form>
<p class="text-gray-400 text-sm mt-1">
Email storage
</p>
</header>
<!-- Content -->
<main class="p-4">
{{range .Days}}
<section class="mb-6 border border-gray-200">
<!-- Day header -->
<div class="bg-gray-50 px-4 py-2 border-b border-gray-200 flex justify-between items-center">
<h2 class="text-base font-semibold text-gray-700">
{{.Date}}
</h2>
@@ -48,9 +69,9 @@
<span class="bg-gray-400 text-white px-2 py-0.5 text-xs">
{{len .Emails}} emails
</span>
</div>
<!-- Emails -->
<div class="divide-y divide-gray-100">
{{range .Emails}}
@@ -60,13 +81,13 @@
data-id="{{.ID}}"
>
<!-- Email summary -->
<div
class="email-summary px-4 py-2 hover:bg-gray-50 cursor-pointer flex justify-between items-center"
role="button"
tabindex="0"
aria-expanded="false"
>
<div class="flex-1 flex flex-wrap gap-4 items-baseline">
<div class="font-mono text-sm font-semibold text-gray-700 min-w-[180px]">
@@ -110,20 +131,23 @@
</span>
</div>
</div>
<!-- Email detail -->
<div class="email-detail hidden bg-gray-50 border-t border-gray-200 p-4">
<div class="email-content-wrapper">
<iframe
class="email-content-frame"
title="Email content"
sandbox="allow-same-origin allow-popups"
referrerpolicy="no-referrer"
srcdoc="<html><body style='margin:0;padding:15px;font-family:monospace;font-size:12px;'>Loading...</body></html>"
></iframe>
</div>
</div>
</article>
@@ -131,6 +155,7 @@
{{end}}
</div>
</section>
{{else}}
@@ -154,8 +179,10 @@
{{end}}
</main>
</div>
<script src="/static/app.js"></script>
</body>
</html>
web/login.html
+101
View File
@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>{{.Title}}</title>
<script src="/static/tailwind.js"></script>
<link
rel="stylesheet"
href="/static/app.css"
>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
<main class="w-full max-w-sm bg-white shadow border border-gray-200">
<header class="bg-gray-800 text-white px-6 py-4 border-b-4 border-red-600">
<h1 class="text-xl font-normal">
Fake SMTP Server
</h1>
<p class="text-gray-400 text-sm mt-1">
Sign in
</p>
</header>
<div class="p-6">
{{if .Error}}
<div class="mb-4 px-3 py-2 bg-red-50 border border-red-200 text-red-700 text-sm">
{{.Error}}
</div>
{{end}}
<form
method="post"
action="/login"
autocomplete="on"
>
<div class="mb-4">
<label
for="username"
class="block text-sm font-medium text-gray-700 mb-1"
>
Username
</label>
<input
id="username"
name="username"
type="text"
required
autofocus
autocomplete="username"
class="w-full border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:border-gray-500"
>
</div>
<div class="mb-5">
<label
for="password"
class="block text-sm font-medium text-gray-700 mb-1"
>
Password
</label>
<input
id="password"
name="password"
type="password"
required
autocomplete="current-password"
class="w-full border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:border-gray-500"
>
</div>
<button
type="submit"
class="w-full bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 text-sm"
>
Sign in
</button>
</form>
</div>
</main>
</body>
</html>