@matthesketh/utopia-server 0.0.4 → 0.1.0

package/dist/index.cjs

@@ -49,6 +49,16 @@ function createComponent(Component, props, children) {
 }
 
 // src/render-to-string.ts
+var VALID_TAG = /^[a-zA-Z][a-zA-Z0-9-]*$/;
+function validateTag(tag) {
+  if (!VALID_TAG.test(tag)) throw new Error(`Invalid tag name: ${tag}`);
+  return tag;
+}
+var VALID_ATTR = /^[a-zA-Z_:@][a-zA-Z0-9_.:-]*$/;
+function validateAttr(name) {
+  if (!VALID_ATTR.test(name)) throw new Error(`Invalid attribute name: ${name}`);
+  return name;
+}
 var VOID_ELEMENTS = /* @__PURE__ */ new Set([
   "area",
   "base",
@@ -86,12 +96,12 @@ function serializeVNode(node) {
 }
 function serializeElement(el) {
   const tag = el.tag;
-  let html = `<${tag}`;
+  let html = `<${validateTag(tag)}`;
   for (const [name, value] of Object.entries(el.attrs)) {
     if (value === "") {
-      html += ` ${name}`;
+      html += ` ${validateAttr(name)}`;
     } else {
-      html += ` ${name}="${escapeAttr(value)}"`;
+      html += ` ${validateAttr(name)}="${escapeAttr(value)}"`;
     }
   }
   if (VOID_ELEMENTS.has(tag.toLowerCase())) {
@@ -102,7 +112,7 @@ function serializeElement(el) {
   for (const child of el.children) {
     html += serializeVNode(child);
   }
-  html += `</${tag}>`;
+  html += `</${validateTag(tag)}>`;
   return html;
 }
 function renderToString(component, props) {
@@ -116,6 +126,19 @@ function renderToString(component, props) {
 
 // src/render-to-stream.ts
 var import_node_stream = require("stream");
+var VALID_TAG2 = /^[a-zA-Z][a-zA-Z0-9-]*$/;
+function validateTag2(tag) {
+  if (!VALID_TAG2.test(tag)) throw new Error(`Invalid tag name: ${tag}`);
+  return tag;
+}
+var VALID_ATTR2 = /^[a-zA-Z_:@][a-zA-Z0-9_.:-]*$/;
+function validateAttr2(name) {
+  if (!VALID_ATTR2.test(name)) throw new Error(`Invalid attribute name: ${name}`);
+  return name;
+}
+function escapeStyleContent(css) {
+  return css.replace(/<\/style/gi, "<\\/style");
+}
 var VOID_ELEMENTS2 = /* @__PURE__ */ new Set([
   "area",
   "base",
@@ -145,10 +168,13 @@ function renderToStream(component, props) {
   flushStyles();
   const vnode = createComponent(component, props);
   const styles = flushStyles();
+  let rendered = false;
   return new import_node_stream.Readable({
     read() {
+      if (rendered) return;
+      rendered = true;
       if (styles.length > 0) {
-        this.push(`<style>${styles.join("\n")}</style>`);
+        this.push(`<style>${escapeStyleContent(styles.join("\n"))}</style>`);
       }
       pushVNode(this, vnode);
       this.push(null);
@@ -169,12 +195,12 @@ function pushVNode(stream, node) {
   }
 }
 function pushElement(stream, el) {
-  let open = `<${el.tag}`;
+  let open = `<${validateTag2(el.tag)}`;
   for (const [name, value] of Object.entries(el.attrs)) {
     if (value === "") {
-      open += ` ${name}`;
+      open += ` ${validateAttr2(name)}`;
     } else {
-      open += ` ${name}="${escapeAttr2(value)}"`;
+      open += ` ${validateAttr2(name)}="${escapeAttr2(value)}"`;
     }
   }
   open += ">";
@@ -185,27 +211,35 @@ function pushElement(stream, el) {
   for (const child of el.children) {
     pushVNode(stream, child);
   }
-  stream.push(`</${el.tag}>`);
+  stream.push(`</${validateTag2(el.tag)}>`);
 }
 
 // src/server-router.ts
 var import_utopia_router = require("@matthesketh/utopia-router");
 function createServerRouter(routes, url) {
-  const fullUrl = new URL(url, "http://localhost");
+  let fullUrl;
+  try {
+    fullUrl = new URL(url, "http://localhost");
+  } catch {
+    return null;
+  }
   return (0, import_utopia_router.matchRoute)(fullUrl, routes);
 }
 
 // src/handler.ts
+function escapeStyleContent2(css) {
+  return css.replace(/<\/style/gi, "<\\/style");
+}
 function createHandler(options) {
   const { template, render } = options;
   return async (req, res) => {
     const url = req.url ?? "/";
     try {
       const { html, css } = await render(url);
-      const headInject = css ? `<style>${css}</style>` : "";
+      const headInject = css ? `<style>${escapeStyleContent2(css)}</style>` : "";
       let page = template;
-      page = page.replace("<!--ssr-head-->", headInject);
-      page = page.replace("<!--ssr-outlet-->", html);
+      page = page.split("<!--ssr-head-->").join(headInject);
+      page = page.split("<!--ssr-outlet-->").join(html);
       res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
       res.end(page);
     } catch (err) {

package/dist/index.js

@@ -4,6 +4,16 @@ import {
 } from "./chunk-DV7AV4JO.js";
 
 // src/render-to-string.ts
+var VALID_TAG = /^[a-zA-Z][a-zA-Z0-9-]*$/;
+function validateTag(tag) {
+  if (!VALID_TAG.test(tag)) throw new Error(`Invalid tag name: ${tag}`);
+  return tag;
+}
+var VALID_ATTR = /^[a-zA-Z_:@][a-zA-Z0-9_.:-]*$/;
+function validateAttr(name) {
+  if (!VALID_ATTR.test(name)) throw new Error(`Invalid attribute name: ${name}`);
+  return name;
+}
 var VOID_ELEMENTS = /* @__PURE__ */ new Set([
   "area",
   "base",
@@ -41,12 +51,12 @@ function serializeVNode(node) {
 }
 function serializeElement(el) {
   const tag = el.tag;
-  let html = `<${tag}`;
+  let html = `<${validateTag(tag)}`;
   for (const [name, value] of Object.entries(el.attrs)) {
     if (value === "") {
-      html += ` ${name}`;
+      html += ` ${validateAttr(name)}`;
     } else {
-      html += ` ${name}="${escapeAttr(value)}"`;
+      html += ` ${validateAttr(name)}="${escapeAttr(value)}"`;
     }
   }
   if (VOID_ELEMENTS.has(tag.toLowerCase())) {
@@ -57,7 +67,7 @@ function serializeElement(el) {
   for (const child of el.children) {
     html += serializeVNode(child);
   }
-  html += `</${tag}>`;
+  html += `</${validateTag(tag)}>`;
   return html;
 }
 function renderToString(component, props) {
@@ -71,6 +81,19 @@ function renderToString(component, props) {
 
 // src/render-to-stream.ts
 import { Readable } from "stream";
+var VALID_TAG2 = /^[a-zA-Z][a-zA-Z0-9-]*$/;
+function validateTag2(tag) {
+  if (!VALID_TAG2.test(tag)) throw new Error(`Invalid tag name: ${tag}`);
+  return tag;
+}
+var VALID_ATTR2 = /^[a-zA-Z_:@][a-zA-Z0-9_.:-]*$/;
+function validateAttr2(name) {
+  if (!VALID_ATTR2.test(name)) throw new Error(`Invalid attribute name: ${name}`);
+  return name;
+}
+function escapeStyleContent(css) {
+  return css.replace(/<\/style/gi, "<\\/style");
+}
 var VOID_ELEMENTS2 = /* @__PURE__ */ new Set([
   "area",
   "base",
@@ -100,10 +123,13 @@ function renderToStream(component, props) {
   flushStyles();
   const vnode = createComponent(component, props);
   const styles = flushStyles();
+  let rendered = false;
   return new Readable({
     read() {
+      if (rendered) return;
+      rendered = true;
       if (styles.length > 0) {
-        this.push(`<style>${styles.join("\n")}</style>`);
+        this.push(`<style>${escapeStyleContent(styles.join("\n"))}</style>`);
       }
       pushVNode(this, vnode);
       this.push(null);
@@ -124,12 +150,12 @@ function pushVNode(stream, node) {
   }
 }
 function pushElement(stream, el) {
-  let open = `<${el.tag}`;
+  let open = `<${validateTag2(el.tag)}`;
   for (const [name, value] of Object.entries(el.attrs)) {
     if (value === "") {
-      open += ` ${name}`;
+      open += ` ${validateAttr2(name)}`;
     } else {
-      open += ` ${name}="${escapeAttr2(value)}"`;
+      open += ` ${validateAttr2(name)}="${escapeAttr2(value)}"`;
     }
   }
   open += ">";
@@ -140,27 +166,35 @@ function pushElement(stream, el) {
   for (const child of el.children) {
     pushVNode(stream, child);
   }
-  stream.push(`</${el.tag}>`);
+  stream.push(`</${validateTag2(el.tag)}>`);
 }
 
 // src/server-router.ts
 import { matchRoute } from "@matthesketh/utopia-router";
 function createServerRouter(routes, url) {
-  const fullUrl = new URL(url, "http://localhost");
+  let fullUrl;
+  try {
+    fullUrl = new URL(url, "http://localhost");
+  } catch {
+    return null;
+  }
   return matchRoute(fullUrl, routes);
 }
 
 // src/handler.ts
+function escapeStyleContent2(css) {
+  return css.replace(/<\/style/gi, "<\\/style");
+}
 function createHandler(options) {
   const { template, render } = options;
   return async (req, res) => {
     const url = req.url ?? "/";
     try {
       const { html, css } = await render(url);
-      const headInject = css ? `<style>${css}</style>` : "";
+      const headInject = css ? `<style>${escapeStyleContent2(css)}</style>` : "";
       let page = template;
-      page = page.replace("<!--ssr-head-->", headInject);
-      page = page.replace("<!--ssr-outlet-->", html);
+      page = page.split("<!--ssr-head-->").join(headInject);
+      page = page.split("<!--ssr-outlet-->").join(html);
       res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
       res.end(page);
     } catch (err) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matthesketh/utopia-server",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "Server-side rendering for UtopiaJS",
   "type": "module",
   "license": "MIT",
@@ -44,8 +44,8 @@
     "dist"
   ],
   "dependencies": {
-    "@matthesketh/utopia-core": "0.0.4",
-    "@matthesketh/utopia-router": "0.0.4"
+    "@matthesketh/utopia-core": "0.1.0",
+    "@matthesketh/utopia-router": "0.1.0"
   },
   "scripts": {
     "build": "tsup src/index.ts src/ssr-runtime.ts --format esm,cjs --dts",