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.