Understand origins and browser boundaries
See this course’s project requirements
A defensive local link-directory app with text-only rendering, allowed URL schemes, same-origin explanation and a validation matrix using inert fictional strings.
Keep your working files in your own notebook or software. Save a private description, checklist, and work link in My Proof.
What to include
- Demonstrate literal rendering of markup-like label text using fixed DOM structure.
- Produce a parser-versus-policy matrix for accepted HTTPS and rejected scheme/relative cases.
- Show embedded-credential rejection and distinguish address validation from destination review.
- Create an origin tuple comparison and a correct browser-access boundary explanation.
- Retain inert validation tests, literal-render observations, and unchanged-list rejection evidence.
- Deliver the tested local directory with explicit implemented rules and unimplemented security boundaries.
Review and revise
Use these criteria to check your work and choose what to improve.
- The implementation or declared simulation follows the supplied contract and retains inspectable original inputs.
- Normal, boundary and rejected cases are recorded with expected versus observed results.
- The changed case has a correct explanation and does not rely on hidden state.
- The project includes source, outputs, instructions and honest tool, privacy and verification limits.
Want more background?
The idea in everyday life
Use directory.html, link-rules.mjs and test-links.mjs with label <b>Guide</b> and https://example.com/help. Serve locally with python3 -m http.server 8765 --bind 127.0.0.1. The markup-like label is inert text; do not follow external links during practice.
An origin includes scheme, host, and port. Same-origin restrictions govern access between contexts; adding a link does not grant the app access to another site’s private data.
Understand origins and browser boundaries — original worked practice
An origin includes scheme, host, and port. Same-origin restrictions govern access between contexts; adding a link does not grant the app access to another site’s private data.
Use directory.html, link-rules.mjs and test-links.mjs with label <b>Guide</b> and https://example.com/help. Serve locally with python3 -m http.server 8765 --bind 127.0.0.1. The markup-like label is inert text; do not follow external links during practice.
1. Step 1
Compare originOf for https://example.com/a and /b using the supplied complete URL strings.
You should see: Their origin is the same despite different paths.
An origin includes scheme, host, and port. Same-origin restrictions govern access between contexts; adding a link does not grant the app access to another site’s private data.
2. Step 2
Compare the standard origin with https://example.com:444/a.
You should see: A different port produces a different origin.
An origin includes scheme, host, and port. Same-origin restrictions govern access between contexts; adding a link does not grant the app access to another site’s private data.
3. Step 3
Read the linked same-origin documentation and identify address tuple versus path.
You should see: Scheme/host/port are distinguished from resource path.
An origin includes scheme, host, and port. Same-origin restrictions govern access between contexts; adding a link does not grant the app access to another site’s private data.
4. Step 4
Record that the app creates a link without fetching external private records.
You should see: An origin comparison and scope note.
An origin includes scheme, host, and port. Same-origin restrictions govern access between contexts; adding a link does not grant the app access to another site’s private data.
What to finish
Create an origin tuple comparison and a correct browser-access boundary explanation.
Watch for this
Believing an external link or HTTPS check grants cross-origin private-data access.
How can I tell I understand it?
Demonstrate the rule: An origin includes scheme, host, and port. Same-origin restrictions govern access between contexts; adding a link does not grant the app access to another site’s private data. Use the supplied variant to distinguish a changed result from a broken implementation.
Quick knowledge check
Answer all 3 questions. Get at least 2 right and the lesson completes automatically.
You’ll get an explanation for each answer. Signed in? Your results save to your account.
Pass the check. We’ll save the progress.
Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.
Go to the knowledge checkTools, templates, and lesson sources
Tools and templates
Tools open in a new tab so you can keep your place here.
Sources and further reading
Explore the references behind this lesson.
Source & access notes · checked 2026-10-01
Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.
Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.
Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.
Source & access notes · checked 2026-10-01
Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.
Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.
Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.