Files
stegasoo/frontends/web/templates/about.html
2025-12-30 00:23:09 -05:00

468 lines
24 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/>Hide messages or any file type (PDF, ZIP, documents)
</li>
<li class="mb-2">
<i class="bi bi-check-circle text-success me-2"></i>
<strong>Multi-Factor Security</strong>
<br/>Combines photo + phrase + PIN/RSA key
</li>
<li class="mb-2">
<i class="bi bi-check-circle text-success me-2"></i>
<strong>AES-256-GCM Encryption</strong>
<br/>Military-grade authenticated encryption
</li>
<li class="mb-2">
<i class="bi bi-check-circle text-success me-2"></i>
<strong>Daily Rotating Phrases</strong>
<br/>Different passphrase each day of the week
</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>Random Pixel Embedding</strong>
<br/>Defeats statistical steganalysis
</li>
<li class="mb-2">
<i class="bi bi-check-circle text-success me-2"></i>
<strong>Format Preservation</strong>
<br/>Maintains PNG/BMP lossless formats
</li>
<li class="mb-2">
<i class="bi bi-check-circle text-success me-2"></i>
<strong>Large Capacity</strong>
<br/>Up to {{ max_payload_kb }} KB payload, 24MP images
</li>
<li class="mb-2">
<i class="bi bi-check-circle text-success me-2"></i>
<strong>Zero Server Storage</strong>
<br/>Nothing saved, files auto-expire and are scrubbed from disk.
</li>
</ul>
</div>
</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.
{% 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 Technique</h6>
<p>
Uses <strong>LSB (Least Significant Bit)</strong> 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>
</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>
<span class="badge bg-info me-1">New in v2.1</span>
Stegasoo now 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.
A 16MP carrier image can hold approximately 6MB of raw data, but we limit payloads
to {{ max_payload_kb }} KB for reasonable processing times.
</div>
</div>
</div>
<!-- REST API Card - UPDATED BASED ON CURRENT IMPLEMENTATION -->
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-cpu 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 built with FastAPI, featuring automatic documentation,
type validation, and comprehensive error handling.
</p>
<h6 class="mt-4"><i class="bi bi-layers me-2"></i>API 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 message (JSON)</li>
<li><code>POST /encode/file</code> Encode binary file (JSON)</li>
<li><code>POST /encode/multipart</code> Encode with file uploads</li>
<li><code>POST /decode</code> Decode message (JSON)</li>
</ul>
</div>
<div class="col-md-6">
<ul class="small">
<li><code>POST /decode/multipart</code> Decode with file uploads</li>
<li><code>POST /extract-key-from-qr</code> Extract RSA key from QR</li>
<li><code>POST /image/info</code> Get image capacity</li>
<li><code>GET /</code> API status and capabilities</li>
</ul>
</div>
</div>
<div class="alert alert-info small mt-3">
<i class="bi bi-info-circle me-2"></i>
<strong>Note:</strong> The <code>/encode/multipart</code> endpoint returns the PNG image directly
(with headers indicating metadata), while <code>/decode/multipart</code> returns JSON.
Use <code>--output</code> flag to save responses to files.
</div>
<h6 class="mt-4"><i class="bi bi-file-earmark-code me-2"></i>JSON API Examples</h6>
<pre class="bg-dark p-3 rounded"><code>// Generate credentials
curl -X POST "http://localhost:8000/generate" \
-H "Content-Type: application/json" \
-d '{"use_pin": true, "use_rsa": false, "pin_length": 6, "words_per_phrase": 3}'
// Encode text message (images must be base64 encoded first)
// First encode images: base64 -w0 photo.jpg > photo.b64
curl -X POST "http://localhost:8000/encode" \
-H "Content-Type: application/json" \
-d '{
"message": "secret message",
"reference_photo_base64": "'"$(cat photo.b64)"'",
"carrier_image_base64": "'"$(cat carrier.b64)"'",
"day_phrase": "apple forest thunder",
"pin": "123456"
}'
// Encode file (base64) - encode file first: base64 -w0 document.pdf > doc.b64
curl -X POST "http://localhost:8000/encode/file" \
-H "Content-Type: application/json" \
-d '{
"file_data_base64": "'"$(cat doc.b64)"'",
"filename": "document.pdf",
"reference_photo_base64": "'"$(cat photo.b64)"'",
"carrier_image_base64": "'"$(cat carrier.b64)"'",
"day_phrase": "apple forest thunder",
"pin": "123456"
}'</code></pre>
<h6 class="mt-4"><i class="bi bi-upload me-2"></i>Multipart API Examples</h6>
<pre class="bg-dark p-3 rounded"><code># Encode text with file uploads
curl -X POST "http://localhost:8000/encode/multipart" \
-F "day_phrase=apple forest thunder" \
-F "pin=123456" \
-F "reference_photo=@photo.jpg" \
-F "carrier=@carrier.png" \
-F "message=secret" \
--output stego.png
# Encode file (no message field when using payload_file)
curl -X POST "http://localhost:8000/encode/multipart" \
-F "day_phrase=apple forest thunder" \
-F "pin=123456" \
-F "reference_photo=@photo.jpg" \
-F "carrier=@carrier.png" \
-F "payload_file=@document.pdf" \
--output stego.png
# Encode with RSA key from QR code (optional)
curl -X POST "http://localhost:8000/encode/multipart" \
-F "day_phrase=apple forest thunder" \
-F "pin=123456" \
-F "reference_photo=@photo.jpg" \
-F "carrier=@carrier.png" \
-F "message=secret" \
-F "rsa_key_qr=@keyqr.png" \
--output stego.png
# Decode with file uploads (returns JSON)
curl -X POST "http://localhost:8000/decode/multipart" \
-F "day_phrase=apple forest thunder" \
-F "pin=123456" \
-F "reference_photo=@photo.jpg" \
-F "stego_image=@stego.png" \
--output result.json</code></pre>
<h6 class="mt-4"><i class="bi bi-qr-code me-2"></i>QR Code Support</h6>
<p class="small">
The API can extract RSA keys from QR code images. QR code reading requires
<code>pyzbar</code> and <code>libzbar</code> system library.
</p>
<pre class="bg-dark p-3 rounded"><code># Extract key from QR code (returns JSON)
curl -X POST "http://localhost:8000/extract-key-from-qr" \
-F "qr_image=@keyqr.png"</code></pre>
<div class="alert alert-info small mt-3">
<i class="bi bi-journal-text me-2"></i>
<strong>Interactive Documentation:</strong> When running the API server, visit
<code>/docs</code> for Swagger UI or <code>/redoc</code> for ReDoc documentation.
All endpoints include detailed schemas and example requests.
</div>
<h6 class="mt-4"><i class="bi bi-terminal me-2"></i>Command Line Interface</h6>
<p class="small">
Stegasoo also includes a full-featured CLI. Install with <code>pip install stegasoo[cli]</code>
or see the <a href="/cli">CLI documentation</a> for complete usage.
</p>
<pre class="bg-dark p-3 rounded"><code># CLI Examples
stegasoo generate --pin --words 3
stegasoo encode -r photo.jpg -c meme.png -p "phrase" --pin 123456 -m "secret"
stegasoo decode -r photo.jpg -s stego.png -p "phrase" --pin 123456
stegasoo info image.png</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 Available{% else %}PBKDF2 Fallback{% endif %}
</span>
<span class="badge bg-{% if has_qrcode_read %}success{% else %}secondary{% endif %}">
{% if has_qrcode_read %}QR Reading Available{% else %}QR Reading Not Available{% 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 or File
</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>Upload your <strong>reference photo</strong></li>
<li>Upload a <strong>carrier image</strong> (the image to hide data in)</li>
<li>Choose <strong>Text</strong> or <strong>File</strong> mode</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 the stego image through any channel (email, social media, etc.)</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 or File
</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> (check the filename for date)</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-warning small mt-3 mb-0">
<i class="bi bi-exclamation-triangle me-2"></i>
The stego image filename contains the encoding date (e.g., <code>abc123_20251228.png</code>).
Use this to determine which day's phrase to use!
</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">
<tbody>
<tr>
<td><i class="bi bi-file-text me-2"></i>Max text message</td>
<td><strong>2 million characters</strong> (~2 MB)</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-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 wordlist)</td>
</tr>
<tr>
<td><i class="bi bi-cpu me-2"></i>API documentation</td>
<td><strong>/docs (Swagger)</strong> and <strong>/redoc</strong></td>
</tr>
<tr>
<td><i class="bi bi-qr-code me-2"></i>QR code support</td>
<td><strong>RSA key encoding/extraction </strong>(up to 3072 bit keys)</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, FastAPI, and cryptography
</p>
</div>
</div>
</div>
{% endblock %}