Step-by-Step Guide
6 steps

How to Implement HTTPS Correctly

HTTPS encrypts data between the browser and your server, preventing eavesdropping and tampering. Most hosting platforms provide automatic HTTPS, but there are additional steps to ensure it is configured correctly for maximum security.

Scan Your App Now

Find security issues automatically before attackers do.

Follow These Steps

1

Enable HTTPS on your hosting platform

Most modern platforms provide automatic HTTPS. Verify it is enabled.

Code Example
# Platforms with automatic HTTPS:
# Vercel: Automatic for all deployments
# Netlify: Automatic with Let's Encrypt
# Railway: Automatic for public services
# Render: Automatic for all services
# Replit: Automatic for deployments

# For custom servers, use Let's Encrypt:
# sudo certbot --nginx -d yourdomain.com
2

Redirect HTTP to HTTPS

Ensure all HTTP requests are redirected to HTTPS.

Code Example
// Express.js
app.use((req, res, next) => {
  if (req.headers['x-forwarded-proto'] !== 'https') {
    return res.redirect(301, `https://${req.headers.host}${req.url}`)
  }
  next()
})

// Most hosting platforms handle this automatically
3

Add HSTS header

HSTS tells browsers to always use HTTPS for your domain.

Code Example
// Strict-Transport-Security
Strict-Transport-Security: max-age=63072000; includeSubDomains; preload

// In next.config.js
{ key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' }

Start with a short max-age (86400 = 1 day) to test, then increase to 63072000 (2 years) once confirmed working.

4

Fix mixed content

Ensure all resources are loaded over HTTPS.

Code Example
// Add upgrade-insecure-requests as safety net
Content-Security-Policy: upgrade-insecure-requests

// Fix hardcoded HTTP URLs
// BAD: <img src="http://example.com/image.jpg">
// GOOD: <img src="https://example.com/image.jpg">
5

Submit to HSTS preload list

Get your domain added to browser HSTS preload lists for maximum protection.

Code Example
// Requirements for HSTS preload:
// 1. Valid HTTPS certificate
// 2. Redirect HTTP to HTTPS
// 3. HSTS header with max-age >= 31536000
// 4. includeSubDomains directive
// 5. preload directive

// Submit at: https://hstspreload.org/

HSTS preload is permanent. Only submit after you are certain your domain will always use HTTPS.

6

Verify HTTPS configuration

Test your TLS configuration for security issues.

Code Example
# Test TLS configuration
curl -I https://yourdomain.com

# Run a VAS scan to check for HTTPS issues
# Also test with SSL Labs: ssllabs.com/ssltest

What You'll Achieve

Your site uses HTTPS with automatic certificate renewal, HTTP-to-HTTPS redirects, HSTS header with preload, and no mixed content. Transport security is fully configured.

Common Mistakes to Avoid

Mistake

Setting HSTS preload without testing

Fix

HSTS preload is very difficult to undo. Start with a short max-age, test thoroughly, then increase and add preload.

Mistake

Not checking for mixed content after enabling HTTPS

Fix

Mixed content (HTTP resources on HTTPS pages) compromises security. Use upgrade-insecure-requests CSP and fix all hardcoded HTTP URLs.

Frequently Asked Questions

Do I need to buy an SSL certificate?

No. Let's Encrypt provides free certificates. Most hosting platforms (Vercel, Netlify, Railway) provide automatic free HTTPS with no configuration needed.

Is HTTPS enough to secure my site?

HTTPS secures data in transit but does not protect against application-level vulnerabilities like XSS, SQL injection, or broken authentication. You need both transport security and application security.

Related Guides

Fix Mixed Content WarningsAdd Security Headers in Next.jsSecurity Audit ChecklistAdd CSP Header

Ready to Secure Your App?

VAS automatically scans your deployed app for the security issues covered in this guide. Get actionable results in minutes.

Start Security Scan