Merge pull request #246 from preactjs/ignore-non-vnode-objects

Ignore non-VNode objects during rendering

Author: marvinhagemeister

.changeset/curly-bananas-do.md

@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': patch
+---
+
+Fix object and function children being rendered as `undefined`

src/index.js

@@ -195,6 +195,7 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 
 	// Text VNodes: escape as HTML
 	if (typeof vnode !== 'object') {
+		if (typeof vnode === 'function') return '';
 		return encodeEntities(vnode);
 	}
 
@@ -210,6 +211,9 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 		return rendered;
 	}
 
+	// VNodes have {constructor:undefined} to prevent JSON injection:
+	if (vnode.constructor !== undefined) return '';
+
 	vnode[PARENT] = parent;
 	if (options[DIFF]) options[DIFF](vnode);
 

src/pretty.js

@@ -29,6 +29,7 @@ export function _renderToStringPretty(
 
 	// #text nodes
 	if (typeof vnode !== 'object') {
+		if (typeof vnode === 'function') return '';
 		return encodeEntities(vnode);
 	}
 
@@ -53,6 +54,9 @@ export function _renderToStringPretty(
 		return rendered;
 	}
 
+	// VNodes have {constructor:undefined} to prevent JSON injection:
+	if (vnode.constructor !== undefined) return '';
+
 	let nodeName = vnode.type,
 		props = vnode.props,
 		isComponent = false;

test/jsx.test.js

@@ -163,4 +163,12 @@ describe('jsx', () => {
 			<meta charset="utf-8" />
 		`);
 	});
+
+	it('should prevent JSON injection', () => {
+		expect(renderJsx(<div>{{ hello: 'world' }}</div>)).to.equal('<div></div>');
+	});
+
+	it('should not render function children', () => {
+		expect(renderJsx(<div>{() => {}}</div>)).to.equal('<div></div>');
+	});
 });

test/pretty.test.js

@@ -222,4 +222,14 @@ describe('pretty', () => {
 			</p>
 		`);
 	});
+
+	it('should prevent JSON injection', () => {
+		expect(prettyRender(<div>{{ hello: 'world' }}</div>)).to.equal(
+			'<div></div>'
+		);
+	});
+
+	it('should not render function children', () => {
+		expect(prettyRender(<div>{() => {}}</div>)).to.equal('<div></div>');
+	});
 });

test/render.test.js

@@ -1260,4 +1260,12 @@ describe('render', () => {
 			'<select><option selected value="2">2</option></select>'
 		);
 	});
+
+	it('should prevent JSON injection', () => {
+		expect(render(<div>{{ hello: 'world' }}</div>)).to.equal('<div></div>');
+	});
+
+	it('should not render function children', () => {
+		expect(render(<div>{() => {}}</div>)).to.equal('<div></div>');
+	});
 });