HTTP and HTTPS protocols in Intro to Computing - Draw & Build Visually

Draw This - beginner

Draw a flowchart showing the basic steps of how a web browser uses HTTP and HTTPS protocols to request and receive a web page. Include the difference in security steps between HTTP and HTTPS.

10 minutes

Hint 1

Hint 2

Hint 3

Hint 4

Hint 5

Grading Criteria

Start and End symbols present

Decision symbol used to check HTTP vs HTTPS

Separate paths for HTTP and HTTPS shown

SSL/TLS handshake step included for HTTPS

Request and response steps shown for both protocols

Browser displays web page at the end

Solution

  +-------------------+
  | Start: User types  |
  | website address    |
  +---------+---------+
            |
            v
  +-------------------+
  | Browser checks if |
  | URL starts with   |
  | HTTP or HTTPS     |
  +---------+---------+
            |
    +-------+-------+
    |               |
    v               v
+---------+     +------------------+
| HTTP    |     | HTTPS            |
| Request |     | SSL/TLS Handshake|
+----+----+     +---------+--------+
     |                  |
     v                  v
+----+----+        +----+----+
| Send    |        | Secure  |
| Request |        | Connection|
+----+----+        +----+----+
     |                  |
     v                  v
+----+----+        +----+----+
| Server  |        | Server  |
| receives|        | receives|
| request |        | request |
+----+----+        +----+----+
     |                  |
     v                  v
+----+----+        +----+----+
| Server  |        | Server  |
| sends   |        | sends   |
| response|        | encrypted|
+----+----+        | response|
     |             +----+----+
     v                  |
+----+----+              v
| Browser |        +-----+-----+
| receives|        | Browser   |
| response|        | decrypts  |
+----+----+        | response  |
     |             +-----+-----+
     v                  |
+----+----+              v
| Browser |        +-----+-----+
| displays|        | Browser   |
| web page|        | displays  |
+---------+        | web page  |
                   +-----------+

This flowchart shows the steps a web browser takes to load a web page using HTTP or HTTPS.

1. The user types a website address in the browser.

2. The browser checks if the URL starts with http:// or https://.

3. For HTTP, the browser sends the request directly to the server without encryption.

4. For HTTPS, the browser first performs an SSL/TLS handshake to create a secure encrypted connection.

5. The server receives the request and sends back the response. For HTTPS, the response is encrypted.

6. The browser receives the response. For HTTPS, it decrypts the response before displaying.

7. Finally, the browser displays the web page to the user.

This shows the main difference: HTTPS adds a security step (SSL/TLS handshake) and encrypts data to keep it safe.

Variations - 2 Challenges

[intermediate] Draw a flowchart showing how HTTPS protects data during transmission using SSL/TLS handshake and encryption.

[advanced] Draw a detailed flowchart comparing HTTP, HTTPS, and FTP protocols for transferring files or web pages, highlighting security differences.

Practice

1. What is the main difference between HTTP and HTTPS?

easy

A. HTTPS encrypts data while HTTP does not

B. HTTP encrypts data while HTTPS does not

C. HTTP is faster because it uses encryption

D. HTTPS is only used for email communication

Solution

1. Step 1: Understand HTTP basics

   HTTP is a protocol used for communication between browsers and websites without encryption.

2. Step 2: Understand HTTPS security

   HTTPS adds encryption to protect data during transmission, making it secure.

3. Final Answer:

   HTTPS encrypts data while HTTP does not -> Option A

4. Quick Check:

   Encryption = HTTPS [OK]

Hint: HTTPS means secure, HTTP does not [OK]

Common Mistakes:

• Confusing which protocol encrypts data
• Thinking HTTP is secure by default
• Believing HTTPS is only for emails

2. Which of the following is the correct way to write a URL using HTTPS?

easy

A. http://www.example.com

B. htpps://www.example.com

C. htp://www.example.com

D. https://www.example.com

Solution

1. Step 1: Identify correct HTTPS syntax

   The correct prefix for secure websites is https:// with 'https' fully spelled and followed by '://'.

2. Step 2: Check each option

   https://www.example.com matches the correct syntax exactly; others have typos or use HTTP.

3. Final Answer:

   https://www.example.com -> Option D

4. Quick Check:

   Correct HTTPS URL = https://www.example.com [OK]

Hint: HTTPS URLs start with 'https://' exactly [OK]

Common Mistakes:

• Typing 'htp' or 'htpps' instead of 'https'
• Using 'http' instead of 'https' for secure sites
• Missing the '://' after the protocol

3. Consider this simplified flowchart of a browser requesting a webpage:



If the protocol is HTTPS, what extra step happens during the 'Browser sends request' phase?

medium

A. The browser encrypts the request before sending

B. The browser sends the request without encryption

C. The browser skips sending the request

D. The browser sends the request twice

Solution

1. Step 1: Analyze HTTPS request process

   HTTPS requires encrypting data before sending it to protect privacy.

2. Step 2: Compare options with HTTPS behavior

   Only The browser encrypts the request before sending describes encryption before sending, which matches HTTPS protocol.

3. Final Answer:

   The browser encrypts the request before sending -> Option A

4. Quick Check:

   Encryption before sending = The browser encrypts the request before sending [OK]

Hint: HTTPS encrypts data before sending [OK]

Common Mistakes:

• Thinking HTTPS sends data unencrypted
• Assuming browser sends request twice
• Believing browser skips sending request

4. A developer wrote this code snippet to fetch a webpage securely:

fetch('http://secure-site.com/data')

What is the main problem here?

medium

A. The URL is missing a domain extension

B. The fetch function is misspelled

C. The URL uses HTTP instead of HTTPS

D. The code is missing a semicolon

Solution

1. Step 1: Check URL protocol

   The URL uses http:// which is not secure for sensitive data.

2. Step 2: Identify correct secure protocol

   To fetch data securely, the URL should start with https://.

3. Final Answer:

   The URL uses HTTP instead of HTTPS -> Option C

4. Quick Check:

   Secure fetch needs HTTPS URL [OK]

Hint: Secure fetch requires HTTPS URL [OK]

Common Mistakes:

• Ignoring the protocol difference
• Thinking semicolon is mandatory in JavaScript fetch
• Assuming fetch is misspelled

5. You want to ensure a website always uses HTTPS even if a user types HTTP. Which method should you use?

hard

A. Disable HTTP protocol on the user's browser

B. Set up a redirect from HTTP to HTTPS on the server

C. Use HTTP for all pages and HTTPS only for login

D. Ask users to manually type HTTPS every time

Solution

1. Step 1: Understand how to enforce HTTPS

   Redirecting HTTP requests to HTTPS ensures all traffic is secure automatically.

2. Step 2: Evaluate other options

   Disabling HTTP on user browsers or manual typing is impractical; partial HTTPS use is insecure.

3. Final Answer:

   Set up a redirect from HTTP to HTTPS on the server -> Option B

4. Quick Check:

   Redirect HTTP to HTTPS = Set up a redirect from HTTP to HTTPS on the server [OK]

Hint: Use server redirect to force HTTPS [OK]

Common Mistakes:

• Thinking users must type HTTPS manually
• Believing disabling HTTP on browsers is feasible
• Using HTTP for some pages weakens security