Cara Marketer Indonesia Pasang HSTS di Website Bisnis Tanpa Risiko Lockout 2026

TL;DR: HSTS memaksa browser pakai HTTPS, mencegah serangan downgrade. Pasang aman butuh strategi staged rollout: mulai dari max-age=300, naikkan bertahap ke 1 tahun, baru aktifkan preload. Di Next.js, cukup edit next.config.ts di bagian headers() atau tambah di middleware untuk semua route.

Dalam audit klien personal branding selama dua kuartal terakhir, saya menemukan 4 dari 6 website belum pasang HSTS. Sebagian besar pemilik website tidak sadar karena tidak ada error visual. Padahal celah ini cukup serius untuk audience yang sering akses lewat WiFi publik (coworking, kafe, bandara).

Tulisan ini fokus pada satu hal: cara pasang HSTS di website Next.js tanpa risiko mengunci pengguna. Tidak butuh tim DevOps, cukup edit dua file.

Kenapa Banyak Marketer Takut Pasang HSTS

Ketakutan terbesar adalah lockout: pengguna yang sudah menerima header HSTS akan dipaksa pakai HTTPS, bahkan jika sertifikat habis atau ada masalah konfigurasi. Browser akan menolak akses, dan tidak ada cara cepat untuk reset selain menunggu max-age habis di sisi browser pengguna.

Solusinya bukan menghindari HSTS, melainkan rollout bertahap. Praktik standar industri yang direkomendasikan web.dev menyebutkan tiga tahap: 5 menit, 1 minggu, 1 tahun.

Tahap Rollout HSTS yang Aman

Strategi ini memberi waktu untuk deteksi masalah sebelum komitmen jangka panjang.

Implementasi di Next.js

Edit next.config.ts dan tambahkan blok headers():

async headers() {
  return [
    {
      source: '/:path*',
      headers: [
        {
          key: 'Strict-Transport-Security',
          value: 'max-age=300', // Tahap 1
        },
      ],
    },
  ];
}

Naikkan nilai max-age setelah masuk tahap berikutnya. Tambahkan includeSubDomains di tahap 2 jika semua subdomain (api, cdn, admin) sudah pakai HTTPS. Untuk tahap 4, tambahkan ; preload dan submit domain ke hstspreload.org.

Studi Kasus: Atmo LMS

Saat memigrasi Atmo LMS ke domain baru, kami pasang HSTS dengan strategi di atas. Hari pertama max-age=300, kami pantau Sentry dan Cloudflare logs. Tidak ada error. Hari ke-3 naik ke 86400. Minggu ke-2 naik ke 31536000. Bulan ke-2 submit ke preload list. Hasilnya skor Mozilla Observatory naik dari B ke A+, dan tidak ada satu pun pengguna yang lockout.

Pelajaran utama: kombinasikan HSTS dengan monitoring sertifikat. Pakai layanan seperti UptimeRobot atau Better Stack untuk alert jika sertifikat akan habis 14 hari sebelum expired. HSTS tanpa monitoring sertifikat sama dengan menyetir tanpa rem.

Kesalahan yang Sering Terjadi

Pasang max-age=31536000; preload langsung di hari pertama. Jika ada masalah, butuh setahun untuk pengguna bisa diakses lagi tanpa HTTPS. Hindari mode all-in di awal. Kesalahan kedua adalah lupa includeSubDomains lalu menambahkannya belakangan, padahal subdomain belum HTTPS. Akibatnya subdomain seperti blog.domain.com tidak bisa diakses.

Lihat juga panduan migrasi DNS tanpa downtime dan audit keamanan dengan CSP untuk pertahanan berlapis.

Pertanyaan Umum

Apakah HSTS pengaruh ke SEO?

Tidak langsung, tapi HSTS meningkatkan keamanan dan kepercayaan, dua faktor yang berkorelasi dengan Trustworthiness di E-E-A-T. Google mendorong adopsi HTTPS sejak 2014.

Berapa lama efek HSTS terlihat di browser?

Begitu pengguna kunjungi pertama kali, instruksi langsung tersimpan. Tidak ada delay. Reset hanya bisa dengan clear browser data atau tunggu max-age habis.

Bisakah pasang HSTS lewat Cloudflare?

Bisa. Di dashboard Cloudflare, masuk SSL/TLS > Edge Certificates > HTTP Strict Transport Security > Enable. UI Cloudflare juga punya staged rollout otomatis.

Penutup

HSTS bukan optional lagi di 2026. Audience Indonesia makin sering akses di jaringan publik, dan kompetitor sudah menutup celah ini. Mulai dari max-age=300, naikkan bertahap, dan kombinasikan dengan monitoring sertifikat. Ini langkah satu kali yang melindungi pelanggan dan brand kamu untuk jangka panjang.