shadowdaoandClaude Opus 4.8
591a51dcc2
An adversarial pass found 5 Critical XSS sinks where props declared number/enum in TypeScript were interpolated raw into exported HTML attribute values, trusting the type — but nothing enforces it at runtime (AI update_props only validates node_id; deserialized saved state is untyped JSON). Fixed all 5 (NumberCounter data-target, StarRating aria-label, FormContainer method, ContactForm/InputField input type) plus 6 sibling sinks found by an exhaustive audit of every attribute-value interpolation across src/components: a JS-source injection into ContentSlider's inline setInterval script, a prototype-pollution-adjacent allowlist gap in Section's divider-shape lookup, TextareaField rows, Testimonials rating aria-label, HeroSimple textAlign, and MapEmbed zoom. Adds shared sanitizeFormMethod/sanitizeInputType allowlist helpers to utils/escape.ts alongside the existing escapeAttr/safeUrl/cssValue primitives. Every fix is TDD'd: a malicious-value test reproduces the raw injection against the pre-fix code, then passes after the fix. 502 tests green (npx vitest run), tsc + vite build green (npm run build). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
102 lines
2.6 KiB
TypeScript
102 lines
2.6 KiB
TypeScript
import React, { CSSProperties, useCallback, useRef, useEffect } from 'react';
|
|
import { useNode, UserComponent } from '@craftjs/core';
|
|
import { cssPropsToString } from '../../utils/style-helpers';
|
|
import { escapeHtml } from '../../utils/escape';
|
|
|
|
interface TextBlockProps {
|
|
text?: string;
|
|
style?: CSSProperties;
|
|
cssId?: string;
|
|
cssClass?: string;
|
|
hideOnDesktop?: boolean;
|
|
hideOnTablet?: boolean;
|
|
hideOnMobile?: boolean;
|
|
animation?: string;
|
|
animationDelay?: string;
|
|
}
|
|
|
|
export const TextBlock: UserComponent<TextBlockProps> = ({
|
|
text = 'Start typing here...',
|
|
style = {},
|
|
}) => {
|
|
const {
|
|
connectors: { connect, drag },
|
|
selected,
|
|
actions: { setProp },
|
|
} = useNode((node) => ({
|
|
selected: node.events.selected,
|
|
}));
|
|
|
|
const elRef = useRef<HTMLParagraphElement | null>(null);
|
|
const editedTextRef = useRef<string | null>(null);
|
|
|
|
const commitText = useCallback(() => {
|
|
if (elRef.current) {
|
|
const newText = elRef.current.innerText;
|
|
editedTextRef.current = newText;
|
|
setProp((p: TextBlockProps) => { p.text = newText; });
|
|
}
|
|
}, [setProp]);
|
|
|
|
const handleBlur = useCallback(() => { commitText(); }, [commitText]);
|
|
|
|
useEffect(() => {
|
|
if (!selected && editedTextRef.current !== null) {
|
|
setProp((p: TextBlockProps) => { p.text = editedTextRef.current!; });
|
|
editedTextRef.current = null;
|
|
}
|
|
}, [selected, setProp]);
|
|
|
|
useEffect(() => {
|
|
if (elRef.current && !selected && editedTextRef.current === null) {
|
|
elRef.current.innerText = text || '';
|
|
}
|
|
}, [text, selected]);
|
|
|
|
return (
|
|
<p
|
|
ref={(ref: HTMLParagraphElement | null) => {
|
|
elRef.current = ref;
|
|
if (ref) connect(drag(ref));
|
|
}}
|
|
contentEditable={selected}
|
|
suppressContentEditableWarning
|
|
onBlur={handleBlur}
|
|
onInput={() => { if (elRef.current) editedTextRef.current = elRef.current.innerText; }}
|
|
style={{
|
|
outline: 'none',
|
|
cursor: selected ? 'text' : 'pointer',
|
|
minHeight: '1em',
|
|
...style,
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
/* ---------- Craft config ---------- */
|
|
|
|
TextBlock.craft = {
|
|
displayName: 'Text',
|
|
props: {
|
|
text: 'Start typing here...',
|
|
style: {
|
|
fontSize: '16px',
|
|
lineHeight: '1.6',
|
|
color: '#3f3f46',
|
|
},
|
|
},
|
|
rules: {
|
|
canDrag: () => true,
|
|
canMoveIn: () => false,
|
|
canMoveOut: () => true,
|
|
},
|
|
};
|
|
|
|
/* ---------- HTML export ---------- */
|
|
|
|
(TextBlock as any).toHtml = (props: TextBlockProps, _childrenHtml: string) => {
|
|
const styleStr = cssPropsToString(props.style);
|
|
const escapedText = escapeHtml(props.text || '');
|
|
return { html: `<p${styleStr ? ` style="${styleStr}"` : ''}>${escapedText}</p>` };
|
|
};
|