what-server 0.6.5 → 0.6.7

package/src/index.js

@@ -119,7 +119,7 @@ function _renderHydratable(vnode) {
 
   // Array — wrap in list markers
   if (Array.isArray(vnode)) {
-    return `<!--[]-->${vnode.map(_renderHydratable).join('')}<!--/[]-->`;
+    return `<!--[]-->${renderChildrenToString(vnode, _renderHydratable)}<!--/[]-->`;
   }
 
   // Component — add hydration key to root element
@@ -150,7 +150,7 @@ function _renderHydratable(vnode) {
   if (VOID_ELEMENTS.has(tag)) return open;
 
   const rawInner = _resolveInnerHTML(props);
-  const inner = rawInner != null ? String(rawInner) : children.map(_renderHydratable).join('');
+  const inner = rawInner != null ? String(rawInner) : renderChildrenToString(children, _renderHydratable);
   return `${open}${inner}</${tag}>`;
 }
 
@@ -198,7 +198,7 @@ export function renderToString(vnode) {
 
   // Array
   if (Array.isArray(vnode)) {
-    return vnode.map(renderToString).join('');
+    return renderChildrenToString(vnode, renderToString);
   }
 
   // Component
@@ -226,10 +226,18 @@ export function renderToString(vnode) {
   if (VOID_ELEMENTS.has(tag)) return open;
 
   const rawInner = _resolveInnerHTML(props);
-  const inner = rawInner != null ? String(rawInner) : children.map(renderToString).join('');
+  const inner = rawInner != null ? String(rawInner) : renderChildrenToString(children, renderToString);
   return `${open}${inner}</${tag}>`;
 }
 
+function renderChildrenToString(children, renderChild) {
+  let html = '';
+  for (let i = 0; i < children.length; i++) {
+    html += renderChild(children[i]);
+  }
+  return html;
+}
+
 // --- Stream Render ---
 // Returns an async iterator for streaming SSR.
 
@@ -424,11 +432,25 @@ function _resolveInnerHTML(props) {
 
 function renderAttrs(props) {
   let out = '';
-  for (const [key, val] of Object.entries(props)) {
+  const keys = Object.keys(props);
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    const val = props[key];
     if (key === 'key' || key === 'ref' || key === 'children' || key === 'dangerouslySetInnerHTML' || key === 'innerHTML') continue;
     if (key.startsWith('on') && key.length > 2) continue; // Skip event handlers in SSR
     if (val === false || val == null) continue;
 
+    const attr = getHtmlAttributeMetadata(key);
+    const attrName = attr.name;
+    if (!attr.valid) {
+      if (_isDevMode) console.warn(`[what-server] Omitted invalid attribute name: ${key}`);
+      continue;
+    }
+    if (!isSafeUrlAttributeValue(attr.urlKind, val)) {
+      if (_isDevMode) console.warn(`[what-server] Omitted unsafe URL attribute "${attrName}": ${val}`);
+      continue;
+    }
+
     if (key === 'className' || key === 'class') {
       out += ` class="${escapeHtml(String(val))}"`;
     } else if (key === 'style' && typeof val === 'object') {
@@ -438,19 +460,105 @@ function renderAttrs(props) {
       out += ` style="${escapeHtml(css)}"`;
     } else if (val === true) {
       // ARIA attributes require explicit ="true", HTML boolean attrs can be bare
-      if (key.startsWith('aria-') || key === 'role') {
-        out += ` ${key}="true"`;
+      if (attrName.startsWith('aria-') || attrName === 'role') {
+        out += ` ${attrName}="true"`;
       } else {
-        out += ` ${key}`;
+        out += ` ${attrName}`;
       }
     } else {
-      out += ` ${key}="${escapeHtml(String(val))}"`;
+      out += ` ${attrName}="${escapeHtml(String(val))}"`;
     }
   }
 
   return out;
 }
 
+function getHtmlAttributeName(name) {
+  if (name === 'className') return 'class';
+  if (name === 'htmlFor') return 'for';
+  return name;
+}
+
+const ATTR_METADATA_CACHE = new Map();
+const ATTR_METADATA_CACHE_MAX = 2048;
+const URL_ATTR_KIND_NONE = 0;
+const URL_ATTR_KIND_SINGLE = 1;
+const URL_ATTR_KIND_LIST = 2;
+
+function getHtmlAttributeMetadata(key) {
+  const cached = ATTR_METADATA_CACHE.get(key);
+  if (cached) return cached;
+
+  const name = getHtmlAttributeName(key);
+  const valid = isValidHtmlAttributeName(name);
+  const meta = {
+    name,
+    valid,
+    urlKind: valid ? getUrlAttributeKind(name) : URL_ATTR_KIND_NONE,
+  };
+
+  if (ATTR_METADATA_CACHE.size >= ATTR_METADATA_CACHE_MAX) ATTR_METADATA_CACHE.clear();
+  ATTR_METADATA_CACHE.set(key, meta);
+  return meta;
+}
+
+function isValidHtmlAttributeName(name) {
+  return /^[^\s"'>/=\x00-\x1f\x7f]+$/.test(name);
+}
+
+const URL_ATTRS = new Set([
+  'href',
+  'src',
+  'action',
+  'formaction',
+  'poster',
+  'cite',
+  'background',
+  'xlink:href',
+]);
+const URL_LIST_ATTRS = new Set(['srcset']);
+
+function getUrlAttributeKind(name) {
+  if (URL_ATTRS.has(name)) return URL_ATTR_KIND_SINGLE;
+  if (URL_LIST_ATTRS.has(name)) return URL_ATTR_KIND_LIST;
+  if (!hasAsciiUppercase(name)) return URL_ATTR_KIND_NONE;
+
+  const normalizedName = name.toLowerCase();
+  if (URL_ATTRS.has(normalizedName)) return URL_ATTR_KIND_SINGLE;
+  if (URL_LIST_ATTRS.has(normalizedName)) return URL_ATTR_KIND_LIST;
+  return URL_ATTR_KIND_NONE;
+}
+
+function hasAsciiUppercase(str) {
+  for (let i = 0; i < str.length; i++) {
+    const code = str.charCodeAt(i);
+    if (code >= 65 && code <= 90) return true;
+  }
+  return false;
+}
+
+function isSafeUrlAttributeValue(urlKind, value) {
+  if (urlKind === URL_ATTR_KIND_LIST) return isSafeSrcsetValue(value);
+  if (urlKind === URL_ATTR_KIND_SINGLE) return isSafeUrlValue(value);
+  return true;
+}
+
+function isSafeUrlValue(value) {
+  if (typeof value !== 'string') return true;
+  const normalized = value.trim().replace(/[\s\x00-\x1f\x7f]/g, '').toLowerCase();
+  return !(normalized.startsWith('javascript:') || normalized.startsWith('data:') || normalized.startsWith('vbscript:'));
+}
+
+function isSafeSrcsetValue(value) {
+  if (typeof value !== 'string') return true;
+  return value
+    .split(',')
+    .every(candidate => {
+      const url = candidate.trim().split(/\s+/, 1)[0] || '';
+      return url === '' || isSafeUrlValue(url);
+    });
+}
+
 function escapeHtml(str) {
   return str
     .replace(/&/g, '&amp;')

package/src/islands.js

@@ -89,7 +89,16 @@ export function serializeIslandStores() {
   for (const [name, store] of sharedStores) {
     data[name] = store._getSnapshot();
   }
-  return JSON.stringify(data);
+  return escapeJsonForScript(JSON.stringify(data));
+}
+
+function escapeJsonForScript(json) {
+  return json
+    .replace(/</g, '\\u003C')
+    .replace(/>/g, '\\u003E')
+    .replace(/&/g, '\\u0026')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029');
 }
 
 // Hydrate shared stores from SSR data