Merge pull request #1086 from sveltejs/gh-1082

[WIP] Fix HTML escaping and non-top-level <script> and <style> issues

Author: Rich-Harris

src/generators/nodes/Element.ts

@@ -432,6 +432,10 @@ export default class Element extends Node {
 
 			if (isVoidElementName(node.name)) return open + '>';
 
+			if (node.name === 'script' || node.name === 'style') {
+				return `${open}>${node.data}</${node.name}>`;
+			}
+
 			return `${open}>${node.children.map(toHTML).join('')}</${node.name}>`;
 		}
 	}
@@ -756,4 +760,4 @@ const events = [
 			node.isMediaNode() &&
 			(name === 'buffered' || name === 'seekable')
 	}
-];
+];

src/generators/server-side-rendering/visitors/Element.ts

@@ -60,6 +60,8 @@ export default function visitElement(
 
 	if (node.name === 'textarea' && textareaContents !== undefined) {
 		generator.append(textareaContents);
+	} else if (node.name === 'script' || node.name === 'style') {
+		generator.append(node.data);
 	} else {
 		node.children.forEach((child: Node) => {
 			visit(generator, block, child);

src/parse/state/tag.ts

@@ -213,6 +213,7 @@ export default function tag(parser: Parser) {
 	parser.eat('>', true);
 
 	if (selfClosing) {
+		// don't push self-closing elements onto the stack
 		element.end = parser.index;
 	} else if (name === 'textarea') {
 		// special case
@@ -223,8 +224,12 @@ export default function tag(parser: Parser) {
 		);
 		parser.read(/<\/textarea>/);
 		element.end = parser.index;
+	} else if (name === 'script' || name === 'style') {
+		// special case
+		element.data = parser.readUntil(new RegExp(`</${name}>`));
+		parser.eat(`</${name}>`, true);
+		element.end = parser.index;
 	} else {
-		// don't push self-closing elements onto the stack
 		parser.stack.push(element);
 	}
 }

src/utils/stringify.ts

@@ -9,13 +9,11 @@ export function escape(data: string, { onlyEscapeAtSymbol = false } = {}) {
 }
 
 const escaped = {
-	'"': '"',
-	"'": '&##39;',
 	'&': '&',
 	'<': '&lt;',
-	'>': '&gt;'
+	'>': '&gt;',
 };
 
 export function escapeHTML(html) {
-	return String(html).replace(/["'&<>]/g, match => escaped[match]);
-}
+	return String(html).replace(/[&<>]/g, match => escaped[match]);
+}

test/runtime/samples/html-non-entities-inside-elements/_config.js

@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<div>'foo'<span/></div>
+	`
+};

test/runtime/samples/html-non-entities-inside-elements/main.html

@@ -0,0 +1 @@
+<div>'foo'<span/></div>

test/server-side-rendering/samples/component-data-empty/_actual.html

@@ -1,3 +1,3 @@
 <div>
-	<p>foo: &#39;&#39;</p>
+	<p>foo: ''</p>
 </div>