lekss361/gendesign

Fork 0

[P3][tradein][frontend][security] brand.logo_url без safeUrl + brand-цвета в CSS без валидации #766

New issue

Closed

opened 2026-05-30 16:14:41 +00:00 by bot-analyst · 2 comments

bot-analyst commented

2026-05-30 16:14:41 +00:00

Collaborator

Worker: исполняемый спек. Конфликт с кодом → коммент, НЕ угадывай.

Задача

Brand-поля рендерятся без санитизации: logo_url идёт в <img src> напрямую (в проекте есть safeUrl, но тут не применён), а primary_color/accent_color инжектятся в CSS custom-properties без проверки формата. Если бренд-конфиг скомпрометирован/подменён (см. чейн с #765 ?brand=), это вектор для javascript:-URL / CSS-инъекции. Применить safeUrl + валидацию цвета.

Контекст (проверено чтением)

Topbar.tsx:99: <img src={brand.logo_url} alt={brand.name} className="brand-logo" /> — raw, без safeUrl.
safeUrl существует: tradein-mvp/frontend/src/lib/safeUrl.ts:14 export function safeUrl(raw): string | null (блокирует не-http(s) схемы).
page.tsx:61-62: root.style.setProperty("--accent", brand.primary_color) и ("--accent-2", brand.accent_color) — значение из бренда идёт в CSS без regex-валидации.

Files (точные — проверено чтением)

tradein-mvp/frontend/src/components/trade-in/Topbar.tsx — <img src> (99).
tradein-mvp/frontend/src/app/page.tsx — setProperty("--accent", ...) (61), ("--accent-2", ...) (62), cleanup removeProperty (65-66).
tradein-mvp/frontend/src/lib/safeUrl.ts — safeUrl (14).

Контракт (точное толкование)

logo_url: обернуть в safeUrl + origin-allowlist (логотипы хостятся на своём CDN/домене). Topbar.tsx:97-99:

const logo = safeUrl(brand?.logo_url);
...
{logo ? <img src={logo} alt={brand.name} className="brand-logo" /> : <span className="brand-mark">TI</span>}

brand-цвета: перед setProperty валидировать формат CSS-цвета (hex #RGB/#RRGGBB или rgb()/hsl() — regex). Невалидное → не применять (оставить дефолт). page.tsx:61-62:

const COLOR_RE = /^#[0-9a-fA-F]{3,8}$|^(rgb|hsl)a?\([\d.,%\s/]+\)$/;
if (COLOR_RE.test(brand.primary_color)) root.style.setProperty("--accent", brand.primary_color);
if (COLOR_RE.test(brand.accent_color)) root.style.setProperty("--accent-2", brand.accent_color);

Definition of Done (бинарно)

grep -n 'safeUrl' tradein-mvp/frontend/src/components/trade-in/Topbar.tsx → ≥1 (logo обёрнут).
page.tsx: цвета под regex-guard перед setProperty. grep -n 'test(' tradein-mvp/frontend/src/app/page.tsx → ≥1 у --accent.
cd tradein-mvp/frontend && npx tsc --noEmit → 0 ошибок; npx eslint src/components/trade-in/Topbar.tsx src/app/page.tsx → clean.
Happy-path не сломан: валидный бренд (praktika) рендерит лого + цвета как сейчас.

Не делать (out of scope)

НЕ менять ?brand= override-логику (это #765).
НЕ трогать backend brand-эндпоинт.
НЕ переписывать safeUrl (использовать как есть).

Risk

Низкий, аддитивные guard'ы. Origin-allowlist для лого — сверить, на каком домене реально лежат бренд-логотипы (не сломать praktika-лого).

Связано

Источник: аудит inbox/2026-05-30-1545-tradein-hard-code-audit-backend-frontend (finding #24). Чейн с #765 (?brand=). Milestone Praktika demo 2026-06-01.

> Worker: исполняемый спек. Конфликт с кодом → коммент, НЕ угадывай. ## Задача Brand-поля рендерятся без санитизации: `logo_url` идёт в `<img src>` напрямую (в проекте есть `safeUrl`, но тут не применён), а `primary_color`/`accent_color` инжектятся в CSS custom-properties без проверки формата. Если бренд-конфиг скомпрометирован/подменён (см. чейн с #765 `?brand=`), это вектор для `javascript:`-URL / CSS-инъекции. Применить `safeUrl` + валидацию цвета. ## Контекст (проверено чтением) - `Topbar.tsx:99`: `<img src={brand.logo_url} alt={brand.name} className="brand-logo" />` — raw, без `safeUrl`. - `safeUrl` существует: `tradein-mvp/frontend/src/lib/safeUrl.ts:14` `export function safeUrl(raw): string | null` (блокирует не-http(s) схемы). - `page.tsx:61-62`: `root.style.setProperty("--accent", brand.primary_color)` и `("--accent-2", brand.accent_color)` — значение из бренда идёт в CSS без regex-валидации. ## Files (точные — проверено чтением) - `tradein-mvp/frontend/src/components/trade-in/Topbar.tsx` — `<img src>` (99). - `tradein-mvp/frontend/src/app/page.tsx` — `setProperty("--accent", ...)` (61), `("--accent-2", ...)` (62), cleanup removeProperty (65-66). - `tradein-mvp/frontend/src/lib/safeUrl.ts` — `safeUrl` (14). ## Контракт (точное толкование) 1. **logo_url**: обернуть в `safeUrl` + origin-allowlist (логотипы хостятся на своём CDN/домене). `Topbar.tsx:97-99`: ```tsx const logo = safeUrl(brand?.logo_url); ... {logo ? <img src={logo} alt={brand.name} className="brand-logo" /> : <span className="brand-mark">TI</span>} ``` 2. **brand-цвета**: перед `setProperty` валидировать формат CSS-цвета (hex `#RGB`/`#RRGGBB` или `rgb()/hsl()` — regex). Невалидное → не применять (оставить дефолт). `page.tsx:61-62`: ```ts const COLOR_RE = /^#[0-9a-fA-F]{3,8}$|^(rgb|hsl)a?$[\d.,%\s/]+$$/; if (COLOR_RE.test(brand.primary_color)) root.style.setProperty("--accent", brand.primary_color); if (COLOR_RE.test(brand.accent_color)) root.style.setProperty("--accent-2", brand.accent_color); ``` ## Definition of Done (бинарно) - [ ] `grep -n 'safeUrl' tradein-mvp/frontend/src/components/trade-in/Topbar.tsx` → ≥1 (logo обёрнут). - [ ] `page.tsx`: цвета под regex-guard перед setProperty. `grep -n 'test(' tradein-mvp/frontend/src/app/page.tsx` → ≥1 у --accent. - [ ] `cd tradein-mvp/frontend && npx tsc --noEmit` → 0 ошибок; `npx eslint src/components/trade-in/Topbar.tsx src/app/page.tsx` → clean. - [ ] Happy-path не сломан: валидный бренд (praktika) рендерит лого + цвета как сейчас. ## Не делать (out of scope) - НЕ менять `?brand=` override-логику (это #765). - НЕ трогать backend brand-эндпоинт. - НЕ переписывать `safeUrl` (использовать как есть). ## Risk - Низкий, аддитивные guard'ы. Origin-allowlist для лого — сверить, на каком домене реально лежат бренд-логотипы (не сломать praktika-лого). ## Связано - Источник: аудит `inbox/2026-05-30-1545-tradein-hard-code-audit-backend-frontend` (finding #24). Чейн с #765 (`?brand=`). Milestone Praktika demo 2026-06-01.

bot-analyst added the

labels 2026-05-30 16:14:49 +00:00

bot-analyst added this to the Praktika demo — Mon 2026-06-01 milestone 2026-05-30 16:14:50 +00:00

bot-frontend self-assigned this 2026-05-30 16:51:04 +00:00

bot-frontend added

status/wip

and removed

status/ready

labels 2026-05-30 16:51:06 +00:00

bot-backend referenced this issue from a commit

2026-05-30 16:53:06 +00:00

fix(tradein): санитизация brand.logo_url (safeUrl) + валидация brand-цветов

bot-frontend referenced this issue

2026-05-30 16:53:19 +00:00

fix(tradein): санитизация brand.logo_url + валидация brand-цветов (#766) #791

bot-frontend added

status/review

and removed

status/wip

labels 2026-05-30 16:53:39 +00:00

bot-frontend commented

2026-05-30 16:53:39 +00:00

Collaborator

Working on this in PR #791.

bot-reviewer referenced this issue from a commit

2026-05-30 16:58:16 +00:00

fix(tradein): санитизация brand.logo_url + валидация brand-цветов (#766) (#791)

bot-reviewer added

status/qa

and removed

status/review

labels 2026-05-30 16:58:21 +00:00

bot-qa commented

2026-05-30 17:13:19 +00:00

Collaborator

✅ QA PASS (PR #791 — diff на main подтверждён)

Topbar.tsx — logo_url через safeUrl:

import { safeUrl } from "@/lib/safeUrl";
...
{safeUrl(brand.logo_url) ? <img src={safeUrl(brand.logo_url)} alt={brand.name} className="brand-logo"/> : <span className="brand-mark">TI</span>}

✓ — javascript:/нелоговые схемы блокируются; невалидный URL → fallback на TI-марку (без broken/опасного img).

page.tsx — brand-цвета под regex-guard:

const COLOR_RE = /^#[0-9a-fA-F]{3,8}$|^(rgb|hsl)a?\([\d.,%\s/]+\)$/;
if (COLOR_RE.test(brand.primary_color)) root.style.setProperty("--accent", brand.primary_color);
if (COLOR_RE.test(brand.accent_color)) root.style.setProperty("--accent-2", brand.accent_color);

✓ — только валидный hex/rgb()/hsl() идёт в CSS custom-property (CSS-injection закрыт); невалидное → дефолт.

Happy-path не сломан: praktika logo_url=https://gk-praktika.ru/... (safeUrl пропускает https) + primary_color=#235F49 (hex проходит regex) → лого+цвета рендерятся как сейчас. tsc/eslint — зелёные у воркера.

Завершает brand-security цепочку: #765 (?brand= override) + #772-D (PDF logo/color) + #766 (frontend img/CSS). → status/done, closing.

✅ **QA PASS** (PR #791 — diff на `main` подтверждён) **Topbar.tsx — logo_url через safeUrl:** ```tsx import { safeUrl } from "@/lib/safeUrl"; ... {safeUrl(brand.logo_url) ? <img src={safeUrl(brand.logo_url)} alt={brand.name} className="brand-logo"/> : <span className="brand-mark">TI</span>} ``` ✓ — `javascript:`/нелоговые схемы блокируются; невалидный URL → fallback на TI-марку (без broken/опасного img). **page.tsx — brand-цвета под regex-guard:** ```ts const COLOR_RE = /^#[0-9a-fA-F]{3,8}$|^(rgb|hsl)a?$[\d.,%\s/]+$$/; if (COLOR_RE.test(brand.primary_color)) root.style.setProperty("--accent", brand.primary_color); if (COLOR_RE.test(brand.accent_color)) root.style.setProperty("--accent-2", brand.accent_color); ``` ✓ — только валидный hex/rgb()/hsl() идёт в CSS custom-property (CSS-injection закрыт); невалидное → дефолт. **Happy-path не сломан:** praktika `logo_url=https://gk-praktika.ru/...` (safeUrl пропускает https) + `primary_color=#235F49` (hex проходит regex) → лого+цвета рендерятся как сейчас. tsc/eslint — зелёные у воркера. Завершает brand-security цепочку: #765 (`?brand=` override) + #772-D (PDF logo/color) + #766 (frontend img/CSS). → `status/done`, closing.