What is the difference between HTTP and HTTPS?

// HTTP - unprotected transmission
http://example.com/login // ❌ Data visible to everyone
 
// HTTPS - encrypted transmission
https://example.com/login // ✅ Data protected

// Data transmitted as plain text
POST /login HTTP/1.1
Host: example.com
Content-Type: application/json
 
{
  "username": "admin",
  "password": "123456" // ❌ Visible to everyone
}

// Data encrypted with SSL/TLS
POST /login HTTP/1.1
Host: example.com
Content-Type: application/json
 
// Encrypted data: 4f8b2c1a9e3d... ✅

// HTTP uses port 80
const httpUrl = 'http://example.com:80/api'; // Default
 
// HTTPS uses port 443
const httpsUrl = 'https://example.com:443/api'; // Default

// HTTP - no certificate
// Direct connection to server
 
// HTTPS - with SSL/TLS certificate
// Server authenticity verification
// Encrypted channel establishment

// 1. DNS query
// 2. TCP connection
// 3. HTTP request
// 4. HTTP response

// 1. DNS query
// 2. TCP connection
// 3. TLS handshake (additional)
// 4. HTTP request (encrypted)
// 5. HTTP response (encrypted)

// HTTPS allows secure headers
app.use((req, res, next) => {
  if (req.secure) {
    res.setHeader('Strict-Transport-Security', 'max-age=31536000');
    res.setHeader('X-Content-Type-Options', 'nosniff');
  }
  next();
});

// Fewer steps to establish connection
// No encryption overhead
// But outdated and insecure

// HTTP/2 works only with HTTPS
// Header compression
// Request multiplexing
// Server Push

// HTTP sites
// ⚠️ "Not Secure" in address bar
// Security warnings
 
// HTTPS sites
// 🔒 Green lock
// "Connection is secure"

// Many APIs work only with HTTPS
navigator.geolocation.getCurrentPosition(); // HTTPS only
navigator.serviceWorker.register('/sw.js'); // HTTPS only
navigator.mediaDevices.getUserMedia(); // HTTPS only
 
// Mixed Content is blocked
// HTTPS page + HTTP resources = ❌

// HTTP cookies
document.cookie = "session=abc123"; // ❌ Insecure
 
// HTTPS cookies
document.cookie = "session=abc123; Secure; SameSite=Strict"; // ✅

// Express.js redirect
app.use((req, res, next) => {
  if (!req.secure && process.env.NODE_ENV === 'production') {
    return res.redirect(301, `https://${req.headers.host}${req.url}`);
  }
  next();
});

# HTTP to HTTPS redirect
server {
    listen 80;
    server_name example.com;
    return 301 https://$server_name$request_uri;
}
 
server {
    listen 443 ssl;
    server_name example.com;
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
}

// HTTP for local development
http://localhost:3000 // ✅ Convenient for development
 
// HTTPS for production
https://mysite.com // ✅ Required for production

// Detect current protocol
const isSecure = window.location.protocol === 'https:';
const protocol = window.location.protocol; // 'http:' or 'https:'
 
// Force HTTPS redirect
if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
  location.replace('https:' + window.location.href.substring(window.location.protocol.length));
}

// Google considers HTTPS as ranking factor
// HTTPS sites get search advantage
// HTTP sites may be downranked

// Mixed content on HTTPS site
<script src="http://cdn.com/script.js"></script>

// Protocol-relative URLs
<script src="//cdn.com/script.js"></script>
// Or explicit HTTPS
<script src="https://cdn.com/script.js"></script>