Files
stegasoo/frontends/web/templates/about.html
2025-12-31 18:39:14 -05:00

532 lines
29 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{% extends "base.html" %}
{% block title %}About - Stegasoo{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>About Stegasoo</h5>
</div>
<div class="card-body">
<p class="lead">
Stegasoo is a secure steganography tool that hides encrypted messages and files
inside ordinary images using multi-factor authentication.
</p>
<h6 class="text-primary mt-4 mb-3"><i class="bi bi-stars me-2"></i>Key Features</h6>
<div class="row">
<div class="col-md-6">
<ul class="list-unstyled">
<li class="mb-2">
<i class="bi bi-check-circle text-success me-2"></i>
<strong>Text &amp; File Embedding</strong>
<br><small class="text-muted">Hide messages or any file type (PDF, ZIP, documents)</small>
</li>
<li class="mb-2">
<i class="bi bi-check-circle text-success me-2"></i>
<strong>Multi-Factor Security</strong>
<br><small class="text-muted">Combines photo + phrase + PIN/RSA key</small>
</li>
<li class="mb-2">
<i class="bi bi-check-circle text-success me-2"></i>
<strong>AES-256-GCM Encryption</strong>
<br><small class="text-muted">Military-grade authenticated encryption</small>
</li>
<li class="mb-2">
<i class="bi bi-check-circle text-success me-2"></i>
<strong>Daily Rotating Phrases</strong>
<br><small class="text-muted">Different passphrase each day of the week</small>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-unstyled">
<li class="mb-2">
<i class="bi bi-check-circle text-success me-2"></i>
<strong>DCT Mode</strong>
<span class="badge bg-warning text-dark ms-1">v3.0</span>
<br><small class="text-muted">Survives JPEG recompression for social media</small>
</li>
<li class="mb-2">
<i class="bi bi-check-circle text-success me-2"></i>
<strong>Random Pixel Embedding</strong>
<br><small class="text-muted">Defeats statistical steganalysis</small>
</li>
<li class="mb-2">
<i class="bi bi-check-circle text-success me-2"></i>
<strong>Large Capacity</strong>
<br><small class="text-muted">Up to {{ max_payload_kb }} KB payload, 24MP images</small>
</li>
<li class="mb-2">
<i class="bi bi-check-circle text-success me-2"></i>
<strong>Zero Server Storage</strong>
<br><small class="text-muted">Nothing saved, files auto-expire</small>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Embedding Modes - NEW SECTION -->
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-cpu me-2"></i>Embedding Modes</h5>
</div>
<div class="card-body">
<p>
<span class="badge bg-warning text-dark me-1">New in v3.0</span>
Stegasoo now supports two embedding modes, each optimized for different use cases.
</p>
<div class="row mt-4">
<!-- LSB Mode -->
<div class="col-md-6 mb-4">
<div class="card bg-dark h-100">
<div class="card-header">
<i class="bi bi-grid-3x3-gap text-primary me-2"></i>
<strong>LSB Mode</strong>
<span class="badge bg-success ms-2">Default</span>
</div>
<div class="card-body">
<p class="small">
<strong>LSB (Least Significant Bit)</strong> embeds data in the lowest bit
of each color channel. Changing the LSB changes pixel values by at most 1,
which is imperceptible to the human eye.
</p>
<ul class="small mb-0">
<li><strong>Capacity:</strong> ~375 KB per megapixel</li>
<li><strong>Output:</strong> PNG (lossless)</li>
<li><strong>Color:</strong> Full color preserved</li>
<li><strong>Speed:</strong> Fast (~0.5s)</li>
</ul>
<hr>
<div class="small">
<i class="bi bi-check-circle text-success me-1"></i> Email attachments<br>
<i class="bi bi-check-circle text-success me-1"></i> Cloud storage (Dropbox, Drive)<br>
<i class="bi bi-check-circle text-success me-1"></i> Direct file transfer<br>
<i class="bi bi-x-circle text-danger me-1"></i> Social media (recompresses)
</div>
</div>
</div>
</div>
<!-- DCT Mode -->
<div class="col-md-6 mb-4">
<div class="card bg-dark h-100">
<div class="card-header">
<i class="bi bi-soundwave text-warning me-2"></i>
<strong>DCT Mode</strong>
<span class="badge bg-warning text-dark ms-2">v3.0</span>
</div>
<div class="card-body">
<p class="small">
<strong>DCT (Discrete Cosine Transform)</strong> embeds data in frequency
coefficients rather than raw pixels. This survives JPEG recompression
because coefficients are preserved during re-encoding.
</p>
<ul class="small mb-0">
<li><strong>Capacity:</strong> ~75 KB per megapixel</li>
<li><strong>Output:</strong> JPEG or PNG</li>
<li><strong>Color:</strong> Color or grayscale</li>
<li><strong>Speed:</strong> Slower (~2s)</li>
</ul>
<hr>
<div class="small">
<i class="bi bi-check-circle text-success me-1"></i> Instagram, Facebook<br>
<i class="bi bi-check-circle text-success me-1"></i> WhatsApp, Signal, Telegram<br>
<i class="bi bi-check-circle text-success me-1"></i> Twitter/X<br>
<i class="bi bi-check-circle text-success me-1"></i> Any platform that recompresses
</div>
</div>
</div>
</div>
</div>
<!-- Mode Comparison Table -->
<h6 class="mt-3"><i class="bi bi-table me-2"></i>Comparison</h6>
<div class="table-responsive">
<table class="table table-dark table-sm small">
<thead>
<tr>
<th>Aspect</th>
<th>LSB Mode</th>
<th>DCT Mode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Capacity (1080p)</td>
<td class="text-success">~770 KB</td>
<td class="text-warning">~50 KB</td>
</tr>
<tr>
<td>Survives JPEG</td>
<td class="text-danger">❌ No</td>
<td class="text-success">✅ Yes</td>
</tr>
<tr>
<td>Social Media</td>
<td class="text-danger">❌ Broken</td>
<td class="text-success">✅ Works</td>
</tr>
<tr>
<td>Detection Resistance</td>
<td>Moderate</td>
<td>Better</td>
</tr>
<tr>
<td>Dependencies</td>
<td>Pillow, NumPy</td>
<td>+ scipy, jpegio</td>
</tr>
</tbody>
</table>
</div>
<div class="alert alert-info small mt-3 mb-0">
<i class="bi bi-lightbulb me-2"></i>
<strong>Auto-Detection:</strong> When decoding, Stegasoo automatically detects whether
LSB or DCT mode was used. You don't need to specify the mode during decoding.
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-shield-lock me-2"></i>How Security Works</h5>
</div>
<div class="card-body">
<p>Stegasoo uses <strong>hybrid multi-factor authentication</strong> to derive encryption keys:</p>
<div class="row text-center my-4">
<div class="col-md-3 mb-3">
<div class="p-3 bg-dark rounded">
<i class="bi bi-image text-info fs-2 d-block mb-2"></i>
<strong>Reference Photo</strong>
<div class="small text-muted mt-1">Something you have</div>
<div class="small text-success">~80-256 bits</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="p-3 bg-dark rounded">
<i class="bi bi-chat-quote text-warning fs-2 d-block mb-2"></i>
<strong>Daily Phrase</strong>
<div class="small text-muted mt-1">Something you know (rotates)</div>
<div class="small text-success">~33 bits (3 words)</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="p-3 bg-dark rounded">
<i class="bi bi-123 text-danger fs-2 d-block mb-2"></i>
<strong>Static PIN</strong>
<div class="small text-muted mt-1">Something you know (fixed)</div>
<div class="small text-success">~20 bits (6 digits)</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="p-3 bg-dark rounded">
<i class="bi bi-key text-primary fs-2 d-block mb-2"></i>
<strong>RSA Key</strong>
<div class="small text-muted mt-1">Something you have (optional)</div>
<div class="small text-success">~128 bits (2048-bit)</div>
</div>
</div>
</div>
<div class="alert alert-secondary">
<i class="bi bi-calculator me-2"></i>
<strong>Combined entropy:</strong> 130-400+ bits depending on configuration.
For reference, 128 bits is considered computationally infeasible to brute force.
</div>
<h6 class="mt-4">Key Derivation</h6>
<p>
{% if has_argon2 %}
<span class="badge bg-success me-1"><i class="bi bi-check"></i> Argon2id Available</span>
Using <strong>Argon2id</strong> with 256MB memory cost — the winner of the Password Hashing Competition
and current best practice for key derivation. This makes GPU/ASIC attacks infeasible.
{% else %}
<span class="badge bg-warning text-dark me-1"><i class="bi bi-exclamation-triangle"></i> Argon2 Not Available</span>
Falling back to <strong>PBKDF2-SHA512</strong> with 600,000 iterations.
Install <code>argon2-cffi</code> for stronger security.
{% endif %}
</p>
<h6 class="mt-4">Steganography Techniques</h6>
<p>
<strong>LSB Mode:</strong> Uses Least Significant Bit embedding with pseudo-random pixel selection.
The pixel locations are determined by a key derived from your credentials, making the
hidden data's location unpredictable without the correct inputs.
</p>
<p>
<strong>DCT Mode:</strong> Uses Discrete Cosine Transform embedding with Quantization Index Modulation (QIM).
Data is hidden in mid-frequency coefficients of 8×8 blocks, making it resilient to JPEG recompression.
{% if has_dct %}
<span class="badge bg-success"><i class="bi bi-check"></i> DCT Available</span>
{% else %}
<span class="badge bg-secondary">DCT Requires scipy</span>
{% endif %}
</p>
</div>
</div>
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-file-earmark-binary me-2"></i>File Embedding</h5>
</div>
<div class="card-body">
<p>
Stegasoo supports embedding <strong>any file type</strong>, not just text messages.
</p>
<div class="row">
<div class="col-md-6">
<h6><i class="bi bi-check2-square text-success me-2"></i>Supported</h6>
<ul class="small">
<li>PDF documents</li>
<li>ZIP/RAR archives</li>
<li>Office documents (DOCX, XLSX, PPTX)</li>
<li>Source code files</li>
<li>Any binary file up to {{ max_payload_kb }} KB</li>
</ul>
</div>
<div class="col-md-6">
<h6><i class="bi bi-info-circle text-info me-2"></i>How It Works</h6>
<ul class="small">
<li>Original filename is preserved</li>
<li>MIME type is stored for proper handling</li>
<li>File is encrypted identically to text</li>
<li>Decoding auto-detects text vs. file</li>
</ul>
</div>
</div>
<div class="alert alert-info small mt-3">
<i class="bi bi-lightbulb me-2"></i>
<strong>Tip:</strong> For larger files, compress them first (ZIP) to maximize capacity.
Note that DCT mode has ~10× less capacity than LSB mode.
</div>
</div>
</div>
<!-- REST API Card -->
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-braces me-2"></i>REST API</h5>
</div>
<div class="card-body">
<p>
<span class="badge bg-success me-1"><i class="bi bi-check-circle"></i> FastAPI</span>
Stegasoo includes a complete REST API with automatic documentation and type validation.
</p>
<h6 class="mt-4"><i class="bi bi-layers me-2"></i>Endpoints</h6>
<div class="row">
<div class="col-md-6">
<ul class="small">
<li><code>POST /generate</code> Generate credentials</li>
<li><code>POST /encode</code> Encode text (JSON)</li>
<li><code>POST /encode/multipart</code> Encode with uploads</li>
<li><code>POST /decode</code> Decode message (JSON)</li>
<li><code>POST /decode/multipart</code> Decode with uploads</li>
</ul>
</div>
<div class="col-md-6">
<ul class="small">
<li><code>POST /image/info</code> Get image capacity</li>
<li><code>POST /extract-key-from-qr</code> Extract RSA from QR</li>
<li><code>GET /</code> API status and capabilities</li>
<li><code>GET /docs</code> Swagger documentation</li>
<li><code>GET /redoc</code> ReDoc documentation</li>
</ul>
</div>
</div>
<h6 class="mt-4"><i class="bi bi-code-slash me-2"></i>Example: DCT Encode</h6>
<pre class="bg-dark p-3 rounded small"><code># Encode with DCT mode for social media
curl -X POST "http://localhost:8000/encode/multipart" \
-F "day_phrase=apple forest thunder" \
-F "pin=123456" \
-F "embedding_mode=dct" \
-F "output_format=jpeg" \
-F "reference_photo=@photo.jpg" \
-F "carrier=@meme.png" \
-F "message=secret message" \
--output stego.jpg</code></pre>
<h6 class="mt-4"><i class="bi bi-terminal me-2"></i>Command Line</h6>
<pre class="bg-dark p-3 rounded small"><code># Generate credentials
stegasoo generate --pin --words 3
# Encode with LSB (default)
stegasoo encode -r photo.jpg -c meme.png -p "phrase" --pin 123456 -m "secret"
# Encode with DCT for social media
stegasoo encode -r photo.jpg -c meme.png -p "phrase" --pin 123456 -m "secret" \
--mode dct --format jpeg
# Decode (auto-detects mode)
stegasoo decode -r photo.jpg -s stego.png -p "phrase" --pin 123456</code></pre>
<p class="small text-muted mt-3 mb-0">
<span class="badge bg-{% if has_argon2 %}success{% else %}warning{% endif %} me-1">
{% if has_argon2 %}Argon2{% else %}PBKDF2{% endif %}
</span>
<span class="badge bg-{% if has_dct %}success{% else %}secondary{% endif %} me-1">
{% if has_dct %}DCT Available{% else %}DCT Unavailable{% endif %}
</span>
<span class="badge bg-{% if has_qrcode_read %}success{% else %}secondary{% endif %}">
{% if has_qrcode_read %}QR Reading{% else %}No QR Reading{% endif %}
</span>
</p>
</div>
</div>
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-question-circle me-2"></i>Usage Guide</h5>
</div>
<div class="card-body">
<div class="accordion" id="usageAccordion">
<div class="accordion-item bg-dark">
<h2 class="accordion-header">
<button class="accordion-button bg-dark text-light" type="button"
data-bs-toggle="collapse" data-bs-target="#setup">
<i class="bi bi-1-circle me-2"></i>Initial Setup
</button>
</h2>
<div id="setup" class="accordion-collapse collapse show" data-bs-parent="#usageAccordion">
<div class="accordion-body">
<ol>
<li>Both parties agree on a <strong>reference photo</strong> (shared secretly, never transmitted)</li>
<li>Go to <a href="/generate">Generate</a> and create credentials</li>
<li><strong>Memorize</strong> the 7 daily phrases and PIN</li>
<li>If using RSA, download and securely store the key file</li>
<li>Share credentials with your contact through a secure channel</li>
</ol>
</div>
</div>
</div>
<div class="accordion-item bg-dark">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-dark text-light" type="button"
data-bs-toggle="collapse" data-bs-target="#encoding">
<i class="bi bi-2-circle me-2"></i>Encoding a Message
</button>
</h2>
<div id="encoding" class="accordion-collapse collapse" data-bs-parent="#usageAccordion">
<div class="accordion-body">
<ol>
<li>Go to <a href="/encode">Encode</a></li>
<li>Choose your <strong>embedding mode</strong>:
<ul>
<li><strong>LSB</strong> for email, cloud storage, direct transfer</li>
<li><strong>DCT</strong> for social media (Instagram, WhatsApp, etc.)</li>
</ul>
</li>
<li>Upload your <strong>reference photo</strong> and <strong>carrier image</strong></li>
<li>Enter your message or select a file to embed</li>
<li>Enter <strong>today's phrase</strong> and your PIN/key</li>
<li>Download the resulting stego image</li>
<li>Send through any channel!</li>
</ol>
</div>
</div>
</div>
<div class="accordion-item bg-dark">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-dark text-light" type="button"
data-bs-toggle="collapse" data-bs-target="#decoding">
<i class="bi bi-3-circle me-2"></i>Decoding a Message
</button>
</h2>
<div id="decoding" class="accordion-collapse collapse" data-bs-parent="#usageAccordion">
<div class="accordion-body">
<ol>
<li>Go to <a href="/decode">Decode</a></li>
<li>Upload your <strong>reference photo</strong> (same one used for encoding)</li>
<li>Upload the <strong>stego image</strong> you received</li>
<li>Enter the phrase for <strong>the day it was encoded</strong></li>
<li>Enter your PIN and/or RSA key</li>
<li>View the decoded message or download the extracted file</li>
</ol>
<div class="alert alert-info small mt-3 mb-0">
<i class="bi bi-magic me-2"></i>
<strong>Auto-detection:</strong> Stegasoo automatically detects LSB vs DCT mode.
The filename contains the encoding date (e.g., <code>abc123_20251231.png</code>).
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-speedometer2 me-2"></i>Limits &amp; Specifications</h5>
</div>
<div class="card-body">
<table class="table table-dark table-striped small">
<tbody>
<tr>
<td><i class="bi bi-file-text me-2"></i>Max text message</td>
<td><strong>2 million characters</strong></td>
</tr>
<tr>
<td><i class="bi bi-file-earmark me-2"></i>Max file payload</td>
<td><strong>{{ max_payload_kb }} KB</strong></td>
</tr>
<tr>
<td><i class="bi bi-image me-2"></i>Max carrier image</td>
<td><strong>24 megapixels</strong> (~6000×4000)</td>
</tr>
<tr>
<td><i class="bi bi-grid-3x3 me-2"></i>LSB capacity</td>
<td><strong>~375 KB/megapixel</strong></td>
</tr>
<tr>
<td><i class="bi bi-soundwave me-2"></i>DCT capacity</td>
<td><strong>~75 KB/megapixel</strong></td>
</tr>
<tr>
<td><i class="bi bi-upload me-2"></i>Max upload size</td>
<td><strong>30 MB</strong></td>
</tr>
<tr>
<td><i class="bi bi-clock me-2"></i>Temp file expiry</td>
<td><strong>5 minutes</strong></td>
</tr>
<tr>
<td><i class="bi bi-key me-2"></i>PIN length</td>
<td><strong>6-9 digits</strong></td>
</tr>
<tr>
<td><i class="bi bi-shield me-2"></i>RSA key sizes</td>
<td><strong>2048, 3072, 4096 bits</strong></td>
</tr>
<tr>
<td><i class="bi bi-chat-quote me-2"></i>Phrase length</td>
<td><strong>3-12 words</strong> (BIP-39)</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="text-center mt-4 text-muted small">
<p>
Stegasoo v{{ version }} &bull;
<i class="bi bi-github me-1"></i>Open Source &bull;
Built with Python, Flask/FastAPI, and cryptography
</p>
</div>
</div>
</div>
{% endblock %}