fd3c76d21b
Three independent reviews of PR #180 surfaced four real defects in the new Store / my-ai-stack surface. CHANGELOG entries detail each; one-liners: - F1 video_url XSS: any authenticated user could upload a Store entity with `video_url=javascript:...` and pop XSS in any viewer's session via the `<a href=...>` "Watch video" link in store_detail.html. Jinja2 autoescape doesn't block URI schemes inside attribute values. Fixed by scheme-validating to http(s) only on create + update; 400 invalid_video_url. - F2 ZIP decompression bomb: _safe_zip_extract checked path-traversal but not declared file_size totals — a 50 MB compressed upload at 1:1000 ratio decompresses to 50 GB and DOS the host disk. Fixed by summing zinfo.file_size across infolist() and refusing > 200 MB before extractall touches disk. 413 zip_too_large_uncompressed. - F4 admin authz parity: PUT /api/store/entities/{id} was owner-only while DELETE allowed owner OR admin; the store-detail page hid Edit/Delete buttons from admin even though DELETE was permitted. Fixed by allowing admin on PUT and passing is_admin to the template; gate is now is_owner OR is_admin everywhere. - F5 cross-owner suffix collision: sanitize_username is many-to-one (alice.smith / alice_smith both → alice-smith). Two such users uploading entities with the same display name produced identical `<name>-by-<username>` suffixes, silently colliding in the served agnes-store-bundle on-disk paths AND the manifest catalog (Claude Code dedupes by plugin.json `name`). Fixed by enforcing global uniqueness on the suffixed value at create_entity; 409 conflict_global_suffix. F3 (ZIP symlink members) was investigated and confirmed to be a false-positive — Python's stdlib ZipFile.extractall does not honor symlink mode bits, so no exploit exists. 9 new regression tests in tests/test_store_api.py::TestStoreSecurityFixes covering all four. Test run locally: 60/60 store-related tests pass.
265 lines
10 KiB
HTML
265 lines
10 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ entity.name }} — Store{% endblock %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
.container:has(.store-detail) { max-width: 980px; margin: 0 auto; padding: 16px 32px 48px; }
|
|
.container:has(.store-detail) > main { margin: 0; padding: 0; }
|
|
|
|
.breadcrumb {
|
|
font-size: 12px; color: var(--text-secondary); margin-bottom: 12px;
|
|
}
|
|
.breadcrumb a { color: var(--primary); text-decoration: none; }
|
|
.breadcrumb a:hover { text-decoration: underline; }
|
|
|
|
/* ── Hero ──────────────────────────────────────────────────────── */
|
|
.detail-hero {
|
|
position: relative;
|
|
display: grid; grid-template-columns: 240px 1fr; gap: 28px;
|
|
margin-bottom: 24px; padding: 28px 32px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border); border-radius: 12px;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
|
|
}
|
|
.owner-actions {
|
|
position: absolute; top: 16px; right: 16px;
|
|
display: flex; gap: 8px;
|
|
}
|
|
.owner-actions a, .owner-actions button {
|
|
appearance: none; padding: 7px 14px; border-radius: 8px;
|
|
border: 1px solid var(--border); background: var(--surface);
|
|
color: var(--text-secondary); font-size: 12px;
|
|
font-weight: var(--font-medium); cursor: pointer; text-decoration: none;
|
|
font-family: var(--font-primary);
|
|
transition: all 0.15s ease;
|
|
}
|
|
.owner-actions a:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
|
|
.owner-actions .delete { color: var(--error); border-color: rgba(234, 88, 12, 0.3); }
|
|
.owner-actions .delete:hover { background: rgba(234, 88, 12, 0.08); border-color: var(--error); color: var(--error); }
|
|
|
|
.detail-hero .photo {
|
|
width: 100%; aspect-ratio: 1; border-radius: 10px;
|
|
background: linear-gradient(135deg, var(--primary-light) 0%, #fce7f3 100%);
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: var(--primary); font-size: 56px; font-weight: var(--font-bold);
|
|
object-fit: cover;
|
|
box-shadow: 0 4px 14px rgba(0, 115, 209, 0.12);
|
|
}
|
|
|
|
.detail-hero h1 {
|
|
margin: 8px 0 6px; font-size: 26px; font-weight: var(--font-bold);
|
|
color: var(--text-primary); letter-spacing: -0.3px;
|
|
}
|
|
.detail-hero .type-row {
|
|
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
|
|
font-size: 12px; color: var(--text-secondary);
|
|
}
|
|
.detail-hero .type-badge {
|
|
padding: 3px 10px; border-radius: 4px;
|
|
background: var(--primary-light); color: var(--primary);
|
|
font-size: 11px; font-weight: var(--font-semibold);
|
|
text-transform: uppercase; letter-spacing: 0.5px;
|
|
}
|
|
.detail-hero .meta-row {
|
|
display: flex; gap: 14px; flex-wrap: wrap;
|
|
font-size: 13px; color: var(--text-secondary);
|
|
margin: 12px 0 14px;
|
|
}
|
|
.detail-hero .meta-row .dot { color: var(--border); }
|
|
.detail-hero .invocation {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 10px 14px;
|
|
background: linear-gradient(180deg, var(--primary-light), rgba(0,115,209,0.04));
|
|
border: 1px solid rgba(0, 115, 209, 0.2); border-radius: 8px;
|
|
font-family: var(--font-mono); font-size: 13px; color: var(--primary);
|
|
margin-bottom: 18px;
|
|
}
|
|
.detail-hero .invocation::before { content: '/'; opacity: 0.6; }
|
|
|
|
.detail-hero .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
|
.actions .btn-primary {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
appearance: none; border: none; background: var(--primary);
|
|
color: #fff; padding: 11px 22px; border-radius: 8px;
|
|
font-size: 14px; font-weight: var(--font-semibold);
|
|
cursor: pointer; font-family: var(--font-primary);
|
|
transition: all 0.15s ease;
|
|
}
|
|
.actions .btn-primary:hover {
|
|
background: var(--primary-dark);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 14px rgba(0, 115, 209, 0.25);
|
|
}
|
|
.actions .btn-installed {
|
|
appearance: none; border: 1px solid rgba(16, 183, 127, 0.3);
|
|
background: rgba(16, 183, 127, 0.1); color: var(--success);
|
|
padding: 10px 20px; border-radius: 8px;
|
|
font-size: 14px; font-weight: var(--font-semibold);
|
|
cursor: pointer; font-family: var(--font-primary);
|
|
transition: all 0.15s ease;
|
|
}
|
|
.actions .btn-installed:hover { background: rgba(16, 183, 127, 0.18); }
|
|
.actions .btn-link {
|
|
color: var(--text-secondary); text-decoration: none;
|
|
font-size: 13px; padding: 10px 12px;
|
|
border: 1px solid var(--border); border-radius: 8px;
|
|
font-family: var(--font-primary);
|
|
}
|
|
.actions .btn-link:hover { color: var(--primary); border-color: var(--primary); }
|
|
|
|
/* ── Section card ──────────────────────────────────────────────── */
|
|
.section {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border); border-radius: 12px;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
|
|
margin-bottom: 18px; overflow: hidden;
|
|
}
|
|
.section-header {
|
|
padding: 18px 24px 0;
|
|
display: flex; align-items: center; gap: 10px;
|
|
}
|
|
.section-header h2 {
|
|
margin: 0; font-size: var(--text-md); font-weight: var(--font-semibold);
|
|
color: var(--text-primary);
|
|
}
|
|
.section-header .count {
|
|
font-size: 12px; color: var(--text-secondary);
|
|
background: var(--border-light);
|
|
padding: 2px 8px; border-radius: 999px;
|
|
}
|
|
.section-body { padding: 12px 24px 22px; }
|
|
.section-body .description {
|
|
font-size: 14px; line-height: 1.7;
|
|
color: var(--text-primary);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.file-list { font-family: var(--font-mono); font-size: 12px; }
|
|
.file-list .file {
|
|
display: flex; justify-content: space-between; gap: 16px;
|
|
padding: 7px 0; border-bottom: 1px dashed var(--border-light);
|
|
color: var(--text-primary);
|
|
}
|
|
.file-list .file:last-child { border-bottom: none; }
|
|
.file-list .file .size { color: var(--text-secondary); flex-shrink: 0; }
|
|
.file-list .file a { color: var(--primary); text-decoration: none; }
|
|
.file-list .file a:hover { text-decoration: underline; }
|
|
|
|
.empty { color: var(--text-secondary); font-size: 13px; padding: 4px 0; }
|
|
|
|
@media (max-width: 720px) {
|
|
.detail-hero { grid-template-columns: 1fr; padding: 24px; }
|
|
.owner-actions { position: static; margin-bottom: 8px; }
|
|
}
|
|
</style>
|
|
|
|
<div class="store-detail">
|
|
<div class="breadcrumb"><a href="/store">Store</a> / {{ entity.name }}</div>
|
|
|
|
<div class="detail-hero">
|
|
{% if is_owner or is_admin %}
|
|
<div class="owner-actions">
|
|
<a href="#" id="edit-btn">Edit (coming soon)</a>
|
|
<button class="delete" id="delete-btn">Delete</button>
|
|
</div>
|
|
{% endif %}
|
|
{% if entity.photo_path %}
|
|
<img class="photo" src="/api/store/entities/{{ entity.id }}/photo" alt="">
|
|
{% else %}
|
|
<div class="photo">{{ entity.type[:2] | upper }}</div>
|
|
{% endif %}
|
|
<div>
|
|
<div class="type-row">
|
|
<span class="type-badge">{{ entity.type }}</span>
|
|
<span>v{{ entity.version }}</span>
|
|
{% if entity.category %}<span>· {{ entity.category }}</span>{% endif %}
|
|
</div>
|
|
<h1>{{ entity.name }}</h1>
|
|
<div class="meta-row">
|
|
<span>by <strong style="color:var(--text-primary);">{{ owner_display }}</strong></span>
|
|
<span class="dot">·</span>
|
|
<span>{{ entity.install_count }} installed</span>
|
|
<span class="dot">·</span>
|
|
<span>{{ entity.file_size | humanbytes }}</span>
|
|
</div>
|
|
<div class="invocation" title="Invoke in Claude Code">{{ invocation_name }}</div>
|
|
<div class="actions">
|
|
{% if is_installed %}
|
|
<button class="btn-installed" id="action-btn" data-action="uninstall">Installed ✓ — Uninstall</button>
|
|
{% else %}
|
|
<button class="btn-primary" id="action-btn" data-action="install">+ Install</button>
|
|
{% endif %}
|
|
{% if entity.video_url %}
|
|
<a class="btn-link" href="{{ entity.video_url }}" target="_blank" rel="noopener">▶ Watch video</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if entity.description %}
|
|
<div class="section">
|
|
<div class="section-header"><h2>Description</h2></div>
|
|
<div class="section-body">
|
|
<div class="description">{{ entity.description }}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if entity.doc_paths %}
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<h2>Documentation</h2>
|
|
<span class="count">{{ entity.doc_paths | length }}</span>
|
|
</div>
|
|
<div class="section-body">
|
|
<div class="file-list">
|
|
{% for d in entity.doc_paths %}
|
|
{% set fname = d.split('/')[-1] %}
|
|
<div class="file">
|
|
<a href="/api/store/entities/{{ entity.id }}/docs/{{ fname }}" target="_blank" rel="noopener">{{ fname }}</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<h2>Files</h2>
|
|
<span class="count">{{ files | length }}</span>
|
|
</div>
|
|
<div class="section-body">
|
|
<div class="file-list">
|
|
{% for f in files %}
|
|
<div class="file"><span>{{ f.path }}</span><span class="size">{{ f.size | humanbytes }}</span></div>
|
|
{% else %}
|
|
<div class="empty">No files on disk.</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const actionBtn = document.getElementById('action-btn');
|
|
if (actionBtn) {
|
|
actionBtn.addEventListener('click', async () => {
|
|
const action = actionBtn.dataset.action;
|
|
const method = action === 'install' ? 'POST' : 'DELETE';
|
|
const res = await fetch(`/api/store/entities/{{ entity.id }}/install`, {method});
|
|
if (!res.ok) { alert('Failed: ' + res.status); return; }
|
|
window.location.reload();
|
|
});
|
|
}
|
|
const delBtn = document.getElementById('delete-btn');
|
|
if (delBtn) {
|
|
delBtn.addEventListener('click', async () => {
|
|
if (!confirm('Permanently delete this entity? Anyone who has it installed will lose it.')) return;
|
|
const res = await fetch(`/api/store/entities/{{ entity.id }}`, {method: 'DELETE'});
|
|
if (!res.ok) { alert('Failed: ' + res.status); return; }
|
|
window.location = '/store';
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|