Frontend Fundamentals

Frontend Fundamentals 3: Understanding Web Security

In today’s online world, security is essential to protect your data and privacy. This post breaks down key web security concepts, including HTTPS, CORS, and common web attacks — and explains how websites defend against them.

What is HTTPS?

HTTPS is simply HTTP over an encrypted connection, which means data sent between your browser and a website is secure and private.

  • Why HTTPS matters:
    It protects sensitive info like passwords and credit card numbers from hackers who might try to intercept your data.
  • How HTTPS works:
    It uses encryption protocols called TLS (Transport Layer Security) — and its predecessor SSL — to create a secure connection.

HTTPS, TLS, and SSL: What’s the Difference?

TermWhat It IsWhy It Matters
HTTPSSecure version of HTTP used in browsersShows a secure padlock in your browser; encrypts all HTTP data
TLSProtocol providing encryption and data integrityPowers HTTPS, ensures communication can’t be read or tampered with
SSLOlder version of TLS, now outdatedTerm “SSL certificates” is still used, but TLS replaced SSL

How TLS Establishes a Secure Connection

  • The client and server do a quick “handshake” using public-key cryptography to agree on encryption keys.
  • After this handshake, all data sent is encrypted — protecting your info from eavesdropping or alteration.

Cross-Origin Resource Sharing (CORS): Why It’s Needed

  • The problem: Web pages can make requests to other domains, which can be risky if malicious sites exploit this to steal data or perform actions without your consent.
  • The browser’s defense: The Same-Origin Policy blocks such cross-domain requests by default.
  • How CORS helps: Servers specify who is allowed to access their resources by sending special HTTP headers (like Access-Control-Allow-Origin). This controls which sites can share resources safely.

Common Web Attacks and How They’re Prevented

Clickjacking

  • What it is: Trick users into clicking something they didn’t intend by overlaying invisible elements.
  • Defense: Websites use the X-Frame-Options header to control whether their pages can be embedded in iframes.

Cross-Site Scripting (XSS)

  • What it is: Attackers inject malicious scripts into webpages viewed by others, stealing data or hijacking sessions.
  • Types:
    • Stored XSS: Script saved on server and runs when a page is loaded.
    • Reflected XSS: Script reflected in a server response, often via a crafted URL.
  • Prevention:
    • Validate and sanitize all user inputs.
    • Encode output properly.
    • Perform regular security audits and use automated tools.

Web security is complex but essential. HTTPS and TLS encrypt your communication, CORS controls safe sharing between domains, and headers like X-Frame-Options and input validation help prevent attacks like clickjacking and XSS. Understanding these basics helps both developers and users stay safer online.

Leave a Reply

Your email address will not be published. Required fields are marked *