Sample code is vulnerable to XSS

[gaazkam]

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

[Rick-Anderson]

@bradygaster @BrennanConroy please review