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.
Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.
SlidesDownload Present from the browser, or export to PowerPoint or PDF.
WorksheetDownload Print the student copy; the Teacher edition has the answers.
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.
Timing
Engage and Explore 12 min · Explain 8 min · Elaborate 18 min · Evaluate 7 min
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
What you will see
A question to ask
The fix
A student thinks hidden means private (Sam's mistake).
Did the browser receive it?
Then the visitor can read it.
A student fixes the password check by making it stricter in the script.
Who controls the browser that runs the script?
The visitor: check on the server.
Answers to the checks
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? Yes. View source (or saving the page) shows everything the browser received, hidden fields included.
Explore: check the club page: Find everything the club page gives away. Look at what visitors see, then everything their browser receives. Mark only real leaks.
Four: the admin password in a comment, the members' emails in a hidden field, the join code in a script, and the photo's location in its details.
Explain: everything is sent: Sam adds the members' emails to the page. Click the line where it first goes wrong. line 4 Line 4: the page didn't show them, but it sent them. Anyone can read them in the source.
Fix the club page: Fix all four leaks on the club page so nothing private reaches a visitor.
Delete the comment and change the password, keep the emails and the join check on the server, and strip the photo's location. Hiding things on the page fixes nothing.
The sign-up page: Now check the sign-up page. Mark only real leaks.
A test account in a comment, a password rule only checked in the browser, a private key in a script, and an unlisted drafts page anyone with the address can open.
Elaborate: before launch: Fix every leak on the sign-up page before it launches.
Remove the test account, check the password on the server, keep the key on the server, and put the drafts behind a sign-in.
The photo: You're about to post a photo taken at home on the club page. What should you check first? Its details: remove the location before uploading Many phones store the place a photo was taken inside the file. Remove it, or turn location off for the camera.
Solutions
One possible solution for each task. Other correct programs are fine.
Elaborate: fix it › Fix the club page
Open task: any program that does what the step asks.
Elaborate: fix it › The sign-up page
Open task: any program that does what the step asks.
Elaborate: before launch
Open task: any program that does what the step asks.
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?
Exit ticket
Name two things a page can give away without showing them, and the fix for one.
Comments, hidden fields, scripts (codes, keys, checks), a photo's location. Fix: delete it or keep it on the server; remove photo details before uploading.
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.