Fading Coder

One Final Commit for the Last Sprint

Home > Tools > Content

Essential Computer Networking Concepts for Frontend Developers

Tools 1

TCP/IP Five-Layer Model

  • Physical layer, Data link layer, Network layer, Transport layer, Application layer

Application Layer Protocols: TCP vs UDP

TCP-based Protocols:

  • File Trnasfer Protocol (FTP): Port 21
  • Telnet: Port 23
  • Simple Mail Transfer Protocol (SMTP): Port 25
  • Post Office Protocol 3 (POP3): Port 110
  • Hypertext Transfer Protocol (HTTP/HTTPS)

UDP-based Protocols:

  • Trivial File Transfer Protocol (TFTP): Port 69
  • Simple Network Management Protocol (SNMP): Port 161
  • Bootstrap Protocol (BOOTP)
  • Dynamic Host Configuration Protocol (DHCP)
  • Routing Information Protocol (RIP)
  • Internet Group Management Protocol (IGMP)

Protocol Differences:

  • TCP provides connection-oriented, reliible byte streams
  • UDP offers connectionless, best-effort datagram delivery
  • TCP has larger headers (20 bytes) vs UDP (8 bytes)

HTTP vs HTTPS

Key Differences:

  • HTTP transmits plaintext; HTTPS encrypts with SSL/TLS
  • HTTPS uses port 443 vs HTTP's port 80
  • Requires CA certificate

HTTPS Encryption Process:

  1. Client initiates SSL connection
  2. Server sends certificate with public key
  3. Security level negotiation
  4. Session key creation and encryption
  5. Server decrypts with private key
  6. Encrypted communication begins

HTTP/1.1 vs HTTP/2

HTTP/2 Improvements:

  • Header compression
  • Multiplexing
  • Binary framing
  • Server push

TCP Connection Management

  • Three-way handshake for connection establishment
  • Four-way termination for connection closure

WebSocket Protocol

  • Full-duplex communication over single TCP connection
  • Eliminates need for polling
  • More efficient than traditional HTTP requests

Browser Security Policies

Same-Origin Policy Restrictions:

  • Prevents cross-domain access to cookies/storage
  • Blocks cross-domain DOM manipulation
  • Restricts cross-domain AJAX requests

Web Storage Options

Comparison:

  • Cookies: 4KB limit, sent with requests
  • localStorage: Persistent, ~5MB
  • sessionStorage: Tab-specific, ~5MB

Web Security Threats

XSS Protection:

  • Set HttpOnly flag on cookies
  • Input sanitization

CSRF Mitigation:

  • Verify Referer headers
  • Implement anti-CSRF tokens

HTTP Methods

  • GET: Retrieve resource
  • POST: Submit data
  • PUT: Replace resource
  • DELETE: Remove resource
  • HEAD: Get headers only
  • OPTIONS: List supported methods

URL Processing Flow

  1. DNS resolution
  2. TCP connection
  3. HTTP request
  4. Server processing
  5. Response rendering
  6. Connection termination

DNS Resolution Process

  1. Local DNS query
  2. Root server referral
  3. TLD server query
  4. Authoritative server resposne
  5. Caching and return

Cookie Management

  • Domain/path restrictions apply
  • Server-side vs client-side setting differences
  • HttpOnly flag prevents client access

AJAX Credential Handling

Fetch API:

fetch(url, {
  credentials: 'include'
})

Axios:

axios.get(url, { withCredentials: true })

jQuery:

$.ajax({
  url: endpoint,
  xhrFields: { withCredentials: true }
})

Related Articles

Efficient Usage of HTTP Client in IntelliJ IDEA

IntelliJ IDEA incorporates a versatile HTTP client tool, enabling developres to interact with RESTful services and APIs effectively with in the editor. This functionality streamlines workflows, replac...

Installing CocoaPods on macOS Catalina (10.15) Using a User-Managed Ruby

System Ruby on macOS 10.15 frequently fails to build native gems required by CocoaPods (for example, ffi), leading to errors like: ERROR: Failed to build gem native extension checking for ffi.h... no...

Resolve PhpStorm "Interpreter is not specified or invalid" on WAMP (Windows)

Symptom PhpStorm displays: "Interpreter is not specified or invalid. Press ‘Fix’ to edit your project configuration." This occurs when the IDE cannot locate a valid PHP CLI executable or when the debu...

Leave a Comment

Anonymous

◎Feel free to join the discussion and share your thoughts.