fix(astro): Avoid injecting meta tags into <head> inside attribute values (#21089)

andreiborza · web-flow · commit d65915b6a78e · 2026-05-21T17:00:11.000+09:00
`addMetaTagToHead` previously used string replacement matching on `<head>` strings. This however also matches when `<head>` is used in data attribute values, e.g. `data-code="<head>..."`, corrupting the markup. We now use a regex that skips over quoted strings, so only a real `<head>` tag gets meta tags injected. Closes: #21068
diff --git a/packages/astro/src/server/middleware.ts b/packages/astro/src/server/middleware.ts
@@ -279,8 +279,15 @@ function addMetaTagToHead(htmlChunk: string, metaTagsStr: string): string {
     return htmlChunk;
   }
 
-  const content = `<head>${metaTagsStr}`;
-  return htmlChunk.replace('<head>', content);
+  // Skip quoted attribute values so we don't match <head> inside e.g. data-code="...<head>..."
+  let replaced = false;
+  return htmlChunk.replace(/"[^"]*"|'[^']*'|(<head>)/g, (match, headTag) => {
+    if (headTag && !replaced) {
+      replaced = true;
+      return `<head>${metaTagsStr}`;
+    }
+    return match;
+  });
 }
 
 function getMetaTagsStr({
diff --git a/packages/astro/test/server/middleware.test.ts b/packages/astro/test/server/middleware.test.ts
@@ -428,6 +428,55 @@ describe('sentryMiddleware', () => {
     expect(resultFromNext).toBe(originalResponse);
   });
 
+  it('does not inject meta tags into <head> inside attribute values', async () => {
+    const middleware = handleRequest();
+
+    const ctx = {
+      ...DYNAMIC_REQUEST_CONTEXT,
+    };
+
+    const bodyWithHeadInAttr =
+      '<head><meta name="something" content=""/></head><body><button data-code="&lt;html&gt;&lt;head&gt;&lt;/head&gt;"></button></body>';
+    const next = vi.fn(() =>
+      Promise.resolve(
+        new Response(bodyWithHeadInAttr, {
+          headers: new Headers({ 'content-type': 'text/html' }),
+        }),
+      ),
+    );
+
+    // @ts-expect-error, a partial ctx object is fine here
+    const resultFromNext = await middleware(ctx, next);
+    const html = await resultFromNext?.text();
+
+    expect(html).toContain('<meta name="sentry-route-name" content="%2Fusers"/>');
+    expect(html).not.toContain('data-code="&lt;html&gt;&lt;head&gt;<meta name="sentry-route-name"');
+  });
+
+  it('does not inject meta tags into <head> inside quoted attribute values in the same chunk', async () => {
+    const middleware = handleRequest();
+
+    const ctx = {
+      ...DYNAMIC_REQUEST_CONTEXT,
+    };
+
+    const htmlWithHeadInDataAttr = '<head></head><body><div data-content="<head>should not be modified"></div></body>';
+    const next = vi.fn(() =>
+      Promise.resolve(
+        new Response(htmlWithHeadInDataAttr, {
+          headers: new Headers({ 'content-type': 'text/html' }),
+        }),
+      ),
+    );
+
+    // @ts-expect-error, a partial ctx object is fine here
+    const resultFromNext = await middleware(ctx, next);
+    const html = await resultFromNext?.text();
+
+    expect(html).toContain('<meta name="sentry-route-name" content="%2Fusers"/>');
+    expect(html).toContain('data-content="<head>should not be modified"');
+  });
+
   it("no-ops if there's no <head> tag in the response", async () => {
     const middleware = handleRequest();
 
