Cookie

Web Basics

Course Information

  • Course Title: COMP6230 Network and Web-Based Security

  • Lecture Date: 25/26

  • Instructor: Dr. Weijia He

Overview of Web Browsing

  • Web Browsing Implications: It is essential for users to understand how their online activities are tracked by advertisers and other entities.

    • Intelligent Tracking Prevention: This feature of Safari protects users by identifying and blocking trackers from monitoring their online behavior and IP address.

    • Privacy: Browsing remains private as the user’s activities are not shared with external entities.

  • User Profiles: Users can keep their browsing activities separated by creating different profiles for various topics (e.g., Work vs Personal).

    • Synchronization: Profiles are synced across devices, allowing users to continue their browsing seamlessly from anywhere.

Understanding URLs (Uniform Resource Locator)

  • Structure of a URL:**

    • Format: <protocol>://<hostname>/<endpoint>?<param1_key>=<param1_value>&...

    • Example: To search for “weather tomorrow” on Google:

    • URL: https://www.google.com/search?q=weather+tomorrow

  • Components:

    • Protocol: Defines how data is transmitted (e.g., https).

    • Hostname: The domain name of the website (e.g., www.google.com).

    • Endpoint: Specific resource path (e.g., /search).

    • Parameters: Inputs that specify particular queries (e.g., ?q=weather+tomorrow).

HTTP Requests

  • First Request: The initial request sent by the browser when navigating to a site, such as GET / HTTP/1.1.

Tracking Network Requests

  • Details regarding the request lifecycle and the components involved (e.g., CSS, JS, images).

  • Performance Timing: Analyzing site load timings and resources, which can be measured in milliseconds. Example timing data:

    • Request Completion: 32.70 seconds

    • DOM Content Loaded: 477 milliseconds

    • Example of request details: 56 requests made and 261 kB transferred.

Anatomy of an HTTP Request

  • Request Format: Includes a start line, headers (key-value pairs), and an optional payload.

  • Start Line: GET / HTTP/1.1 (where:

    • Method: GET (indicates retrieval)

    • Request Target: the endpoint (e.g., /search?q=weather+tomorrow)

    • Protocol: specifies the HTTP version used (e.g., HTTP/1.1).

Request Method Variations

  • GET: For fetching data without any payload.

  • POST: For sending data to the server to create/update a resource.

  • PUT: For creating a resource at a specified URI.

  • PATCH: For making partial updates to a resource.

Request Header Details

  • Host: The server's domain name (important for virtual hosting).

  • User-Agent: Information about the initiating device and browser.

    • Cookie: Any session or state information sent with the request.

  • Example HTTP Request:

    • GET / HTTP/1.1

    • Host: www.google.com

    • Accept: text/html,application/xhtml+xml,...

Server-Side Handling of Requests

  • Request Processing Considerations: Determines the correct response based on the request method and headers:

    • To route requests efficiently:

    • User-Agent specification helps server understand user context.

    • Content-Type: Informs the server about the type of media being sent or accepted.

    • Language: Accept-Language indicates user preference for responses.

HTTP Responses

  • Structure: Similar to requests, responses consist of a start line, headers, and optional payloads.

  • Response Start Line: HTTP/1.1 200 OK (where:

    • HTTP Status Code: Indicates the success or failure of the request, e.g., 200 - success.

    • Categories of status codes:

    • Informational (100-199)

    • Successful (200-299)

    • Redirection (300-399)

    • Client Errors (400-499)

    • Server Errors (500-599)

Important Response Headers

  • Content-Type: Specifies the type of content in the response (e.g., text/html; charset=ISO-8859-1).

  • Set-Cookie: Sets new cookies in the browser based on server logic.

  • Cache-Control: Determines the caching policies applied to the response.

HTTP Response Payloads

  • Payload Structure: Includes HTML content, images, etc., based on the request's acceptance criteria.

    • Example HTML snippet for a browser response:
      html <!doctype html> <html lang="en-GB"> <meta charset="UTF-8"> <title>Google</title>

Frontend vs Backend

  • Frontend: The client-side where HTML, CSS, JS, images, etc., run.

  • Backend: Server-side where files are managed and processed, affecting how the frontend interacts with resources.

    • An example would be how databases are accessed and updated by server scripts responding to HTTP requests.