fix(enginer-server): HTML escape (salesforce#1972)

pmdartus · web-flow · commit 00da41b82910 · 2020-07-15T11:17:22.000+02:00
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic-escape/config.json b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic-escape/config.json
@@ -0,0 +1,5 @@
+{
+    "props": {
+        "attr": "\"></div>This 'should' be escaped<div attr=\""
+    }
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic-escape/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic-escape/expected.html
@@ -0,0 +1,7 @@
+<x-attribute-dynamic-escape>
+  <template shadowroot="open">
+    <div
+      data-attr='"&gt;&lt;/div&gt;This &#x27;should&#x27; be escaped&lt;div attr="'
+    ></div>
+  </template>
+</x-attribute-dynamic-escape>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic-escape/modules/x/attribute-dynamic-escape/attribute-dynamic-escape.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic-escape/modules/x/attribute-dynamic-escape/attribute-dynamic-escape.html
@@ -0,0 +1,3 @@
+<template>
+    <div data-attr={attr}></div>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic-escape/modules/x/attribute-dynamic-escape/attribute-dynamic-escape.js b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic-escape/modules/x/attribute-dynamic-escape/attribute-dynamic-escape.js
@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class AttributeDynamicEscape extends LightningElement {
+    @api attr;
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/text-interpolation-escape/config.json b/packages/@lwc/engine-server/src/__tests__/fixtures/text-interpolation-escape/config.json
@@ -0,0 +1,5 @@
+{
+    "props": {
+        "text": "I <b>should</b> escape 'this' & \"that\""
+    }
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/text-interpolation-escape/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/text-interpolation-escape/expected.html
@@ -0,0 +1,5 @@
+<x-text-interpolation-escape>
+  <template shadowroot="open">
+    I &lt;b&gt;should&lt;/b&gt; escape &#x27;this&#x27; &amp; &quot;that&quot;
+  </template>
+</x-text-interpolation-escape>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/text-interpolation-escape/modules/x/text-interpolation-escape/text-interpolation-escape.html b/packages/@lwc/engine-server/src/__tests__/fixtures/text-interpolation-escape/modules/x/text-interpolation-escape/text-interpolation-escape.html
@@ -0,0 +1,3 @@
+<template>
+    {text}
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/text-interpolation-escape/modules/x/text-interpolation-escape/text-interpolation-escape.js b/packages/@lwc/engine-server/src/__tests__/fixtures/text-interpolation-escape/modules/x/text-interpolation-escape/text-interpolation-escape.js
@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class TextInterpolationEscape extends LightningElement {
+    @api text;
+}
diff --git a/packages/@lwc/engine-server/src/renderer.ts b/packages/@lwc/engine-server/src/renderer.ts
@@ -66,7 +66,7 @@ export const renderer: Renderer<HostNode, HostElement> = {
     createText(content: string): HostNode {
         return {
             type: HostNodeType.Text,
-            value: content,
+            value: String(content),
             parent: null,
         };
     },
diff --git a/packages/@lwc/engine-server/src/serializer.ts b/packages/@lwc/engine-server/src/serializer.ts
@@ -6,12 +6,14 @@
  */
 
 import { isVoidElement } from '@lwc/shared';
+
+import { htmlEscape } from './utils/html-escape';
 import { HostElement, HostShadowRoot, HostAttribute, HostChildNode, HostNodeType } from './types';
 
 function serializeAttributes(attributes: HostAttribute[]): string {
     return attributes
         .map((attr) =>
-            attr.value.length ? `${attr.name}=${JSON.stringify(attr.value)}` : attr.name
+            attr.value.length ? `${attr.name}=${JSON.stringify(htmlEscape(attr.value))}` : attr.name
         )
         .join(' ');
 }
@@ -21,7 +23,7 @@ function serializeChildNodes(children: HostChildNode[]): string {
         .map((child) => {
             switch (child.type) {
                 case HostNodeType.Text:
-                    return child.value;
+                    return htmlEscape(child.value);
                 case HostNodeType.Element:
                     return serializeElement(child);
             }
diff --git a/packages/@lwc/engine-server/src/utils/html-escape.ts b/packages/@lwc/engine-server/src/utils/html-escape.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2020, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+const ESCAPED_CHARS: { [char: string]: string } = {
+    '"': '&quot;',
+    "'": '&#x27;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '&': '&amp;',
+};
+
+export function htmlEscape(str: string): string {
+    return str.replace(/["'<>&]/g, (char) => ESCAPED_CHARS[char]);
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +    "props": {
 +        "attr": "\"></div>This 'should' be escaped<div attr=\""
 +    }
 +}
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<template>`
	`2`	`+ <div data-attr={attr}></div>`
	`3`	`+</template>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<template>`
	`2`	`+ {text}`
	`3`	`+</template>`