Merge pull request #747 from sveltejs/gh-741

Fix escaping/unescaping of text and attributes in SSR

src/generators/dom/index.ts

@@ -4,7 +4,7 @@ import annotateWithScopes from '../../utils/annotateWithScopes';
 import isReference from '../../utils/isReference';
 import { walk } from 'estree-walker';
 import deindent from '../../utils/deindent';
-import stringify from '../../utils/stringify';
+import { stringify } from '../../utils/stringify';
 import CodeBuilder from '../../utils/CodeBuilder';
 import visit from './visit';
 import shared from './shared';

src/generators/dom/visitors/Component/Attribute.ts

@@ -2,7 +2,7 @@ import { DomGenerator } from '../../index';
 import Block from '../../Block';
 import { Node } from '../../../../interfaces';
 import { State } from '../../interfaces';
-import stringify from '../../../../utils/stringify';
+import { stringify } from '../../../../utils/stringify';
 
 export default function visitAttribute(
 	generator: DomGenerator,

src/generators/dom/visitors/Element/Attribute.ts

@@ -1,6 +1,6 @@
 import attributeLookup from './lookup';
 import deindent from '../../../../utils/deindent';
-import stringify from '../../../../utils/stringify';
+import { stringify } from '../../../../utils/stringify';
 import getStaticAttributeValue from './getStaticAttributeValue';
 import { DomGenerator } from '../../index';
 import Block from '../../Block';

src/generators/dom/visitors/Text.ts

@@ -2,7 +2,7 @@ import { DomGenerator } from '../index';
 import Block from '../Block';
 import { Node } from '../../../interfaces';
 import { State } from '../interfaces';
-import stringify from '../../../utils/stringify';
+import { stringify } from '../../../utils/stringify';
 
 export default function visitText(
 	generator: DomGenerator,

src/generators/server-side-rendering/index.ts

@@ -178,7 +178,12 @@ export default function ssr(
 		function __escape ( html ) {
 			return String( html ).replace( /["'&<>]/g, match => escaped[ match ] );
 		}
-	`.replace(/(\\)?@(\w*)/g, (match: string, escaped: string, name: string) => escaped ? match.slice(1) : generator.alias(name));
+	`.replace(/(\\)?([@#])(\w*)/g, (match: string, escaped: string, sigil: string, name: string) => {
+		if (escaped) return match.slice(1);
+		if (sigil !== '@') return match;
+
+		return generator.alias(name);
+	});
 
 	return generator.generate(result, options, { name, format });
 }

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

@@ -4,6 +4,7 @@ import visit from '../visit';
 import visitWindow from './meta/Window';
 import { SsrGenerator } from '../index';
 import Block from '../Block';
+import { escape } from '../../../utils/stringify';
 import { Node } from '../../../interfaces';
 
 const meta = {
@@ -14,7 +15,7 @@ function stringifyAttributeValue(block: Block, chunks: Node[]) {
 	return chunks
 		.map((chunk: Node) => {
 			if (chunk.type === 'Text') {
-				return chunk.data;
+				return escape(chunk.data).replace(/"/g, '"');
 			}
 
 			const { snippet } = block.contextualise(chunk.expression);

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

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

src/utils/stringify.ts

@@ -1,3 +1,7 @@
-export default function stringify(data: string) {
+export function stringify(data: string) {
-	return JSON.stringify(data.replace(/([^\\@#])?([@#])/g, '$1\\$2'));
+	return JSON.stringify(escape(data));
+}
+
+export function escape(data: string) {
+	return data.replace(/([^\\@#])?([@#])/g, '$1\\$2');
 }

test/runtime/samples/attribute-static-at-symbol/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: `<a href='mailto:hello@example.com'>email</a>`
+};

test/runtime/samples/attribute-static-at-symbol/main.html

@@ -0,0 +1 @@
+<a href='mailto:hello@example.com'>email</a>

test/runtime/samples/attribute-static-quotemarks/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: `<span title='"foo"'>foo</span>`
+};

test/runtime/samples/attribute-static-quotemarks/main.html

@@ -0,0 +1 @@
+<span title='"foo"'>foo</span>