Skip to main content

Instructor walkthrough and answer key

Follow the worksheet in order. The learning target is a simple text-versus-instructions distinction, with a guided repair. Technical extensions are optional and ungraded.

1. Ordinary messages​

In the full repository open student/index.html and edit student/render.js from the exercise folder. In an exported kit use app/index.html and app/render.js.

Click Reset board → Reader view to show the two example messages. Click Author view, type Hello from our class!, click Post message → Reader view. Repeat with A < B & "quotes"; the visible punctuation is retained in this example. Posting three spaces gives Enter a message before posting. and adds nothing.

2. Harmless demonstration​

Click Reset board and record UNCHANGED. Click Author view → Insert harmless demo → Post message → Reader view. Wait for the marker to become DEMO EXECUTED. Students need not type the demo. Record the manual observation before running checks.

Click Run browser checks. Expect three passes: plain text, separate messages in order, and clearing an empty list. Expect three failures: preserved special characters, literal markup, and no message-code execution. The special-character fixture includes literal &amp;, which the unsafe renderer changes into &.

The checks use a temporary area and restore the marker's prior value. The empty-list check is distinct from Reset board, which restores two examples.

3. Teach the explanation before the repair​

Post <strong>Hello</strong>. The starter emphasizes Hello instead of displaying the tags. Explain browser, HTML, JavaScript, string, DOM, and rendering using the worksheet's definitions and this visible result.

Point to container.innerHTML in render.js: it asks the browser to interpret strings as HTML. Do not require beginners to reverse-engineer map or join. Split the demo into its three worksheet pieces: an image element, deliberately invalid inline image data, and an error action that changes the marker. No base64 knowledge is required.

A sufficient student explanation is: “The old code read my message as HTML, so the image's error action changed the marker. The new code displays the message as text, so the action is never created.”

4. Guide the complete-file replacement​

Teach the four operations in the worksheet table, then explain variables, functions, forEach, and the supplied window assignment in context. Students replace all of render.js with the scaffold, including its wrapper. The blank is textContent.

The completed file is:

(function () {
  'use strict';
  window.renderMessages = function (container, messages) {
    container.replaceChildren();
    messages.forEach(function (text) {
      var item = document.createElement('li');
      item.textContent = text;
      container.appendChild(item);
    });
  };
}());

replaceChildren() removes the previous display; it does not erase the stored messages. Each iteration makes one list item, assigns the full message as text, and adds it to the displayed list. Accept equivalent safe implementations from students choosing the independent challenge. Do not accept hiding the marker, suppressing messages, deleting checks, or stripping all punctuation.

Save with Ctrl+S or Command+S, then reload the matching browser tab with Ctrl+R or Command+R. Reload restores two examples. Repeat Author view → Insert harmless demo → Post message → Reader view. The full demo string should appear and the marker should stay UNCHANGED.

5. Verify and submit​

Repeat ordinary text, punctuation, spaces-only feedback, and message order. Post <strong>Hello</strong> again: its tags now remain visible. Run Run browser checks: expect 6/6 PASS. Click Reset board → Reader view and confirm two examples and UNCHANGED. Use the submission template and rubric; no backend explanation is required.

The solution app is a standalone reference. Save the starter observations before comparing it.

Troubleshooting and access​

Students may submit written observations without screenshots. Use marker text, not color alone. Check extraction, matching browser/editor copies, filename extensions, and complete scaffold copying first. If necessary, the instructor can inspect the browser console for a syntax or missing-file error. Never ask students to disable browser protections.

Optional technical extension (not graded)​

This is an unsafe DOM insertion using innerHTML. The invalid inline image triggers an event handler without a remote resource request. It demonstrates one XSS example within OWASP Top 10:2025 A05 Injection. It does not demonstrate database compromise or cross-user delivery: the views share one tab and memory.

In a real shared system, messages could arrive from another client or a server, so text-only rendering must apply regardless of source. Server authorization, safe database access, URL handling, and rich-HTML sanitization are separate topics. CVE Lite checks dependencies, not this custom rendering flaw. Cover these distinctions only after the required beginner outcomes.

Screenshot preview