XSS lab: Render a model’s answer as text instead of active markup

Text belongs in textContent (or createTextNode). innerHTML runs the HTML parser on the value, which is what turns an answer into an img element. escapeText is for serialized HTML that something else parses later.

A prefix or substring check accepts docs.example.test.attacker.invalid, and a javascript: blocklist misses java\tscript:, which the URL parser reads as javascript:. Parse first and compare url.protocol and url.hostname exactly.

export function escapeText(value) {
  const entities = {'&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;'};
  return String(value).replace(/[&<>"']/g, character => entities[character]);
}

export function renderAnswer(answer, sourceUrl) {
  const card = document.createElement('article');
  const text = document.createElement('p');
  text.textContent = answer;
  card.append(text);
  const href = allowedSource(sourceUrl);
  if (href) {
    const link = document.createElement('a');
    link.href = href;
    link.textContent = 'Source';
    card.append(link);
  }
  return card;
}

// HTTPS, exactly docs.example.test, no credentials, no explicit port: the guide's link rule.
function allowedSource(value) {
  const url = URL.parse(String(value));
  if (!url || url.protocol !== 'https:' || url.hostname !== 'docs.example.test'
      || url.username || url.password || url.port) return null;
  return url.href;
}

escapeText turns <img src=x onerror="steal()"> into entity-escaped source, so parsing it in a text position creates visible text, and turns an existing &lt;admin&gt; into &amp;lt;admin&amp;gt; so the entity spelling stays literal. renderAnswer puts the answer in a text node, so the same hostile answer shows as text and the DOM holds no img element; a closing </p> in an answer stays text too. For the source, URL.parse applies the browser’s own rules: it strips leading and trailing spaces and control characters and removes every tab and newline, so java\tscript: and " javascript:" both parse as javascript: and fail the https: check; docs.example.test.attacker.invalid fails the exact host; :8443 fails the port; credentials fail. A quote in an allowed URL is percent-encoded by the parser and, set through the href property, stays inside one attribute. The documentation link renders with its parsed href.

Compare it with your own fix, then rerun the tests. The editor is not changed when you open this explanation.

The browser and the lab download run the same cases, including cases that catch common wrong fixes, such as comparing with one fixture value instead of the real rule. The download includes the complete test adapter and cryptographic fixtures.