Merge pull request #1073 from sveltejs/gh-1066

Escape entities correctly when compiling to static HTML

src/generators/nodes/Element.ts

@@ -1,5 +1,5 @@
 import deindent from '../../utils/deindent';
-import { stringify } from '../../utils/stringify';
+import { stringify, escapeHTML } from '../../utils/stringify';
 import flattenReference from '../../utils/flattenReference';
 import isVoidElementName from '../../utils/isVoidElementName';
 import validCalleeObjects from '../../utils/validCalleeObjects';
@@ -414,7 +414,7 @@ export default class Element extends Node {
 		}
 
 		function toHTML(node: Element | Text) {
-			if (node.type === 'Text') return node.data;
+			if (node.type === 'Text') return escapeHTML(node.data);
 
 			let open = `<${node.name}`;
 

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

@@ -1,6 +1,6 @@
 import { SsrGenerator } from '../index';
 import Block from '../Block';
-import { escape } from '../../../utils/stringify';
+import { escape, escapeHTML } from '../../../utils/stringify';
 import { Node } from '../../../interfaces';
 
 export default function visitText(
@@ -8,5 +8,5 @@ export default function visitText(
 	block: Block,
 	node: Node
 ) {
-	generator.append(escape(node.data).replace(/(\${|`|\\)/g, '\\$1'));
+	generator.append(escapeHTML(escape(node.data).replace(/(\${|`|\\)/g, '\\$1')));
 }

src/utils/stringify.ts

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

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

@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<p>this &lt;em&gt;should&lt;/em&gt; not be <span>&lt;strong&gt;bold&lt;/strong&gt;</span></p>
+	`
+};

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

@@ -0,0 +1 @@
+<p>this &lt;em&gt;should&lt;/em&gt; not be <span>&lt;strong&gt;bold&lt;/strong&gt;</span></p>

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

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