What your page gives away

A web page is sent whole to every visitor's browser, so its source is theirs to read: comments, hidden fields and scripts, even when the page doesn't show them. Photos can carry where they were taken. And a check that runs in the browser can be skipped. Keep secrets and real checks on the server, and strip photo details before you upload.

The club page looks harmless. View its source and it gives away a password, three emails and a join code.

Builds on: Three layers (Digital systems › How a web page is made)

Your mission: the club's website is about to go live. Check it the way a visitor could, find everything it gives away, and fix it before anyone else looks.

Engage: Commit to a prediction before you test anything. A wrong guess is fine: it shows you what to look for.
Explore: Try it on the board and compare what happens with your prediction.
Explain: Put a name to what you saw, and why it works.
Elaborate: Use the idea in a new situation.
Evaluate: Look back at your first ideas and what changed.

EngageCommit to a prediction before you test anything. A wrong guess is fine: it shows you what to look for.

Engage: not shown, not sent?

A page has a hidden field holding members' emails. It doesn't show on the page. Can a visitor get the emails?Only the club's admin canOnly if the page crashesNo: hidden means hiddenYes: the whole page is sent to their browser, hidden parts too

ExploreTry it on the board and compare what happens with your prediction.

Explore: check the club page

Was your prediction right?

Try it yourselfYour edits are saved in this browser.

Find everything the club page gives away. Look at what visitors see, then everything their browser receives. Mark only real leaks.

Use the board. This ticks when you get there.

ExplainPut a name to what you saw, and why it works.

Explain: everything is sent

Worked exampleBefore each step, say what you think comes next.

$\text{comments}$ Not shown, but sent: never put passwords or notes in them.
$\text{hidden fields}$ Not shown, but sent: keep private data on the server.
$\text{scripts}$ Sent and readable; a check in the browser can be skipped, so check again on the server.
$\text{files}$ A photo carries details such as where it was taken: remove them before uploading.
$\text{test}$ Does the visitor's browser receive it? Then the visitor can read it.

Find the mistake

Sam adds the members' emails to the page. Click the line where it first goes wrong.

ElaborateUse the idea in a new situation.

Elaborate: fix it

Try it yourselfYour edits are saved in this browser.

Fix all four leaks on the club page so nothing private reaches a visitor.

Use the board. This ticks when you get there.

Now check the sign-up page. Mark only real leaks.

Use the board. This ticks when you get there.

ElaborateUse the idea in a new situation.

Elaborate: before launch

Try it yourselfYour edits are saved in this browser.

Need a hint?

For each leak, ask: after this fix, does the visitor's browser still receive it?

Another hint

Renaming, hiding and splitting all leave it in the page.

Fix every leak on the sign-up page before it launches.

Use the board. This ticks when you get there.

EvaluateLook back at your first ideas and what changed.

Evaluate: look back

You're about to post a photo taken at home on the club page. What should you check first?That the file name is shortNothing: photos are just picturesIts details: remove the location before uploadingThat it's under 1 MB

I can check what my own page gives away and keep secrets and checks on the server.

For teachers

Students view a club web page as a visitor can, through its source and a photo's details, find what it gives away (a password in a comment, emails in a hidden field, a join code in a script, a photo's location), fix each leak, then check and fix a sign-up page (AC9TDI10P14 node 3). Defensive, on the students' own made-up pages. A 5E mission lesson. About 45 minutes.

Open the teacher guide: answers, solutions, slides and a worksheet.

Students will be able to

I can find what a page sends to every visitor, shown or not.
I can say why a check in the browser isn't enough.
I can fix a page so private data and checks stay on the server.

Before class

Try the boards yourself. The pages, people and addresses are made up.

The one idea: the whole page is sent to every visitor, so anything in it can be read; secrets and real checks belong on the server, and photos should lose their location before upload.

This is about checking your own pages (the students' own sites in HTML & CSS or Your site). Real browsers show the source with View source (Ctrl+U or Cmd+Option+U) and the developer tools.

Simplifications: "the server" stands for any code the visitor doesn't receive. Photo details are EXIF data; many phones add the location unless it is turned off, and some sites remove it on upload, but not all.

Running the lesson

Engage: ask what 'hidden' means on a web page.
Explore: ask which leak was hardest to find, and why.
Explain: run the browser test on each line of the source together.
Elaborate: ask why the unlisted drafts page isn't private.
Evaluate: have students check their own phone's camera location setting.

The hard part (on purpose)

Students pick fixes that hide (white text, rename, move). Keep asking the one question: does the browser still receive it?

When students get stuck

A student thinks hidden means private (Sam's mistake). Ask: Did the browser receive it? Fix: Then the visitor can read it.
A student fixes the password check by making it stricter in the script. Ask: Who controls the browser that runs the script? Fix: The visitor: check on the server.

Stretch and support

Stretch: View the source of one of your own pages (from HTML & CSS) and list anything you wouldn't want a visitor to read.

Support: The one question on a card: does the visitor's browser receive it?

Where it leads

Next: Capture the flag, the old archive.

What each step is for

Engage: not shown, not sent?: Committing to whether hidden parts reach visitors tests the new move: the browser receives the whole page.
Explore: check the club page: Students look at the page as a visitor can, through its source and its photo, and find the leaks, missing some at first.
Explain: everything is sent: The teacher models checking each part of a page with one question: does the browser receive it? Sam trusts a hidden field, the misconception planted after the method.
Elaborate: fix it: One change: from finding leaks to fixing them, where the wrong fixes only hide them; then a second page to check.
Elaborate: before launch: Producing the safe version of a page: each fix moves a secret or a check off the visitor's browser.

Now you can

Find what a page sends to every visitor, shown or not.
Say why a check in the browser isn't enough.
Fix a page so private data and checks stay on the server.

Next lesson3. Capture the flag: the old archiveThe club's old archive server is being wiped on Friday. Before it goes, find out what it still gives away: five flags, each found with a skill from Digital systems (decoding, page source, the command line, a tiny processor and a key word). Then close the archive's leaks so the secrets can be changed.

Source: content/systems/ctf/page-source/lesson.md