fix(ssr): less aggressive encoding of non-title tags

harlan-zw · harlan-zw · commit f4d4f11b3e4d · 2025-04-16T19:50:14.000+10:00
Fixes #541
diff --git a/packages/unhead/src/server/util/tagToString.ts b/packages/unhead/src/server/util/tagToString.ts
@@ -31,9 +31,7 @@ export function tagToString<T extends HeadTag>(tag: T) {
     return SelfClosingTags.has(tag.tag) ? openTag : `${openTag}</${tag.tag}>`
 
   // dangerously using innerHTML, we don't encode this
-  let content = String(tag.innerHTML || '')
-  if (tag.textContent)
-    // content needs to be encoded to avoid XSS, only for title
-    content = escapeHtml(String(tag.textContent))
+  let content = String(tag.textContent || tag.innerHTML || '')
+  content = tag.tag === 'title' ? escapeHtml(content) : content.replace(new RegExp(`<\/${tag.tag}`, 'gi'), `<\\/${tag.tag}`)
   return SelfClosingTags.has(tag.tag) ? openTag : `${openTag}${content}</${tag.tag}>`
 }
diff --git a/packages/unhead/test/unit/server/ssr.test.ts b/packages/unhead/test/unit/server/ssr.test.ts
@@ -1,3 +1,4 @@
+import { createHead } from '@unhead/dom'
 import { describe, it } from 'vitest'
 import { useHead, useSeoMeta } from '../../../src'
 import { renderSSRHead } from '../../../src/server'
@@ -356,4 +357,24 @@ describe('ssr', () => {
     expect(processedHtml).toContain('<link rel="prefetch" href="another-script.js">')
     expect(processedHtml).toContain('<script src="another-script.js"></script>')
   })
+  it('#541', async () => {
+    const input = `
+    <head>
+        <style>
+            html { background: url(/foo.png); }
+            img::before { content: "foo"; }
+        </style>
+    </head>
+`
+    const processedHtml = await transformHtmlTemplate(createHead(), input)
+    expect(processedHtml).toMatchInlineSnapshot(`
+      "
+      <head>
+      <style>
+                  html { background: url(/foo.png); }
+                  img::before { content: "foo"; }
+              </style></head>
+      "
+    `)
+  })
 })
diff --git a/packages/unhead/test/unit/server/xss.test.ts b/packages/unhead/test/unit/server/xss.test.ts
@@ -351,4 +351,19 @@ describe('xss', () => {
       <link rel="stylesheet" href="vbscript:alert(1)">"
     `)
   })
+  it('style tag', async () => {
+    // body {color: red;}</style><script>alert('XSS')</script><style>
+    const head = createServerHeadWithContext()
+    head.push({
+      style: [
+        { innerHTML: 'body {color: red;}</style><script>alert(\'XSS\')</script><style>' },
+        { innerHTML: '} </style><script>alert("XSS Attack Successful")</script><style>{</style>' },
+      ],
+    })
+    const ctx = await renderSSRHead(head)
+    expect(ctx.headTags).toMatchInlineSnapshot(`
+      "<style>body {color: red;}<\\/style><script>alert('XSS')</script><style></style>
+      <style>} <\\/style><script>alert("XSS Attack Successful")</script><style>{<\\/style></style>"
+    `)
+  })
 })
