05 Ws Vs Wss

title: "WebSocket Security: ws:// vs wss://" description: "Compare unencrypted WebSocket (ws://) with secure WebSocket (wss://) for production deployment. Learn TLS certificate requirements, mixed content policies, self-signed certs, and performance trade-offs." weight: 5 date: 2026-06-28 lastmod: 2026-06-28 tags: [api-development, websocket] }

WebSocket supports two URI schemes: ws:// for unencrypted connections and wss:// for TLS-encrypted connections. Secure WebSocket (wss) encrypts all traffic using TLS, preventing eavesdropping and tampering.

What You'll Learn

• ws:// vs wss:// protocol differences
• TLS certificate requirements
• Mixed content policy implications
• Self-signed certificates for development
• Performance impact of encryption

Why It Matters

Modern browsers block ws:// connections from HTTPS pages due to mixed content policies. All production WebSocket deployments must use wss://. Even internal services benefit from encryption.

Real-World Use

Slack uses wss:// for all WebSocket connections. Discord requires wss:// for their voice and chat gateways. Financial trading APIs require wss for security compliance.

flowchart LR
    subgraph ws [ws:// - Unencrypted]
        Client1[Client] -->|Plaintext frames| Server1[Server]
        Evil[Attacker] -.->|Interception| Client1
        Evil -.->|Tampering| Server1
    end
    subgraph wss [wss:// - Encrypted]
        Client2[Client] -->|TLS Encrypted| Server2[Server]
        Client2 --> TLS[TLS Handshake + Certificate]
    end

Teacher Mindset

Use wss:// everywhere. The performance cost of TLS is negligible on modern hardware. The security benefit is essential. For development, use self-signed certificates or tools like mkcert.

Code Examples

// Example 1: Browser enforces mixed content policy
// This will fail if the page is served over HTTPS
const ws = new WebSocket('ws://api.example.com/chat');

// This works from HTTPS pages
const wss = new WebSocket('wss://api.example.com/chat');

// Error handling for connection failures
wss.onerror = (err) => {
  if (wss.url.startsWith('ws://') && location.protocol === 'https:') {
    console.error('Mixed content blocked. Use wss://');
  }
};

// Example 2: Secure WebSocket server with TLS
const https = require('https');
const fs = require('fs');
const WebSocket = require('ws');

const server = https.createServer({
  cert: fs.readFileSync('/etc/letsencrypt/live/example.com/fullchain.pem'),
  key: fs.readFileSync('/etc/letsencrypt/live/example.com/privkey.pem')
});

const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  ws.send('Welcome to secure WebSocket!');
});

server.listen(443);

# Example 3: Testing wss with self-signed certs
# Generate self-signed certificate for development
openssl req -x509 -newkey rsa:2048 -keyout key.pem \
  -out cert.pem -days 365 -nodes \
  -subj "/CN=localhost"

# Test with wscat
wscat -c wss://localhost:443 --ca cert.pem

Common Mistakes

• Using ws:// in production where traffic passes through untrusted networks
• Forgetting that browsers block ws:// from HTTPS pages
• Using self-signed certificates in production
• Not configuring TLS termination at the load balancer correctly
• Assuming WebSocket connections have the same origin policy as HTTP

Practice

1. Create a self-signed certificate for localhost.
2. Start a wss:// WebSocket server using the certificate.
3. Connect from a browser page served over HTTPS.
4. Test connection from an HTTPS page using ws:// and observe the error.
5. Challenge: Set up wss:// with a Let's Encrypt certificate on a real domain.

FAQ

Mini Project

Convert your WebSocket server to use wss:// with a self-signed certificate. Create an HTTPS webpage that connects to the wss server. Verify that ws:// connections are blocked from the HTTPS page.

What's Next

Next, you will learn about WebSocket integration with Node.js using the ws library and Socket.IO.