SafeLink dan ShortLink Plus UI v3.2+

SafeLink dan ShortLink digunakan untuk mengelola tautan keluar melalui halaman perantara. Pada situs unduhan, dokumentasi, atau monetisasi, halaman ini dapat menampilkan informasi file, pemberitahuan keamanan, atau countdown sebelum pengguna melanjutkan.

Perbedaan SafeLink dan ShortLink

Struktur URL

Contoh sederhana:

https://example.com/go/?url=ENCODED_TARGET

Jangan menerima target mentah tanpa validasi. Gunakan fungsi sanitasi WordPress.

$target = isset($_GET['url']) ? wp_unslash($_GET['url']) : '';
$target = esc_url_raw($target);

if (!$target) {
    wp_die('Tautan tujuan tidak valid.');
}

Membatasi domain tujuan

Whitelist domain membuat SafeLink lebih aman bila hanya digunakan untuk sumber tertentu.

$allowed_hosts = array('drive.google.com', 'github.com', 'example.com');
$host = wp_parse_url($target, PHP_URL_HOST);

if (!in_array($host, $allowed_hosts, true)) {
    wp_die('Domain tujuan tidak diizinkan.');
}

Countdown sederhana

Countdown bersifat antarmuka, bukan mekanisme keamanan. Validasi tetap harus dilakukan di server.

let seconds = 5;
const label = document.querySelector('[data-countdown]');
const button = document.querySelector('[data-continue]');

const timer = setInterval(() => {
  seconds -= 1;
  label.textContent = seconds;
  if (seconds <= 0) {
    clearInterval(timer);
    button.hidden = false;
  }
}, 1000);

Markup tombol lanjut

<div class="alert info">
  <b>Tunggu sebentar</b>
  Tautan akan tersedia dalam <span data-countdown>5</span> detik.
</div>
<a class="button" data-continue hidden href="URL_TUJUAN">Lanjutkan</a>

Multi-halaman

Untuk alur multi-halaman, simpan status pada token yang ditandatangani atau server-side session. Jangan hanya mengandalkan parameter angka seperti ?step=2 karena pengguna dapat melewati langkah tanpa validasi.

Integrasi dengan Download Box

<div class="dlBox">
  <span class="fT" data-text="zip"></span>
  <div class="fN">
    <span>nama-file.zip</span>
    <span class="fS">2.4 MiB</span>
  </div>
  <a class="button" aria-label="Unduh" href="URL_SAFELINK"><i class="icon dl"></i></a>
</div>

SEO SafeLink

• Jangan mengindeks ribuan URL parameter yang isinya sama.
• Pertimbangkan noindex pada halaman perantara.
• Gunakan canonical yang sesuai.
• Jangan menambahkan SafeLink ke internal navigation utama.

Keamanan

1. Sanitasi URL.
2. Validasi scheme https.
3. Whitelist host bila memungkinkan.
4. Gunakan nonce/token untuk aksi sensitif.
5. Jangan mengeksekusi HTML dari parameter URL.

Membuat token URL

Selain whitelist domain, target dapat dibungkus dalam token yang ditandatangani. Dengan begitu server dapat mendeteksi bila seseorang mengubah target secara manual. Contoh berikut hanya menunjukkan pola sederhana; untuk production gunakan secret yang disimpan aman dan jangan mengeksposnya ke JavaScript.

$payload = base64_encode($target);
$signature = hash_hmac('sha256', $payload, wp_salt('auth'));
$token = rawurlencode($payload . '.' . $signature);

Validasi token

list($payload, $signature) = explode('.', $token, 2);
$expected = hash_hmac('sha256', $payload, wp_salt('auth'));

if (!hash_equals($expected, $signature)) {
    wp_die('Token tidak valid.');
}
$target = base64_decode($payload);

Redirect server-side

Setelah semua verifikasi selesai, gunakan redirect WordPress. Hindari menyusun header Location sendiri bila API WordPress sudah tersedia.

wp_safe_redirect($target, 302);
exit;

wp_safe_redirect() memiliki pembatasan host. Bila Anda memang mengizinkan domain eksternal, daftar host tersebut melalui filter yang tepat atau gunakan arsitektur redirect yang tervalidasi secara eksplisit.

Cache halaman SafeLink

Halaman yang berisi token unik sebaiknya tidak dicache sebagai halaman publik generik. CDN yang salah konfigurasi dapat menyajikan target milik pengguna A kepada pengguna B. Gunakan cache bypass pada path SafeLink bila token berada di query string atau cookie.

Analytics

Catat event secukupnya: halaman dibuka, tombol lanjut tersedia, dan redirect dilakukan. Jangan mengirim URL sensitif ke analytics bila target mengandung token pribadi.

Aksesibilitas countdown

Countdown harus tetap dapat dipahami pembaca screen reader. Jangan mengandalkan perubahan warna saja. Anda dapat memakai aria-live="polite" untuk status.

<p aria-live="polite">
  Tautan tersedia dalam <span data-countdown>5</span> detik.
</p>

Rate limiting

Generator shortlink publik dapat disalahgunakan bot. Batasi pembuatan token per IP/user, gunakan nonce untuk form, dan jangan izinkan pengguna menyimpan arbitrary HTML.

Halaman SafeLink yang baik

• Judul menjelaskan bahwa ini halaman perantara.
• Target atau domain tujuan dapat dikenali.
• Countdown singkat.
• Tombol lanjut jelas.
• Tidak ada tombol palsu yang menyerupai download.
• Ada opsi kembali bila pengguna berubah pikiran.

Troubleshooting