@@ -155,13 +155,52 @@ export function escapeRegExp(s: string) {
 }
 
 const escaped = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', '\'': '&#39;' };
-export function escapeHTMLAttribute(s: string): string {
+function escapeHTMLAttribute(s: string): string {
   return s.replace(/[&<>"']/ug, char => (escaped as any)[char]);
 }
 export function escapeHTML(s: string): string {
   return s.replace(/[&<]/ug, char => (escaped as any)[char]);
 }
 
+// All trace-controlled data goes through this class, so escaping and name checks live in one place.
+export class HtmlBuilder {
+  private _chunks: string[] = [];
+
+  text(text: string) {
+    this._chunks.push(escapeHTML(text));
+  }
+
+  openTag(name: string): boolean {
+    if (!isSafeName(name))
+      return false;
+    this._chunks.push('<', name);
+    return true;
+  }
+
+  attribute(name: string, value: string) {
+    if (!isSafeName(name))
+      return;
+    this._chunks.push(' ', name, '="', escapeHTMLAttribute(value), '"');
+  }
+
+  endOpenTag() {
+    this._chunks.push('>');
+  }
+
+  closeTag(name: string) {
+    this._chunks.push('</', name, '>');
+  }
+
+  toString() {
+    return this._chunks.join('');
+  }
+}
+
+// Reject names that would end the tag or attribute name early. Allow Unicode custom elements such as math-α.
+function isSafeName(name: string): boolean {
+  return !!name && !/[\s=<>\/"']/.test(name);
+}
+
 export function longestCommonSubstring(s1: string, s2: string): string {
   const n = s1.length;
   const m = s2.length;
 
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { escapeHTMLAttribute, escapeHTML } from '../stringUtils';
+import { HtmlBuilder } from '../stringUtils';
 
 import type { FrameSnapshot, NodeNameAttributesChildNodesSnapshot, NodeSnapshot, ResourceSnapshot, SubtreeReferenceSnapshot } from './trace';
 import type { PageEntry } from './entries';
@@ -91,11 +91,11 @@ export class SnapshotRenderer {
   }
 
   render(): RenderedFrameSnapshot {
-    const result: string[] = [];
+    const result = new HtmlBuilder();
     const visit = (n: NodeSnapshot, snapshotIndex: number, parentTag: string | undefined, parentAttrs: [string, string][] | undefined) => {
       // Text node.
       if (typeof n === 'string') {
-        result.push(escapeHTML(n));
+        result.text(n);
         return;
       }
 
@@ -114,17 +114,14 @@ export class SnapshotRenderer {
         // crafted trace file could include them to achieve XSS.
         if (name.toUpperCase() === 'SCRIPT')
           return;
-        // Reject names that would emit extra attributes (space, =, <, >, /).
-        // Allow Unicode custom elements such as math-α.
-        if (/[\s=<>\/]/.test(name))
-          return;
         // Element node.
         // Note that <noscript> will not be rendered by default in the trace viewer, because
         // JS is enabled. So rename it to <x-noscript>.
         const upperName = name.toUpperCase();
         const nodeName = upperName === 'NOSCRIPT' ? 'X-NOSCRIPT' : name;
         const attrs = Object.entries(nodeAttrs || {});
-        result.push('<', nodeName);
+        if (!result.openTag(nodeName))
+          return;
         const kCurrentSrcAttribute = '__playwright_current_src__';
         const isFrame = upperName === 'IFRAME' || upperName === 'FRAME';
         const isAnchor = upperName === 'A';
@@ -176,20 +173,21 @@ export class SnapshotRenderer {
           let attrValue = value;
           if (!isAnchor && (attr.toLowerCase() === 'href' || attr.toLowerCase() === 'src' || attr === kCurrentSrcAttribute))
             attrValue = rewriteURLForCustomProtocol(value);
-          result.push(' ', attrName, '="', escapeHTMLAttribute(attrValue), '"');
+          result.attribute(attrName, attrValue);
         }
         if (upperName === 'STYLE') {
           // Style has always exactly one child which is a text node.
           const styleContent = typeof children[0] === 'string' ? children[0] : '';
-          result.push(' ', '__playwright_style_content__', '="', escapeHTMLAttribute(rewriteURLsInStyleSheetForCustomProtocol(styleContent)), '"');
-          result.push('></', nodeName, '>');
+          result.attribute('__playwright_style_content__', rewriteURLsInStyleSheetForCustomProtocol(styleContent));
+          result.endOpenTag();
+          result.closeTag(nodeName);
           return;
         }
-        result.push('>');
+        result.endOpenTag();
         for (const child of children)
           visit(child, snapshotIndex, nodeName, attrs);
         if (!autoClosing.has(nodeName))
-          result.push('</', nodeName, '>');
+          result.closeTag(nodeName);
         return;
       } else {
         // Why are we here? Let's not throw, just in case.
@@ -211,7 +209,7 @@ export class SnapshotRenderer {
         // Hide the document in order to prevent flickering. We will unhide once script has processed shadow.
         '<style>*,*::before,*::after { visibility: hidden }</style>',
         `<script nonce="${scriptNonce}">${snapshotScript(this.viewport(), this._callId, this.snapshotName)}</script>`
-      ].join('') + result.join('');
+      ].join('') + result.toString();
       return { value: { html, scriptNonce }, size: html.length };
     });
 
 
@@ -91,11 +91,13 @@ test('TV-124 snapshot renderer nonces the bootstrap script', () => {
 
 test('TV-125 snapshot renderer strips event handler attributes', () => {
   const renderer = new SnapshotRenderer(new LRUCache(1_000_000), [], [makeSnapshot({
-    html: ['HTML', {}, ['BODY', {}, ['IMG', { 'onerror': 'alert(1)', 'src': 'x' }]]],
+    html: ['HTML', {}, ['BODY', {}, ['IMG', { 'onerror': 'alert(1)', ' onerror': 'alert(2)', 'x onmouseover=alert(3)': 'y', 'src': 'x' }]]],
   })], [], 0);
   const { html } = renderer.render();
-  expect(html).not.toContain('onerror="alert(1)"');
-  expect(html).toContain('src="x"');
+  expect(html).not.toContain('alert(1)');
+  expect(html).not.toContain('alert(2)');
+  expect(html).not.toContain('alert(3)');
+  expect(html).toContain('<IMG src="x">');
 });
 
 test('TV-126 snapshot renderer strips onclick attributes', () => {