Fix XSS vulnerability in SignalR TypeScript webpack tutorial samples

[Copilot]

• Identify all files with XSS vulnerability (innerHTML usage)
• Fix samples/10.x/src/index.ts - replace innerHTML with safe DOM manipulation
• Fix samples/3.x/src/index.ts - replace innerHTML with safe DOM manipulation
• Fix samples/2.x/src/index.ts - replace innerHTML with safe DOM manipulation
• Fix samples_snapshot/3.x/index2.ts - replace innerHTML with safe DOM manipulation
• Fix samples_snapshot/2.x/index2.ts - replace innerHTML with safe DOM manipulation
• Update prose in signalr-typescript-webpack8-9.md (remove innerHTML reference)
• Update prose in signalr-typescript-webpack7.md (remove innerHTML reference)
• Update prose in signalr-typescript-webpack6.md (remove innerHTML reference)
• Update prose in signalr-typescript-webpack2.1-5.md (remove innerHTML references)
• Update prose in signalr-typescript-webpack.md (remove innerHTML reference)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Sample code is vulnerable to XSS</issue_title>
<issue_description>This docs page contains the following sample code, supposed to be a part of a simplistic chat app:

import * as signalR from "@microsoft/signalr";
import "./css/main.css";

const divMessages: HTMLDivElement = document.querySelector("#divMessages");
const tbMessage: HTMLInputElement = document.querySelector("#tbMessage");
const btnSend: HTMLButtonElement = document.querySelector("#btnSend");
const username = new Date().getTime();

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/hub")
    .build();

connection.on("messageReceived", (username: string, message: string) => {
  const m = document.createElement("div");

  m.innerHTML = `<div class="message-author">${username}</div><div>${message}</div>`;

  divMessages.appendChild(m);
  divMessages.scrollTop = divMessages.scrollHeight;
});

connection.start().catch((err) => document.write(err));

tbMessage.addEventListener("keyup", (e: KeyboardEvent) => {
  if (e.key === "Enter") {
    send();
  }
});

btnSend.addEventListener("click", send);

function send() {
  connection.send("newMessage", username, tbMessage.value)
    .then(() => (tbMessage.value = ""));
}

Note this particular line:

m.innerHTML = `<div class="message-author">${username}</div><div>${message}</div>`;

This is a horrible practice, sadly all too common. XSS is one of the most common vulnerabilities. I understand that this is just a sample code not intended to be used in production, however I feel that teaching people to write such code makes them - and the whole world - terrible disservice.

People should be warned against XSS, not taught to write code that is vulnerable to XSS.

At minimum I feel that the above line should be replaced with the following code:

const author = document.createElement("div");
author.className = "message-author";
author.textContent = username.toString();

const content = document.createElement("div");
content.textContent = message;

m.append(author, message);

Also please fix the corresponding file in the samples repo: https://github.com/dotnet/AspNetCore.Docs.Samples/blob/main/tutorials/signalr-typescript-webpack/samples/6.x/SignalRWebpack/src/index.ts

Even ignoring the XSS issue, the sample chat app is hardly functional at the moment. Users are hardly able to, for example, help each other with HML or JS code. The suggested fix allows users to, for example, say: "To embed JS in HTML you use the <script> tag, see MDN docs at ...". Currently saying this will not give expected results.

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 47557f89-3a14-1139-0074-38d931b35faf
• Version Independent ID: 1cee43b4-b672-e480-3e26-72e08a6c2d77
• Content: Tutorial: Get started with ASP.NET Core SignalR using TypeScript and Webpack
• Content Source: aspnetcore/tutorials/signalr-typescript-webpack.md
• Product: aspnet-core
• Technology: aspnetcore-tutorials
• GitHub Login: @ssougnez
• Microsoft Alias: bradyg</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Sample code is vulnerable to XSS #25890

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

---

Internal previews

📄 File	🔗 Preview link
aspnetcore/tutorials/signalr-typescript-webpack.md	Tutorial: Get started with ASP.NET Core SignalR using TypeScript and Webpack

[meaghanlewis]

@copilot please update aspnetcore/tutorials/signalr-typescript-webpack.md with the same change as the other .md files.

[Copilot]

@copilot please update aspnetcore/tutorials/signalr-typescript-webpack.md with the same change as the other .md files.

Done in e75a67f. Updated the prose in signalr-typescript-webpack.md to replace the innerHTML reference with the textContent-based description, consistent with the other include files.

[wadepickett]

This looks great! Approved.