fix(builder): sanitize non-string style values + allowlist element tags (XSS)
Adversarial re-review found the C1 fix incomplete plus an adjacent
same-class XSS, both reachable via the AI update_props path and
deserialized saved state:
- cssPropsToString only ran sanitizeCssValue on typeof-string values, so a
non-string style value (array/object) with a valid key skipped
sanitization entirely and was template-coerced raw into style="...",
e.g. { color: ['red', '"><img src=x onerror=alert(1)>'] }. Now every
non-number value is coerced with String() and sanitized; numbers stay
raw. sanitizeBreakoutChars also now escapes < and > (previously only ;
and ") as defense-in-depth, since values can reach it from non-string
sources.
- props.tag (Container) and props.level (Heading) were interpolated raw
into the tag position of exported HTML (`<${tag}`, `<${level}`) with no
runtime validation, letting a malicious value break out of the tag
entirely. Both are now allowlisted/clamped against their known-safe sets
(div/section/article/header/footer/main; h1-h6), falling back to
div/h2. Applied in Container's live render + toHtml, Heading's live
render + toHtml, and the typeName==='div' fallback branch in
html-export.ts's renderNode (hit for unresolved/legacy node types).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -3,6 +3,19 @@ import { useNode, UserComponent } from '@craftjs/core';
|
||||
import { cssPropsToString } from '../../utils/style-helpers';
|
||||
import { escapeAttr } from '../../utils/escape';
|
||||
|
||||
// The only tag names Container actually supports (matches the TS union
|
||||
// below and the `tag` default in `.craft.props`). `tag` is settable via the
|
||||
// AI `update_props` path and from deserialized saved state -- neither is
|
||||
// type-checked at runtime -- so a malicious value like
|
||||
// `div><img src=x onerror=alert(1)` must never reach the `<${tag}` template
|
||||
// position in `toHtml`/the live render. Anything not in this allowlist
|
||||
// falls back to `'div'`.
|
||||
const ALLOWED_CONTAINER_TAGS = ['div', 'section', 'article', 'header', 'footer', 'main'] as const;
|
||||
export type ContainerTag = (typeof ALLOWED_CONTAINER_TAGS)[number];
|
||||
|
||||
export const sanitizeContainerTag = (tag: unknown): ContainerTag =>
|
||||
(ALLOWED_CONTAINER_TAGS as readonly unknown[]).includes(tag) ? (tag as ContainerTag) : 'div';
|
||||
|
||||
interface ContainerProps {
|
||||
style?: CSSProperties;
|
||||
tag?: 'div' | 'section' | 'article' | 'header' | 'footer' | 'main';
|
||||
@@ -42,6 +55,7 @@ export const Container: UserComponent<ContainerProps> = ({
|
||||
}) => {
|
||||
const { connectors: { connect, drag } } = useNode();
|
||||
|
||||
const safeTag = sanitizeContainerTag(tag);
|
||||
const needsBoxedWrapper = contentWidth === 'boxed';
|
||||
const flexStyles = flexAlignFromTextAlign(style.textAlign);
|
||||
|
||||
@@ -58,7 +72,7 @@ export const Container: UserComponent<ContainerProps> = ({
|
||||
const idValue = cssId || anchorId || undefined;
|
||||
|
||||
const el = React.createElement(
|
||||
tag,
|
||||
safeTag,
|
||||
{
|
||||
ref: (ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); },
|
||||
style: outerStyle,
|
||||
@@ -97,7 +111,7 @@ Container.craft = {
|
||||
/* ---------- HTML export ---------- */
|
||||
|
||||
(Container as any).toHtml = (props: ContainerProps, childrenHtml: string) => {
|
||||
const tag = props.tag || 'div';
|
||||
const tag = sanitizeContainerTag(props.tag);
|
||||
const isBoxed = props.contentWidth === 'boxed';
|
||||
const flexStyles = flexAlignFromTextAlign(props.style?.textAlign);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user