fix: html script, style, and comment escaping

Author: DylanPiercey

.changeset/blue-dragons-see.md

@@ -0,0 +1,17 @@
+"use strict";
+const unsafeCharsReg = />/g;
+const replaceMatch = () => ">";
+const escape = (str) =>
+  unsafeCharsReg.test(str) ? str.replace(unsafeCharsReg, replaceMatch) : str;
+
+/**
+ * Escapes content placed inside an <html-comment> tag.
+ *
+ * For example:
+ * <html-comment>${userInput}</html-comment>
+ *
+ * Without escaping, a value of `><script>alert(1)</script><!--` would close the comment early.
+ */
+module.exports = function escapeCommentHelper(value) {
+  return escape(value + "");
+};

.changeset/frank-memes-knock.md

@@ -1,5 +1,5 @@
 "use strict";
-const unsafeCharsReg = /<\/script/g;
+const unsafeCharsReg = /<\/script/gi;
 const replaceMatch = () => "\\x3C/script";
 const escape = (str) =>
   unsafeCharsReg.test(str) ? str.replace(unsafeCharsReg, replaceMatch) : str;

packages/runtime-class/src/runtime/html/helpers/escape-comment-placeholder.js

@@ -1,5 +1,5 @@
 "use strict";
-const unsafeCharsReg = /<\/style/g;
+const unsafeCharsReg = /<\/style/gi;
 const replaceMatch = () => "\\3C/style";
 const escape = (str) =>
   unsafeCharsReg.test(str) ? str.replace(unsafeCharsReg, replaceMatch) : str;

packages/runtime-class/src/runtime/html/helpers/escape-script-placeholder.js

@@ -3,6 +3,7 @@ import {
   assertNoArgs,
   assertNoAttributes,
   assertNoParams,
+  importDefault,
 } from "@marko/compiler/babel-utils";
 
 import writeHTML from "../../util/html-out-write";
@@ -15,11 +16,30 @@ export function enter(path) {
   assertNoAttributes(path);
 
   if (path.hub.file.markoOpts.output === "html") {
-    path.replaceWithMultiple([
-      writeHTML`<!--`,
-      ...path.node.body.body,
-      writeHTML`-->`,
-    ]);
+    const { file } = path.hub;
+    const nodes = [writeHTML`<!--`];
+
+    for (const child of path.node.body.body) {
+      if (t.isMarkoText(child)) {
+        nodes.push(child);
+      } else if (t.isMarkoPlaceholder(child)) {
+        const escapeFnModule = child.escape
+          ? "marko/src/runtime/html/helpers/escape-comment-placeholder.js"
+          : "marko/src/runtime/helpers/to-string.js";
+        const escapeFnAlias = child.escape
+          ? "marko_escapeComment"
+          : "marko_to_string";
+        nodes.push(
+          writeHTML`${t.callExpression(
+            importDefault(file, escapeFnModule, escapeFnAlias),
+            [child.value],
+          )}`,
+        );
+      }
+    }
+
+    nodes.push(writeHTML`-->`);
+    path.replaceWithMultiple(nodes.filter(Boolean));
   } else {
     const templateQuasis = [];
     const templateExpressions = [];

packages/runtime-class/src/runtime/html/helpers/escape-style-placeholder.js

@@ -0,0 +1 @@
+<!----&gt;-->

packages/runtime-class/src/translator/taglib/core/translate-html-comment.js

@@ -0,0 +1 @@
+<html-comment>${input.text}</html-comment>

packages/runtime-class/test/render/fixtures/escape-comment/expected.html

@@ -0,0 +1,3 @@
+exports.templateData = {
+  text: "-->",
+};

packages/runtime-class/test/render/fixtures/escape-comment/template.marko

@@ -0,0 +1 @@
+<!--"-->"-->