Worked solution: browser security basics

Open index.html in this directory for the standalone corrected app. No server or package installation is required. All app files match the starter except render.js.

The renderer creates a list item for each message and uses textContent to put the complete message inside it. Unlike innerHTML, this displays the characters as text rather than interpreting them as HTML instructions. It preserves punctuation and message order. replaceChildren() removes the previous displayed items before drawing them again.

This is the completed version of the worksheet's guided scaffold. Both the guided route and an equivalent independent repair can earn full credit.

Verify

1. Click Author view, enter an ordinary message, click Post message, then Reader view. It should appear after the examples.
2. Repeat with <strong>Hello</strong>. The tags should be visible as text.
3. Click Reset board. Confirm the marker is UNCHANGED.
4. Click Author view → Insert harmless demo → Post message → Reader view. The full demo text should appear; the marker should remain UNCHANGED.
5. Click Run browser checks. Expect 6 of 6 PASS, compared with 3 of 6 PASS in the starter.
6. Repeat punctuation, spaces-only input, and multiple messages in posting order. Click Reset board → Reader view and confirm the two example messages return.

Reloading also removes added messages and restores the two examples. Browser checks use a temporary area and restore the marker to its previous value.

See the instructor walkthrough and rubric. The required explanation is simply why message instructions ran before repair and stay text afterward. Backend and OWASP discussion is optional.

This repair fits a plain-text message board. Other uses, such as allowing rich HTML formatting, need separate design and verification.