diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index d6d42f8..b20fa40 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -5,6 +5,11 @@ on: push: branches: [main] +permissions: + contents: write + pull-requests: write + id-token: write + jobs: release: runs-on: ubuntu-latest @@ -73,7 +78,7 @@ jobs: fi - name: Create release PR or publish via Changesets if: steps.release-mode.outputs.mode == 'changesets' - uses: changesets/action@v1 + uses: changesets/action@6a0a831ff30acef54f2c6aa1cbbc1096b066edaf with: version: pnpm changeset:version publish: pnpm -r publish --access public --provenance diff --git a/packages/components/src/lib/breadcrumbs/Breadcrumbs.svelte b/packages/components/src/lib/breadcrumbs/Breadcrumbs.svelte index 9dae685..97cc381 100644 --- a/packages/components/src/lib/breadcrumbs/Breadcrumbs.svelte +++ b/packages/components/src/lib/breadcrumbs/Breadcrumbs.svelte @@ -15,6 +15,7 @@ getBreadcrumbsRecipeCase, serializeBreadcrumbsSlotStyles } from './breadcrumbs.recipe.js'; + import { sanitizeHref } from '../shared/url.js'; import type { BreadcrumbsSize } from './breadcrumbs.spec.js'; export let items: BreadcrumbItem[] = []; @@ -40,11 +41,12 @@
    {#each items as item, index (item.label + index)} {@const current = index === resolvedCurrentIndex} + {@const safeHref = sanitizeHref(item.href)}
  1. {#if current} {item.label} - {:else if item.href} - {item.label} + {:else if safeHref} + {item.label} {:else} {item.label} {/if} diff --git a/packages/components/src/lib/breadcrumbs/Breadcrumbs.svelte.test.ts b/packages/components/src/lib/breadcrumbs/Breadcrumbs.svelte.test.ts index 2a7e2ba..e183e63 100644 --- a/packages/components/src/lib/breadcrumbs/Breadcrumbs.svelte.test.ts +++ b/packages/components/src/lib/breadcrumbs/Breadcrumbs.svelte.test.ts @@ -18,4 +18,18 @@ describe('Breadcrumbs', () => { expect(screen.getByRole('link', { name: 'Workspace' })).toBeTruthy(); expect(screen.getByText('Production').getAttribute('aria-current')).toBe('page'); }); + + it('renders unsafe href schemes as non-links', () => { + render(Breadcrumbs, { + props: { + items: [ + { label: 'Workspace', href: 'javascript:alert(1)' }, + { label: 'Production', current: true } + ] + } + }); + + expect(screen.queryByRole('link', { name: 'Workspace' })).toBeNull(); + expect(screen.getByText('Workspace').tagName).toBe('SPAN'); + }); }); diff --git a/packages/components/src/lib/button/Button.svelte b/packages/components/src/lib/button/Button.svelte index f5e550f..6ace629 100644 --- a/packages/components/src/lib/button/Button.svelte +++ b/packages/components/src/lib/button/Button.svelte @@ -7,6 +7,7 @@ getButtonRecipeCase, serializeButtonSlotStyles } from './button.recipe.js'; + import { sanitizeHref } from '../shared/url.js'; import type { ButtonContentMode, ButtonSize, ButtonVariant } from './button.spec.js'; export let variant: ButtonVariant = 'solid'; @@ -28,6 +29,7 @@ let contentMode: ButtonContentMode = 'label'; let busy = false; let anchorRel: string | undefined = undefined; + let safeHref: string | undefined = undefined; let compiledCase = getButtonRecipeCase(defaultRegistration.recipe, { variant, size, @@ -41,7 +43,8 @@ throw new Error('Button with iconOnly=true requires ariaLabel.'); } - $: elementTag = href || as === 'a' ? 'a' : 'button'; + $: safeHref = sanitizeHref(href); + $: elementTag = safeHref || as === 'a' ? 'a' : 'button'; $: contentMode = resolveContentMode(iconOnly, Boolean($$slots.leading), Boolean($$slots.trailing)); $: compiledCase = getButtonRecipeCase(registration.recipe, { variant, @@ -91,7 +94,7 @@ aria-busy={loading ? 'true' : undefined} aria-disabled={busy ? 'true' : undefined} aria-label={iconOnly ? ariaLabel : undefined} - href={href} + href={safeHref} target={target} rel={anchorRel} tabindex={busy ? -1 : undefined} diff --git a/packages/components/src/lib/button/Button.svelte.test.ts b/packages/components/src/lib/button/Button.svelte.test.ts index 2d4b4ab..6a83d87 100644 --- a/packages/components/src/lib/button/Button.svelte.test.ts +++ b/packages/components/src/lib/button/Button.svelte.test.ts @@ -30,6 +30,14 @@ describe('Button', () => { expect(anchorRender.container.querySelector('a')?.getAttribute('href')).toBe('/docs'); }); + it('drops unsafe href schemes before rendering anchor mode', () => { + const { container } = render(ButtonHarness, { + props: { theme, href: 'javascript:alert(1)', as: 'a', variant: 'link' } + }); + + expect(container.querySelector('a')?.hasAttribute('href')).toBe(false); + }); + it('renders leading and trailing slots and preserves variant metadata', () => { const { container } = render(ButtonHarness, { props: { theme, variant: 'destructive', showLeading: true, showTrailing: true } diff --git a/packages/components/src/lib/shared/recipe.test.ts b/packages/components/src/lib/shared/recipe.test.ts new file mode 100644 index 0000000..06af7d4 --- /dev/null +++ b/packages/components/src/lib/shared/recipe.test.ts @@ -0,0 +1,34 @@ +import { describe, expect, it } from 'vitest'; + +import type { CompiledComponentCase } from '@dkcli/core'; + +import { serializeCompiledSlotStyles } from './recipe.ts'; + +function compiledCase(vars: Record): CompiledComponentCase { + return { + axes: {}, + caseKey: '', + slots: { + root: { + baseVars: vars, + stateVars: {} + } + } + }; +} + +describe('shared recipe style serialization', () => { + it('serializes safe custom properties', () => { + expect(serializeCompiledSlotStyles(compiledCase({ '--demo-color': 'red' })).root).toBe('--demo-color: red;'); + }); + + it('rejects CSS declaration breakout values', () => { + expect(() => + serializeCompiledSlotStyles(compiledCase({ '--demo-color': 'red; } body { outline: 1px solid red; }' })) + ).toThrow(/Unsafe CSS value/); + }); + + it('rejects unsafe custom property names', () => { + expect(() => serializeCompiledSlotStyles(compiledCase({ color: 'red' }))).toThrow(/Unsafe CSS custom property name/); + }); +}); diff --git a/packages/components/src/lib/shared/recipe.ts b/packages/components/src/lib/shared/recipe.ts index e44a713..b978e19 100644 --- a/packages/components/src/lib/shared/recipe.ts +++ b/packages/components/src/lib/shared/recipe.ts @@ -1,4 +1,6 @@ import { + assertSafeCssCustomPropertyName, + assertSafeCssValue, componentCaseKey, serializeStateVarName, type CompiledComponentCase, @@ -8,7 +10,10 @@ import { function styleString(vars: Record): string { return Object.entries(vars) - .map(([name, value]) => `${name}: ${value};`) + .map(([name, value]) => { + const propertyName = assertSafeCssCustomPropertyName(name, 'compiled component slot style'); + return `${propertyName}: ${assertSafeCssValue(value, propertyName)};`; + }) .join(' '); } diff --git a/packages/components/src/lib/shared/url.ts b/packages/components/src/lib/shared/url.ts new file mode 100644 index 0000000..9b92218 --- /dev/null +++ b/packages/components/src/lib/shared/url.ts @@ -0,0 +1,19 @@ +const SAFE_HREF_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'tel:']); + +export function sanitizeHref(href: string | undefined): string | undefined { + const value = href?.trim(); + if (!value) { + return undefined; + } + + if (value.startsWith('#') || value.startsWith('/') || value.startsWith('./') || value.startsWith('../')) { + return value; + } + + try { + const parsed = new URL(value); + return SAFE_HREF_PROTOCOLS.has(parsed.protocol) ? value : undefined; + } catch { + return undefined; + } +} diff --git a/packages/components/src/lib/toast/Toast.svelte b/packages/components/src/lib/toast/Toast.svelte index 47c8a05..775b16a 100644 --- a/packages/components/src/lib/toast/Toast.svelte +++ b/packages/components/src/lib/toast/Toast.svelte @@ -16,6 +16,7 @@ import { resolveTokenExpr, type ThemeContract } from '@dkcli/core'; import { portal } from '../internal/behavior/index.js'; + import { sanitizeHref } from '../shared/url.js'; import { DEFAULT_TOAST_THEME, createToastRegistration, @@ -114,6 +115,7 @@ {#if visibleItems.length > 0}
    {#each visibleItems as item (item.id)} + {@const safeActionHref = sanitizeHref(item.actionHref)}

    {item.title}

    @@ -122,8 +124,8 @@ {/if} {#if item.actionLabel} - {#if item.actionHref} - handleAction(item.id)}> + {#if safeActionHref} + handleAction(item.id)}> {item.actionLabel} {:else} diff --git a/packages/components/src/lib/toast/Toast.svelte.test.ts b/packages/components/src/lib/toast/Toast.svelte.test.ts index 0f1c140..6463b73 100644 --- a/packages/components/src/lib/toast/Toast.svelte.test.ts +++ b/packages/components/src/lib/toast/Toast.svelte.test.ts @@ -35,4 +35,27 @@ describe('Toast', () => { await fireEvent.click(screen.getByRole('button', { name: /dismiss deployment queued/i })); expect(onDismiss).toHaveBeenCalledWith({ id: 'deploy' }); }); + + it('renders unsafe action href schemes as buttons', async () => { + const onAction = vi.fn(); + + render(Toast, { + props: { + onAction, + items: [ + { + id: 'deploy', + tone: 'brand', + title: 'Deployment queued', + actionLabel: 'Open', + actionHref: 'javascript:alert(1)' + } + ] + } + }); + + expect(screen.queryByRole('link', { name: 'Open' })).toBeNull(); + await fireEvent.click(screen.getByRole('button', { name: 'Open' })); + expect(onAction).toHaveBeenCalledWith({ id: 'deploy' }); + }); }); diff --git a/packages/core/src/component-compiler.test.ts b/packages/core/src/component-compiler.test.ts new file mode 100644 index 0000000..a5d33d4 --- /dev/null +++ b/packages/core/src/component-compiler.test.ts @@ -0,0 +1,99 @@ +import { describe, expect, it } from 'vitest'; + +import { compileComponentRecipe } from './component-compiler.ts'; +import type { ComponentSpec, ComponentStateName, ThemeContract, TokenExpr } from './index.ts'; + +function literal(value: string | number): TokenExpr { + return { literal: value }; +} + +function makeTheme(): ThemeContract { + return { + name: 'test-theme', + seed: { + color: '#295dff', + contrastProfile: 'default', + density: 'comfortable', + mode: 'light', + motion: 'snappy', + ratio: 'perfect-fourth' + }, + meta: { + density: 'comfortable', + mode: 'light', + optimizedSeed: '#295dff', + paletteScore: 1, + ratioName: 'perfect fourth', + ratioValue: 1.333 + }, + families: { + color: {}, + elevation: {}, + motion: {}, + radius: {}, + space: {}, + state: {}, + type: {} + }, + aliases: {} + }; +} + +function makeSpec(overrides: Partial = {}): ComponentSpec { + return { + id: 'demo', + slots: [{ name: 'root', kind: 'container', required: true }], + axes: [], + states: ['rest'], + recipe: { + root: [ + { + style: { + '--demo-color': literal('red') + } + } + ] + }, + proofs: {}, + a11y: { role: 'group' }, + ...overrides + }; +} + +describe('component recipe compiler safety', () => { + it('rejects runtime-only prototype state names before they can pollute globals', () => { + delete (Object.prototype as Record)['--polluted']; + const states = ['__proto__' as ComponentStateName]; + const matchStates = JSON.parse('{"__proto__":true}') as Partial>; + const spec = makeSpec({ + states, + recipe: { + root: [ + { + match: { states: matchStates }, + style: { '--polluted': literal('yes') } + } + ] + } + }); + + expect(() => compileComponentRecipe(spec, makeTheme())).toThrow(/Unsupported component state/); + expect((Object.prototype as Record)['--polluted']).toBeUndefined(); + }); + + it('rejects component recipe CSS declaration breakout values', () => { + const spec = makeSpec({ + recipe: { + root: [ + { + style: { + '--demo-color': literal('red; } body { outline: 1px solid red; }') + } + } + ] + } + }); + + expect(() => compileComponentRecipe(spec, makeTheme())).toThrow(/Unsafe CSS value/); + }); +}); diff --git a/packages/core/src/component-compiler.ts b/packages/core/src/component-compiler.ts index c247e7f..92f14a8 100644 --- a/packages/core/src/component-compiler.ts +++ b/packages/core/src/component-compiler.ts @@ -11,8 +11,10 @@ import { type OptionRowProofSpec, type ProofCaseSpec, type RecipeMatch, - type TokenExpr + type TokenExpr, + validateComponentSpec } from './component-spec.ts'; +import { assertSafeCssCustomPropertyName, assertSafeCssValue } from './css-safety.ts'; import type { ThemeContract } from './theme-contract.ts'; type ResolvedSlotVars = Record; @@ -129,6 +131,14 @@ type ResolveContext = { slotVars?: Record; }; +function createRecord(): Record { + return Object.create(null) as Record; +} + +function createResolvedSlotVars(): ResolvedSlotVars { + return createRecord(); +} + function canonicalStateName(state: ComponentStateName): string { return state.replace(/[^a-z0-9]+/gi, '-'); } @@ -603,8 +613,14 @@ export function buildComponentProofFixtures( } export function compileComponentRecipe(spec: ComponentSpec, theme: ThemeContract): CompiledComponentRecipe { - const axisMap = Object.fromEntries(spec.axes.map((axis) => [axis.name, axis.values])); - const cases: Record = {}; + validateComponentSpec(spec); + + const axisMap = createRecord(); + for (const axis of spec.axes) { + axisMap[axis.name] = axis.values; + } + + const cases: Record = createRecord(); for (const componentCase of enumerateComponentCases(spec)) { const compiledCase: CompiledComponentCase = { @@ -616,8 +632,8 @@ export function compileComponentRecipe(spec: ComponentSpec, theme: ThemeContract for (const slot of spec.slots) { const slotRules = spec.recipe[slot.name] ?? []; const compiledSlot: CompiledSlotRecipe = { - baseVars: {}, - stateVars: {} + baseVars: createResolvedSlotVars(), + stateVars: Object.create(null) as Partial> }; for (const rule of slotRules) { @@ -625,9 +641,11 @@ export function compileComponentRecipe(spec: ComponentSpec, theme: ThemeContract continue; } - const resolvedStyle = Object.fromEntries( - Object.entries(rule.style).map(([name, value]) => [name, resolveExprToString(theme, value)]) - ); + const resolvedStyle = createResolvedSlotVars(); + for (const [name, value] of Object.entries(rule.style)) { + assertSafeCssCustomPropertyName(name, `component ${spec.id} style`); + resolvedStyle[name] = assertSafeCssValue(resolveExprToString(theme, value), name); + } const states = matchedStates(rule.match, spec.states); if (states.length === 0) { @@ -636,7 +654,7 @@ export function compileComponentRecipe(spec: ComponentSpec, theme: ThemeContract } for (const state of states) { - compiledSlot.stateVars[state] ??= {}; + compiledSlot.stateVars[state] ??= createResolvedSlotVars(); mergeVars(compiledSlot.stateVars[state]!, resolvedStyle); } } diff --git a/packages/core/src/component-spec.d.ts b/packages/core/src/component-spec.d.ts index f87979c..e535953 100644 --- a/packages/core/src/component-spec.d.ts +++ b/packages/core/src/component-spec.d.ts @@ -36,7 +36,8 @@ export type AxisSpec = { values: string[]; default: string; }; -export type ComponentStateName = 'rest' | 'hover' | 'focus-visible' | 'pressed' | 'checked' | 'indeterminate' | 'disabled' | 'invalid' | 'loading' | 'open' | 'selected'; +export declare const COMPONENT_STATE_NAMES: readonly ["rest", "hover", "focus-visible", "pressed", "checked", "indeterminate", "disabled", "invalid", "loading", "open", "selected"]; +export type ComponentStateName = (typeof COMPONENT_STATE_NAMES)[number]; export type RecipeMatch = { axes?: Record; states?: Partial>; @@ -138,5 +139,7 @@ export type ComponentCase = { componentId: string; axes: Record; }; +export declare function isComponentStateName(value: unknown): value is ComponentStateName; +export declare function validateComponentSpec(spec: ComponentSpec): ComponentSpec; export declare function createComponentSpec(spec: ComponentSpec): ComponentSpec; export declare function enumerateComponentCases(spec: ComponentSpec): ComponentCase[]; diff --git a/packages/core/src/component-spec.ts b/packages/core/src/component-spec.ts index d8ed162..929f707 100644 --- a/packages/core/src/component-spec.ts +++ b/packages/core/src/component-spec.ts @@ -29,18 +29,21 @@ export type AxisSpec = { default: string; }; -export type ComponentStateName = - | 'rest' - | 'hover' - | 'focus-visible' - | 'pressed' - | 'checked' - | 'indeterminate' - | 'disabled' - | 'invalid' - | 'loading' - | 'open' - | 'selected'; +export const COMPONENT_STATE_NAMES = [ + 'rest', + 'hover', + 'focus-visible', + 'pressed', + 'checked', + 'indeterminate', + 'disabled', + 'invalid', + 'loading', + 'open', + 'selected' +] as const; + +export type ComponentStateName = (typeof COMPONENT_STATE_NAMES)[number]; export type RecipeMatch = { axes?: Record; @@ -158,10 +161,74 @@ export type ComponentCase = { axes: Record; }; -export function createComponentSpec(spec: ComponentSpec): ComponentSpec { +const COMPONENT_STATE_NAME_SET = new Set(COMPONENT_STATE_NAMES); +const UNSAFE_OBJECT_KEYS = new Set(['__proto__', 'prototype', 'constructor']); + +export function isComponentStateName(value: unknown): value is ComponentStateName { + return typeof value === 'string' && COMPONENT_STATE_NAME_SET.has(value); +} + +function assertSafeObjectKey(value: string, label: string): void { + if (!value || UNSAFE_OBJECT_KEYS.has(value)) { + throw new Error(`Unsafe component spec ${label}: ${value}`); + } +} + +export function validateComponentSpec(spec: ComponentSpec): ComponentSpec { + assertSafeObjectKey(spec.id, 'id'); + + for (const axis of spec.axes) { + assertSafeObjectKey(axis.name, 'axis name'); + for (const value of axis.values) { + assertSafeObjectKey(value, `axis value for ${axis.name}`); + } + } + + for (const slot of spec.slots) { + assertSafeObjectKey(slot.name, 'slot name'); + } + + for (const state of spec.states) { + if (!isComponentStateName(state)) { + throw new Error(`Unsupported component state: ${String(state)}`); + } + } + + for (const [slotName, rules] of Object.entries(spec.recipe)) { + assertSafeObjectKey(slotName, 'recipe slot name'); + for (const rule of rules) { + if (rule.match?.axes) { + for (const [name, value] of Object.entries(rule.match.axes)) { + assertSafeObjectKey(name, 'recipe axis match name'); + assertSafeObjectKey(value, `recipe axis match value for ${name}`); + } + } + if (rule.match?.states) { + for (const state of Object.keys(rule.match.states)) { + if (!isComponentStateName(state)) { + throw new Error(`Unsupported component state in recipe match: ${state}`); + } + } + } + } + } + + for (const proofCase of spec.proofCases ?? []) { + assertSafeObjectKey(proofCase.name, 'proof case name'); + for (const state of proofCase.states ?? []) { + if (!isComponentStateName(state)) { + throw new Error(`Unsupported component state in proof case: ${String(state)}`); + } + } + } + return spec; } +export function createComponentSpec(spec: ComponentSpec): ComponentSpec { + return validateComponentSpec(spec); +} + export function enumerateComponentCases(spec: ComponentSpec): ComponentCase[] { const axisEntries = spec.axes.map((axis) => [axis.name, axis.values] as const); diff --git a/packages/core/src/css-safety.d.ts b/packages/core/src/css-safety.d.ts new file mode 100644 index 0000000..35011c4 --- /dev/null +++ b/packages/core/src/css-safety.d.ts @@ -0,0 +1,5 @@ +export declare function assertSafeCssCustomPropertyName(name: string, label?: string): string; +export declare function assertSafeCssCustomPropertyBody(name: string, label?: string): string; +export declare function assertSafeCssValue(value: string | number, label?: string): string; +export declare function escapeCssComment(value: string | number): string; +export declare function escapeCssString(value: string | number): string; diff --git a/packages/core/src/css-safety.ts b/packages/core/src/css-safety.ts new file mode 100644 index 0000000..c5c5354 --- /dev/null +++ b/packages/core/src/css-safety.ts @@ -0,0 +1,72 @@ +const CSS_CUSTOM_PROPERTY_RE = /^--[a-zA-Z0-9_-]+$/; +const CSS_CUSTOM_PROPERTY_BODY_RE = /^[a-zA-Z0-9_-]+$/; +const CSS_UNSAFE_VALUE_RE = /[;{}]|\/\*|\*\//; + +function cssContext(label?: string): string { + return label ? ` for ${label}` : ''; +} + +export function assertSafeCssCustomPropertyName(name: string, label?: string): string { + if (!CSS_CUSTOM_PROPERTY_RE.test(name)) { + throw new Error(`Unsafe CSS custom property name${cssContext(label)}: ${name}`); + } + return name; +} + +export function assertSafeCssCustomPropertyBody(name: string, label?: string): string { + if (!CSS_CUSTOM_PROPERTY_BODY_RE.test(name)) { + throw new Error(`Unsafe CSS custom property name${cssContext(label)}: ${name}`); + } + return name; +} + +export function assertSafeCssValue(value: string | number, label?: string): string { + const text = String(value); + if (CSS_UNSAFE_VALUE_RE.test(text) || hasControlCharacter(text) || /\burl\s*\(/i.test(text)) { + throw new Error(`Unsafe CSS value${cssContext(label)}.`); + } + return text; +} + +function hasControlCharacter(value: string): boolean { + for (const char of value) { + const code = char.charCodeAt(0); + if (code <= 0x1f || code === 0x7f) { + return true; + } + } + return false; +} + +function replaceCssCommentControlCharacters(value: string): string { + return [...value] + .map((char) => { + const code = char.charCodeAt(0); + return code <= 0x1f || code === 0x7f ? ' ' : char; + }) + .join(''); +} + +function replaceCssStringControlCharacters(value: string): string { + return [...value] + .map((char) => { + const code = char.charCodeAt(0); + return code <= 0x08 || code === 0x0b || (code >= 0x0e && code <= 0x1f) || code === 0x7f ? '\\fffd ' : char; + }) + .join(''); +} + +export function escapeCssComment(value: string | number): string { + return replaceCssCommentControlCharacters(String(value).replace(/\*\//g, '* /')); +} + +export function escapeCssString(value: string | number): string { + return replaceCssStringControlCharacters( + String(value) + .replace(/\\/g, '\\\\') + .replace(/"/g, '\\"') + ) + .replace(/\n/g, '\\a ') + .replace(/\r/g, '\\d ') + .replace(/\f/g, '\\c '); +} diff --git a/packages/core/src/index.d.ts b/packages/core/src/index.d.ts index a476af7..dd6a0da 100644 --- a/packages/core/src/index.d.ts +++ b/packages/core/src/index.d.ts @@ -1,9 +1,10 @@ export * from './color.ts'; export type { AccessibilityContract, AnchoredSurfaceProofSpec, AxisSpec, ComponentCase, ComponentProofs, ComponentSpec, ComponentStateName, ContrastProofSpec, DistinctnessProofSpec, HelperTextProofSpec, LayoutProofSpec, MotionProofSpec, OptionRowProofSpec, ProofCaseSpec, RecipeMatch, RecipeRule, SlotSpec, TargetProofSpec, ThemeSeed, TokenExpr } from './component-spec.ts'; -export { createComponentSpec, enumerateComponentCases } from './component-spec.ts'; +export { COMPONENT_STATE_NAMES, createComponentSpec, enumerateComponentCases, isComponentStateName, validateComponentSpec } from './component-spec.ts'; export type { CompiledComponentCase, CompiledComponentRecipe, CompiledSlotRecipe, ComponentProofFixture, ResolvedAnchoredSurfaceCheck, ResolvedContrastProof, ResolvedHelperTextProof, ResolvedLayoutCheck, ResolvedMotionProof, ResolvedOptionRowProof, ResolvedTargetProof } from './component-compiler.ts'; export { buildComponentProofFixtures, compileComponentRecipe, componentCaseKey, resolveTokenExpr, serializeStateVarName } from './component-compiler.ts'; export * from './compose.ts'; +export * from './css-safety.ts'; export * from './design.ts'; export * from './interaction.ts'; export * from './layout.ts'; diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 8c4091f..8aa10f0 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -43,6 +43,7 @@ export { serializeStateVarName } from './component-compiler.ts'; export * from './compose.ts'; +export * from './css-safety.ts'; export * from './design.ts'; export * from './interaction.ts'; export * from './layout.ts'; diff --git a/packages/tokens/src/create-theme.test.ts b/packages/tokens/src/create-theme.test.ts index ec28686..8321323 100644 --- a/packages/tokens/src/create-theme.test.ts +++ b/packages/tokens/src/create-theme.test.ts @@ -42,4 +42,20 @@ describe('@dkcli/tokens createTheme', () => { expect(css).toContain('--primary: var(--color-primary);'); expect(css).toContain('--control-radius: var(--radius-md);'); }); + + it('rejects CSS declaration breakout values in custom theme contracts', () => { + const contract = createTheme({ + name: 'Night', + seed: { + color: '#295dff', + ratio: 'golden', + mode: 'dark', + density: 'compact', + motion: 'calm' + } + }); + contract.families.color.primary = 'red; } body { outline: 1px solid red; }'; + + expect(() => emitThemeCss(contract)).toThrow(/Unsafe CSS value/); + }); }); diff --git a/packages/tokens/src/emit-css.ts b/packages/tokens/src/emit-css.ts index ff5a630..a5f957f 100644 --- a/packages/tokens/src/emit-css.ts +++ b/packages/tokens/src/emit-css.ts @@ -1,23 +1,33 @@ -import type { ThemeContract } from '@dkcli/core'; +import { + assertSafeCssCustomPropertyBody, + assertSafeCssCustomPropertyName, + assertSafeCssValue, + escapeCssComment, + type ThemeContract +} from '@dkcli/core'; function emitFamily(prefix: string, family: Record): string[] { - return Object.entries(family).map(([name, value]) => ` --${prefix}-${name}: ${String(value)};`); + return Object.entries(family).map(([name, value]) => { + const propertyName = assertSafeCssCustomPropertyName(`--${prefix}-${name}`, `${prefix}.${name}`); + return ` ${propertyName}: ${assertSafeCssValue(value, propertyName)};`; + }); } function resolveAlias(value: string): string { const refMatch = value.match(/^([a-z-]+)\.([a-z0-9-]+)$/i); if (!refMatch) { - return value; + return assertSafeCssValue(value, 'theme alias'); } const [, prefix, token] = refMatch; + assertSafeCssCustomPropertyBody(`${prefix}-${token}`, `alias ${value}`); return `var(--${prefix}-${token})`; } export function emitThemeCss(contract: ThemeContract): string { const lines = [ - `/* ${contract.name} */`, - `/* optimized seed ${contract.meta.optimizedSeed} ratio ${contract.meta.ratioName} */`, + `/* ${escapeCssComment(contract.name)} */`, + `/* optimized seed ${escapeCssComment(contract.meta.optimizedSeed)} ratio ${escapeCssComment(contract.meta.ratioName)} */`, ':root {', ...emitFamily('color', contract.families.color), ...emitFamily('space', contract.families.space), @@ -26,7 +36,10 @@ export function emitThemeCss(contract: ThemeContract): string { ...emitFamily('elevation', contract.families.elevation), ...emitFamily('motion', contract.families.motion), ...emitFamily('state', contract.families.state), - ...Object.entries(contract.aliases).map(([name, value]) => ` --${name}: ${resolveAlias(value)};`), + ...Object.entries(contract.aliases).map(([name, value]) => { + const propertyName = assertSafeCssCustomPropertyName(`--${name}`, `alias ${name}`); + return ` ${propertyName}: ${resolveAlias(value)};`; + }), '}' ]; diff --git a/src/lib/dk/cli.test.ts b/src/lib/dk/cli.test.ts index 1045de8..73a6a91 100644 --- a/src/lib/dk/cli.test.ts +++ b/src/lib/dk/cli.test.ts @@ -535,6 +535,45 @@ describe('cli', () => { await rm(configDir, { recursive: true, force: true }); }); + it('refuses to reuse an existing dkcms session on a different base URL', async () => { + const configDir = await mkdtemp(path.join(tmpdir(), 'dkcms-cli-')); + const capture = makeIo(); + const env = { + DKCMS_CLI_CONFIG_DIR: configDir + }; + capture.io.getEnv = (name) => env[name as keyof typeof env]; + const fetchMock = vi.fn(); + capture.io.fetch = fetchMock as unknown as typeof fetch; + + await writeFile( + path.join(configDir, 'dkcms-session.json'), + JSON.stringify({ + baseUrl: 'https://cms.example.com', + accessToken: fakeDkCmsCliAccessToken({ + sub: 'user-1', + email: 'hello@example.com', + name: 'Casey' + }), + refreshToken: 'refresh-token-1', + updatedAt: new Date().toISOString(), + user: { + userId: 'user-1', + email: 'hello@example.com', + displayName: 'Casey' + } + }), + 'utf8' + ); + + const code = await runCli(['cms', 'sites', 'list', '--base-url', 'https://attacker.example'], capture.io); + + expect(code).toBe(1); + expect(capture.stderr).toContain('CMS session is for https://cms.example.com.'); + expect(fetchMock).not.toHaveBeenCalled(); + + await rm(configDir, { recursive: true, force: true }); + }); + it('smoke-tests the dkcms page create, build, publish, and email export commands', async () => { const configDir = await mkdtemp(path.join(tmpdir(), 'dkcms-cli-')); const fixtureDir = await mkdtemp(path.join(tmpdir(), 'dkcms-content-')); diff --git a/src/lib/dk/cms-cli.ts b/src/lib/dk/cms-cli.ts index dc0bd52..af06c3c 100644 --- a/src/lib/dk/cms-cli.ts +++ b/src/lib/dk/cms-cli.ts @@ -267,7 +267,10 @@ async function loadSession(io: CliIO, flags: FlagMap): Promise { } const baseUrl = resolveBaseUrl(flags, io, session); - return session.baseUrl === baseUrl ? session : { ...session, baseUrl }; + if (session.baseUrl !== baseUrl) { + fail(`CMS session is for ${session.baseUrl}. Run \`dk cms login --base-url=${baseUrl}\` before using that host.`); + } + return session; } async function readEmailCampaignContent(io: CliIO, filePath: string): Promise { diff --git a/src/lib/dk/future.test.ts b/src/lib/dk/future.test.ts index c8a7779..ff267e6 100644 --- a/src/lib/dk/future.test.ts +++ b/src/lib/dk/future.test.ts @@ -100,6 +100,25 @@ describe('generateLayoutCss', () => { expect(cssBefore).not.toBe(cssAfter); }); + + it('escapes item ids and roles before emitting generated CSS', () => { + const report = analyzeEmbeddingTopologyHeuristic( + [ + { + id: 'x"]{} body{outline:999px solid red}/*', + role: 'hero*/ body{background:red}/*', + label: 'Injected', + text: 'Injected' + } + ], + 'Arrange an editorial landing page.' + ); + const css = generateLayoutCss(report); + + expect(css).toContain('[data-dk-item="x\\"]{} body{outline:999px solid red}/*"]'); + expect(css).not.toContain('[data-dk-item="x"]{} body'); + expect(css).not.toContain('hero*/ body'); + }); }); describe('diagnoseFutureTopology with audit', () => { diff --git a/src/lib/dk/future.ts b/src/lib/dk/future.ts index 76f8017..dd11474 100644 --- a/src/lib/dk/future.ts +++ b/src/lib/dk/future.ts @@ -1,5 +1,5 @@ import { round } from './types.ts'; -import type { AuditReport } from '@dkcli/core'; +import { escapeCssComment, escapeCssString, type AuditReport } from '@dkcli/core'; export const FUTURE_EMBEDDING_MODELS = [ '@cf/baai/bge-small-en-v1.5', @@ -641,8 +641,8 @@ export function generateLayoutCss(report: FutureTopologyReport): string { ` grid-column: ${span};`, ` padding: ${zt.padding}px;`, ` gap: ${zt.gap}px;`, - ` /* ${slot.itemIds.length} items: ${slot.itemIds.join(', ')} */`, - ` /* ${slot.rationale} */`, + ` /* ${slot.itemIds.length} items: ${escapeCssComment(slot.itemIds.join(', '))} */`, + ` /* ${escapeCssComment(slot.rationale)} */`, `}`, '' ); @@ -661,9 +661,9 @@ export function generateLayoutCss(report: FutureTopologyReport): string { ]; if (rt.bg) props.push(`background-color: ${rt.bg}`); lines.push( - `[data-dk-item="${node.id}"] {`, + `[data-dk-item="${escapeCssString(node.id)}"] {`, ` ${props.join('; ')};`, - ` /* ${flags.join(', ')} */`, + ` /* ${escapeCssComment(flags.join(', '))} */`, `}` ); }