Этот документ расширяет предыдущую спецификацию до детального пошагового руководства. Каждый этап реализации расписан в виде модулей с исходным кодом, готовых к сборке утилитами `tangle` и `weave`.
---
## 1. Спецификация сборки проекта
```markdown
<<Файлы проекта>>=
<<Файл: server.js>>
<<Файл: index.html>>
<<Файл: sw.js>>
```
---
## 2. Этап 1: Сигнальный сервер (`server.js`)
Сервер координирует WebRTC-соединения через комнаты `socket.io`, не сохраняя историю сообщений и IP-адреса клиентов для защиты метаданных.
```javascript
<<Файл: server.js>>=
const http = require('http').createServer();
const io = require('socket.io')(http, {
cors: { origin: "*" },
// Отключение логирования транспорта для приватности
serveClient: false
});
io.on('connection', (socket) => {
// Шаг 1.2: Логика комнат (Rooms)
socket.on('join_room', (roomId) => {
socket.join(roomId);
});
// Шаг 1.3: Трансляция сигналов WebRTC
socket.on('signal', ({ roomId, data }) => {
socket.to(roomId).emit('signal', data);
});
});
// Шаг 1.4: Минимизация метаданных (отключение заголовков)
http.on('request', (req, res) => {
res.setHeader('X-Content-Type-Options', 'nosniff');
});
const PORT = process.env.PORT || 8080;
http.listen(PORT);
```
---
## 3. Этап 2: Каркас и база данных клиента (`index.html`)
Интерфейс, шина событий `EventBus` и локальное хранилище IndexedDB объединены в одном файле.
```html
<<Файл: index.html>>=
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>P2P Mixnet Node</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tweetnacl/1.0.3/nacl-fast.min.js"></script>
<script src="https://unpkg.com/dexie/dist/dexie.js"></script>
<script src="https://cdn.jsdelivr.net/npm/webtorrent@1/webtorrent.min.js"></script>
<style>
<<Нативная верстка>>
</style>
</head>
<body>
<div id="app">
<<HTML-интерфейс>>
</div>
<script>
<<Шаг 2.2: Класс EventBus>>
<<Шаг 2.4: Класс StorageService>>
<<Шаг 3: Класс CryptoService>>
<<Шаг 4 и 5: Класс NetworkService>>
<<Шаг 6: Класс UIService>>
// Инициализация
const bus = new EventBus();
const storage = new StorageService(bus);
const crypto = new CryptoService(bus);
const network = new NetworkService(bus);
const ui = new UIService(bus);
// Регистрация Service Worker (Шаг 7.1)
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js');
}
</script>
</body>
</html>
```
### 3.1. Нативная верстка и разметка интерфейса
```css
<<Нативная верстка>>=
body { font-family: monospace; background: #121212; color: #00ff00; padding: 20px; }
.tab { display: none; }
.tab.active { display: block; }
.nav-btn { background: #333; color: #00ff00; border: 1px solid #00ff00; cursor: pointer; }
```
```html
<<HTML-интерфейс>>=
<nav>
<button class="nav-btn" onclick="ui.switchTab('feed')">Лента</button>
<button class="nav-btn" onclick="ui.switchTab('create')">Создать пост</button>
<button class="nav-btn" onclick="ui.switchTab('config')">Профиль</button>
</nav>
<hr>
<div id="feed" class="tab active">
<h3>Лента постов</h3>
<div id="postsList"></div>
</div>
<div id="create" class="tab">
<form id="postForm">
<textarea id="postText" placeholder="Текст поста..." required></textarea>
<button type="submit" class="nav-btn">Опубликовать</button>
</form>
</div>
<div id="config" class="tab">
<h3>Профиль</h3>
<div id="peerStatus">Активные пиры: 0 | Шум: Выкл</div>
</div>
```
### 3.2. Локальная база данных Dexie.js
```javascript
<<Шаг 2.2: Класс EventBus>>=
class EventBus extends EventTarget {
publish(name, detail) { this.dispatchEvent(new CustomEvent(name, { detail })); }
subscribe(name, cb) { this.addEventListener(name, (e) => cb(e.detail)); }
}
```
```javascript
<<Шаг 2.4: Класс StorageService>>=
class StorageService {
constructor(bus) {
this.bus = bus;
// Шаг 2.3: Описание схемы данных IndexedDB
this.db = new Dexie('P2P_Mixnet_DB');
this.db.version(1).stores({
posts: 'id, authorPubKey, timestamp',
subscriptions: 'pubKey, nickName',
cache: 'chunkId'
});
this.initListeners();
}
initListeners() {
this.bus.subscribe('db:save_post', async (post) => {
await this.db.posts.put(post);
this.bus.publish('Storage:feed_updated');
});
}
async getFeed() {
return await this.db.posts.orderBy('timestamp').reverse().toArray();
}
}
```
---
## 4. Этап 3: Криптографическое ядро (`CryptoService`)
Использует `TweetNaCl.js` для шифрования, цифровой подписи и генерации ключей из парольной фразы.
```javascript
<<Шаг 3: Класс CryptoService>>=
class CryptoService {
constructor(bus) {
this.bus = bus;
this.bus.subscribe('crypto:sign_post', (data) => this.signPost(data));
}
// Шаг 3.1: Генерация ключей на базе PBKDF2 (эмуляция Scrypt)
async generateKeys(passphrase) {
const enc = new TextEncoder();
const keyMaterial = await crypto.subtle.importKey(
'raw', enc.encode(passphrase), { name: 'PBKDF2' }, false, ['deriveBits']
);
const seed = await crypto.subtle.deriveBits(
{ name: 'PBKDF2', salt: enc.encode('salt_nym'), iterations: 100000, hash: 'SHA-256' },
keyMaterial, 256
);
// Шаг 3.2: Ed25519 и X25519 ключи
this.signKeyPair = nacl.sign.keyPair.fromSeed(new Uint8Array(seed));
this.boxKeyPair = nacl.box.keyPair();
this.bus.publish('crypto:keys_ready', {
pubKey: this.signKeyPair.publicKey
});
}
// Шаг 3.3: Подпись поста
signPost({ text, timestamp }) {
const payload = new TextEncoder().encode(JSON.stringify({ text, timestamp }));
const signature = nacl.sign.detached(payload, this.signKeyPair.secretKey);
this.bus.publish('crypto:post_signed', { text, timestamp, signature, authorPubKey: this.signKeyPair.publicKey });
}
// Шаг 3.4: Валидатор подписи
verifySignature(payload, signature, pubKey) {
return nacl.sign.detached.verify(payload, signature, pubKey);
}
}
```
---
## 5. Этапы 4 и 5: Сетевой транспорт и защита метаданных (`NetworkService`)
Модуль фрагментирует данные на фиксированные чанки по $16\text{ КБ}$, вычисляет пуассоновские задержки отправки и маскирует реальный трафик фоновым шумом.
```javascript
<<Шаг 4 и 5: Класс NetworkService>>=
class NetworkService {
constructor(bus) {
this.bus = bus;
this.queue = [];
this.wt = new WebTorrent();
this.activePeers = 0;
this.lambda = 0.5; // Интенсивность отправки
this.bus.subscribe('net:send_data', (data) => this.handleOutgoing(data));
this.startPoissonScheduler();
this.startCoverTraffic();
}
// Шаг 4.1 и 4.2: Фрагментация и паддинг
prepareChunk(dataBuffer) {
const CHUNK_SIZE = 16384; // 16 KB
const padded = new Uint8Array(CHUNK_SIZE);
padded.set(dataBuffer);
return padded;
}
// Шаг 4.3: Пуассоновский интервал (задержка в мс)
getPoissonDelay() {
const u = Math.random() || 0.0001;
return -Math.log(u) / this.lambda * 1000;
}
handleOutgoing(data) {
const chunk = this.prepareChunk(new TextEncoder().encode(JSON.stringify(data)));
this.queue.push(chunk);
}
startPoissonScheduler() {
const send = () => {
if (this.queue.length > 0) {
const chunk = this.queue.shift();
this.transmit(chunk);
}
setTimeout(send, this.getPoissonDelay());
};
setTimeout(send, this.getPoissonDelay());
}
// Шаг 4.4: Имитация фоновой активности (Шум)
startCoverTraffic() {
const generateNoise = () => {
if (this.queue.length === 0 && this.activePeers > 0) {
const dummy = this.prepareChunk(nacl.randomBytes(128));
this.transmit(dummy);
this.bus.publish('net:noise_sent');
}
setTimeout(generateNoise, this.getPoissonDelay() * 2);
};
setTimeout(generateNoise, this.getPoissonDelay() * 2);
}
transmit(chunk) {
// Шаг 5.1 - 5.4: Инициализация раздачи WebTorrent чанков по DHT/Трэкерам
const buffer = Buffer.from(chunk.buffer);
this.wt.seed(buffer, { name: 'nym_chunk' }, (torrent) => {
this.bus.publish('net:chunk_seeded', torrent.magnetURI);
});
}
}
```
---
## 6. Этап 6: Интеграция интерфейса (`UIService`)
Управляет DOM, осуществляет переключение вкладок и подписывается на изменения базы данных.
```javascript
<<Шаг 6: Класс UIService>>=
class UIService {
constructor(bus) {
this.bus = bus;
this.form = document.getElementById('postForm');
this.feedContainer = document.getElementById('postsList');
this.initEvents();
this.bus.subscribe('Storage:feed_updated', () => this.renderFeed());
}
switchTab(tabId) {
document.querySelectorAll('.tab').forEach(el => el.classList.remove('active'));
document.getElementById(tabId).classList.add('active');
}
initEvents() {
this.form.addEventListener('submit', (e) => {
e.preventDefault();
const text = document.getElementById('postText').value;
this.bus.publish('crypto:sign_post', { text, timestamp: Date.now() });
document.getElementById('postText').value = '';
});
}
async renderFeed() {
// Вызов получения данных опосредованно через шину или прямой доступ к StorageService
const posts = await storage.getFeed();
this.feedContainer.innerHTML = posts.map(p => `
<div style="border: 1px solid #00ff00; margin: 10px 0; padding: 10px;">
<p>${p.text}</p>
<small>Автор: ${p.authorPubKey.substring(0, 16)}... | ${new Date(p.timestamp).toLocaleTimeString()}</small>
</div>
`).join('');
}
}
```
---
## 7. Этап 7: Локальное кэширование и автономность (`sw.js`)
Service Worker для обеспечения полностью автономной работы клиента без постоянного доступа к интернету.
```javascript
<<Файл: sw.js>>=
const CACHE_NAME = 'nym-p2p-cache-v1';
const ASSETS = [
'/',
'/index.html',
'https://cdnjs.cloudflare.com/ajax/libs/tweetnacl/1.0.3/nacl-fast.min.js',
'https://unpkg.com/dexie/dist/dexie.js',
'https://cdn.jsdelivr.net/npm/webtorrent@1/webtorrent.min.js'
];
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))
);
});
self.addEventListener('fetch', (e) => {
e.respondWith(
caches.match(e.request).then(response => response || fetch(e.request))
);
});
```
