CS / ITS PREPCOURSE · EXERCISE 02 · SOFTWARE SECURITY

The festival guestbook

Make your message do more than the organisers expected. Then repair the page.

Local practice page · fictional content · messages disappear on reload

Leave a message

Ready for your first message.

Latest guestbook entry

Each submission replaces the previous entry.

No messages yet.

Your challenge

  1. Post an ordinary message.
  2. Use the input field to make your message appear as a large heading.
  3. Use the input field to open a JavaScript alert saying Hello Security!.
  4. Save a copy as guestbook-fixed.html. Open that copy in a plain-text editor and find EDIT HERE. Change the display operation to treat messages as text.
  5. Save, reopen the edited copy in your browser, and repeat all three inputs. Every input should now appear literally, without HTML formatting or JavaScript execution.

Bonus: open bonus/guestbook-bonus.html and allow only <strong> and <em> formatting.

Hints

Hint 1 · HTML formatting

Try <h1>Hello festival!</h1>. HTML tags describe how the browser should interpret content.

Hint 2 · Events can run code

An image can have an onerror handler. The handler runs if the image cannot load. A script element inserted through innerHTML does not ordinarily execute.

Hint 3 · A harmless local demonstration

Paste this into the message field:

<img src="data:image/png;base64,AA==" onerror="alert('Hello Security!')">

The supplied data is not a valid PNG. It triggers an image error without fetching a remote image.

Hint 4 · Repair the display operation

In the marked function, change entry.innerHTML = message; to entry.textContent = message;. Save the file and reload the correct browser tab. Test again: deleting the attack input is not a repair.

Keep evidence

Record your normal message, heading input, and JavaScript input in lab-record.md. Save your repaired page with a new filename. Demonstrate that your test messages behave correctly after repair.

MDN: Cross-site scripting · MDN: textContent