391 lines
12 KiB
HTML
391 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>One-Time Pad Tool</title>
|
|
<style>
|
|
:root {
|
|
--bg-color: #030712;
|
|
--card-bg: #0b0f19;
|
|
--border-color: #1f293d;
|
|
--input-bg: #030712;
|
|
--text-main: #f9fafb;
|
|
--text-muted: #6b7280;
|
|
|
|
--primary: #2563eb;
|
|
--primary-hover: #1d4ed8;
|
|
|
|
--success-bg: rgba(6, 78, 59, 0.2);
|
|
--success-border: #059669;
|
|
--success-text: #34d399;
|
|
|
|
--error-bg: rgba(127, 29, 29, 0.2);
|
|
--error-border: #dc2626;
|
|
--error-text: #f87171;
|
|
}
|
|
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
max-width: 520px;
|
|
margin: 40px auto;
|
|
padding: 0 20px;
|
|
line-height: 1.5;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-main);
|
|
}
|
|
.card {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 24px;
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.8);
|
|
}
|
|
h2 {
|
|
margin-top: 0;
|
|
color: var(--text-main);
|
|
font-size: 1.35rem;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
label {
|
|
display: block;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
color: var(--text-main);
|
|
font-size: 0.9rem;
|
|
}
|
|
input[type="number"], select {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
box-sizing: border-box;
|
|
background-color: var(--input-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
color: var(--text-main);
|
|
font-size: 0.95rem;
|
|
}
|
|
input[type="file"] {
|
|
width: 100%;
|
|
padding: 8px;
|
|
box-sizing: border-box;
|
|
background-color: var(--input-bg);
|
|
border: 1px dashed var(--border-color);
|
|
border-radius: 6px;
|
|
color: var(--text-muted);
|
|
font-size: 0.85rem;
|
|
}
|
|
input[type="file"]::file-selector-button {
|
|
background: var(--border-color);
|
|
color: var(--text-main);
|
|
border: none;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin-right: 10px;
|
|
}
|
|
input:focus, select:focus {
|
|
outline: 2px solid var(--primary);
|
|
border-color: transparent;
|
|
}
|
|
button {
|
|
width: 100%;
|
|
padding: 12px;
|
|
margin-top: 8px;
|
|
background-color: var(--primary);
|
|
color: #ffffff;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
button:hover {
|
|
background-color: var(--primary-hover);
|
|
}
|
|
.info {
|
|
margin-top: 14px;
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
}
|
|
.status {
|
|
margin-top: 16px;
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
display: none;
|
|
font-size: 0.85rem;
|
|
line-height: 1.6;
|
|
}
|
|
.status.success {
|
|
background-color: var(--success-bg);
|
|
color: var(--success-text);
|
|
border: 1px solid var(--success-border);
|
|
}
|
|
.status.error {
|
|
background-color: var(--error-bg);
|
|
color: var(--error-text);
|
|
border: 1px solid var(--error-border);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="card">
|
|
<h2>One-Time Pad Cipher Tool</h2>
|
|
|
|
<div class="form-group">
|
|
<label for="modeSelect">Operation Mode:</label>
|
|
<select id="modeSelect">
|
|
<option value="encode-new">Encrypt File (Generate New Pad)</option>
|
|
<option value="encode-existing">Encrypt File (Use Existing Pad)</option>
|
|
<option value="decode-existing">Decrypt File (Use Existing Pad)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" id="messageGroup">
|
|
<label for="messageInput">Select File / Message:</label>
|
|
<input type="file" id="messageInput">
|
|
</div>
|
|
|
|
<div class="form-group" id="padGroup" style="display: none;">
|
|
<label for="padInput">Select Existing Key Pad (.pad):</label>
|
|
<input type="file" id="padInput">
|
|
</div>
|
|
|
|
<div class="form-group" id="sizeGroup">
|
|
<label for="multiplier">Pad Block Multiplier (X*16-bits):</label>
|
|
<input type="number" id="multiplier" min="1" value="600" placeholder="Enter an integer">
|
|
<div class="info" id="bitCountInfo">
|
|
Generated pad size: 9,600 bits (1,200 bytes)
|
|
</div>
|
|
</div>
|
|
|
|
<button id="processBtn">Process & Download</button>
|
|
|
|
<div id="statusBox" class="status"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const modeSelect = document.getElementById('modeSelect');
|
|
const messageInput = document.getElementById('messageInput');
|
|
const padInput = document.getElementById('padInput');
|
|
const multiplierInput = document.getElementById('multiplier');
|
|
const bitCountInfo = document.getElementById('bitCountInfo');
|
|
const processBtn = document.getElementById('processBtn');
|
|
const statusBox = document.getElementById('statusBox');
|
|
|
|
const padGroup = document.getElementById('padGroup');
|
|
const sizeGroup = document.getElementById('sizeGroup');
|
|
|
|
// Toggle visible UI controls depending on selected mode
|
|
modeSelect.addEventListener('change', () => {
|
|
const mode = modeSelect.value;
|
|
if (mode === 'encode-new') {
|
|
padGroup.style.display = 'none';
|
|
sizeGroup.style.display = 'block';
|
|
} else {
|
|
padGroup.style.display = 'block';
|
|
sizeGroup.style.display = 'none';
|
|
}
|
|
statusBox.style.display = 'none';
|
|
});
|
|
|
|
multiplierInput.addEventListener('input', () => {
|
|
const x = parseInt(multiplierInput.value, 10) || 0;
|
|
const bits = x * 16;
|
|
const bytes = bits / 8;
|
|
bitCountInfo.textContent = `Generated pad size: ${bits.toLocaleString()} bits (${bytes.toLocaleString()} bytes)`;
|
|
});
|
|
|
|
multiplierInput.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
processBtn.click();
|
|
}
|
|
});
|
|
|
|
// Complementary error function approximation (NIST randomness testing helper)
|
|
function erfc(x) {
|
|
const z = Math.abs(x);
|
|
const t = 1.0 / (1.0 + 0.5 * z);
|
|
const ans = t * Math.exp(-z * z - 1.26551223 +
|
|
t * (1.00002368 +
|
|
t * (0.37409196 +
|
|
t * (0.09678418 +
|
|
t * (-0.18628806 +
|
|
t * (0.27886807 +
|
|
t * (-1.13520398 +
|
|
t * (1.48851587 +
|
|
t * (-0.82215223 +
|
|
t * 0.17087277))))))))) ;
|
|
return x >= 0 ? ans : 2.0 - ans;
|
|
}
|
|
|
|
// NIST SP 800-22 Frequency (Monobit) Test
|
|
function runMonobitTest(uint8Array) {
|
|
let sum = 0;
|
|
const totalBits = uint8Array.length * 8;
|
|
|
|
for (let i = 0; i < uint8Array.length; i++) {
|
|
let byte = uint8Array[i];
|
|
for (let bit = 0; bit < 8; bit++) {
|
|
sum += ((byte >> bit) & 1) ? 1 : -1;
|
|
}
|
|
}
|
|
|
|
const sObs = Math.abs(sum) / Math.sqrt(totalBits);
|
|
const pValue = erfc(sObs / Math.sqrt(2));
|
|
|
|
return {
|
|
passed: pValue >= 0.01,
|
|
pValue: pValue,
|
|
totalBits: totalBits,
|
|
onesCount: (totalBits + sum) / 2
|
|
};
|
|
}
|
|
|
|
function generateRandom8Digits() {
|
|
const randomBuffer = new Uint32Array(1);
|
|
window.crypto.getRandomValues(randomBuffer);
|
|
const num = 10000000 + (randomBuffer[0] % 90000000);
|
|
return num.toString();
|
|
}
|
|
|
|
// Reads a File object into an ArrayBuffer asynchronously
|
|
function readFileAsBuffer(file) {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.onload = () => resolve(new Uint8Array(reader.result));
|
|
reader.onerror = () => reject(reader.error);
|
|
reader.readAsArrayBuffer(file);
|
|
});
|
|
}
|
|
|
|
// Helper to trigger direct browser file download
|
|
function triggerDownload(uint8Array, filename) {
|
|
const blob = new Blob([uint8Array], { type: 'application/octet-stream' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = filename;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
processBtn.addEventListener('click', async () => {
|
|
statusBox.style.display = 'none';
|
|
const mode = modeSelect.value;
|
|
|
|
if (!messageInput.files.length) {
|
|
alert('Please select a input message/file to process.');
|
|
return;
|
|
}
|
|
|
|
const messageFile = messageInput.files[0];
|
|
let messageData;
|
|
|
|
try {
|
|
messageData = await readFileAsBuffer(messageFile);
|
|
} catch (err) {
|
|
alert('Error reading input message file: ' + err.message);
|
|
return;
|
|
}
|
|
|
|
const randomPrefix = generateRandom8Digits();
|
|
|
|
// MODE 1: Encrypt with a newly generated CSPRNG pad
|
|
if (mode === 'encode-new') {
|
|
const x = parseInt(multiplierInput.value, 10);
|
|
if (isNaN(x) || x < 1) {
|
|
alert('Please enter a valid positive integer for X.');
|
|
return;
|
|
}
|
|
|
|
const generatedPadByteCount = x * 2;
|
|
if (messageData.length > generatedPadByteCount) {
|
|
statusBox.className = 'status error';
|
|
statusBox.innerHTML = `<strong>Encryption Failed!</strong><br>Message size (${messageData.length.toLocaleString()} bytes) exceeds pad size (${generatedPadByteCount.toLocaleString()} bytes). Increase X.`;
|
|
statusBox.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
const padData = new Uint8Array(generatedPadByteCount);
|
|
window.crypto.getRandomValues(padData);
|
|
|
|
const testResult = runMonobitTest(padData);
|
|
if (!testResult.passed) {
|
|
statusBox.className = 'status error';
|
|
statusBox.innerHTML = `<strong>Randomness Check Failed!</strong><br>Generated key failed Monobit test (P-value: ${testResult.pValue.toFixed(4)} < 0.01). Process aborted.`;
|
|
statusBox.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
// Bitwise XOR encryption
|
|
const cipherData = new Uint8Array(messageData.length);
|
|
for (let i = 0; i < messageData.length; i++) {
|
|
cipherData[i] = messageData[i] ^ padData[i];
|
|
}
|
|
|
|
// Trigger downloads for both the cipher text and key pad
|
|
triggerDownload(cipherData, `${randomPrefix}_${messageFile.name}.enc`);
|
|
triggerDownload(padData, `${randomPrefix}_onetime_${x}x16bits.pad`);
|
|
|
|
statusBox.className = 'status success';
|
|
statusBox.innerHTML = `<strong>Encryption Complete!</strong><br>` +
|
|
`Monobit P-value: ${testResult.pValue.toFixed(4)}<br>` +
|
|
`Downloaded: Encrypted payload and matching <code>.pad</code> key.`;
|
|
statusBox.style.display = 'block';
|
|
}
|
|
|
|
// MODE 2 & 3: Encrypt or Decrypt using a supplied .pad file
|
|
else {
|
|
if (!padInput.files.length) {
|
|
alert('Please select an existing .pad file.');
|
|
return;
|
|
}
|
|
|
|
let padData;
|
|
try {
|
|
padData = await readFileAsBuffer(padInput.files[0]);
|
|
} catch (err) {
|
|
alert('Error reading key pad file: ' + err.message);
|
|
return;
|
|
}
|
|
|
|
if (messageData.length > padData.length) {
|
|
statusBox.className = 'status error';
|
|
statusBox.innerHTML = `<strong>Process Failed!</strong><br>Payload length (${messageData.length.toLocaleString()} bytes) exceeds key pad length (${padData.length.toLocaleString()} bytes).`;
|
|
statusBox.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
// Bitwise XOR operation (Symmetric)
|
|
const outputData = new Uint8Array(messageData.length);
|
|
for (let i = 0; i < messageData.length; i++) {
|
|
outputData[i] = messageData[i] ^ padData[i];
|
|
}
|
|
|
|
if (mode === 'encode-existing') {
|
|
triggerDownload(outputData, `${randomPrefix}_${messageFile.name}.enc`);
|
|
statusBox.className = 'status success';
|
|
statusBox.innerHTML = `<strong>Encryption Complete!</strong><br>File encrypted using supplied key pad.`;
|
|
} else {
|
|
// Strip .enc extension if present during decryption
|
|
let originalName = messageFile.name.replace(/\.enc$/i, '');
|
|
triggerDownload(outputData, `decrypted_${originalName}`);
|
|
statusBox.className = 'status success';
|
|
statusBox.innerHTML = `<strong>Decryption Complete!</strong><br>File successfully decrypted using supplied key pad.`;
|
|
}
|
|
|
|
statusBox.style.display = 'block';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |