CORS Auto-Allow Subdomain & Domain Utama: Bebas Error Font dan AJAX

CORS Auto-Allow Engine WDP Link Post secara Auto-Allow Engine* pada WDP Link Post secara otomatis mendeteksi permintaan lintas domain (cross-origin*) yang berasal dari domain kustom dan subdomain terdaftar. Sistem menyuntikkan header HTTP Access-Control-Allow-Origin dan Access-Control-Allow-Credentials yang tepat, sehingga font Elementor, ikon font awesome, file audio, dan permintaan AJAX admin-ajax.php berjalan bebas hambatan tanpa error konsol.

Penyebab Terjadinya Masalah CORS pada Pengaturan Multi-Domain

Cross-Origin Resource Sharing (CORS) adalah mekanisme keamanan yang diterapkan oleh semua peramban web modern untuk membatasi bagaimana sumber daya (seperti file font, skrip JavaScript, atau endpoint API) di satu domain dapat diminta oleh domain lain.

Ketika Anda memetakan domain pengantin (misalnya andy-zhea.com) ke website portal utama Anda (misalnya portal-undangan.com):

1. Dokumen HTML dimuat dari https://andy-zhea.com.
2. Namun file aset statis (seperti icon font Elementor eicons.woff2 atau script WeddingPress) berlokasi di direktori server domain utama https://portal-undangan.com/wp-content/....
3. Peramban mendeteksi perbedaan asal (origin mismatch).
4. Karena server web default tidak mengirimkan izin akses lintas domain, peramban seketika memblokir pengunduhan font dan eksekusi AJAX.

Dampak Ikon Rusak dan Permintaan AJAX Terblokir pada Undangan

Ketika proteksi CORS terpicu tanpa konfigurasi header yang benar:

• Icon Berubah Jadi Kotak Silang / Persegi Kosong: Ikon kalender, jam resepsi, penunjuk lokasi Google Maps, dan tombol putar musik berubah menjadi kotak kosong yang merusak estetika desain mewah undangan pernikahan.
• Konsol Browser Penuh Tulisan Merah: Pesan error berulang: Access to font at 'https://portal-undangan.com/...' from origin 'https://andy-zhea.com' has been blocked by CORS policy.
• Formulir Interaktif Macet: Pengiriman konfirmasi kehadiran atau amplop digital tidak merespons karena preflight request (OPTIONS) ditolak oleh server.

Arsitektur Verifikasi Asal Dinamis (Dynamic Origin Verification)

WDP Link Post menyertakan modul penanganan CORS cerdas yang menyaring setiap request sebelum mencapai peramban.

Tahapan Penanganan CORS Internal

1. Origin Detection Hook:

Pada awal siklus booting (init hook), WDP Link Post memeriksa header HTTP HTTP_ORIGIN.

1. Registry Verification:

Sistem memeriksa apakah origin tersebut cocok dengan salah satu kriteria sah: Merupakan subdomain dari domain di Multi-Base Pool (Tier 2). Merupakan domain kustom yang terdaftar di tabel database (Tier 3).

1. Safe Dynamic Header Injection:

Jika terverifikasi sah, WDP Link Post menyuntikkan header yang mengizinkan origin spesifik tersebut (bukan wildcard * yang berbahaya):

   add_action('init', function() {
       $origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
       if (WDPLP_Security::is_allowed_origin($origin)) {
           header("Access-Control-Allow-Origin: " . esc_url_raw($origin));
           header("Access-Control-Allow-Credentials: true");
           header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
           header("Access-Control-Allow-Headers: Content-Type, X-Requested-With");
       }
   });

1. Preflight OPTIONS Handling:

Jika peramban mengirimkan request uji coba berjenis HTTP OPTIONS, WDP Link Post langsung merespons dengan status HTTP 200 OK agar permintaan utama dapat segera dikirimkan.

Skenario Operasional: Undangan Andy & Zhea

• Domain Klien: https://andy-zhea.com
• Server Aset Utama: https://portal-undangan.com

Saat tamu undangan membuka website:

1. Peramban meminta file font ikon Elementor dari server utama.
2. Mesin CORS WDP Link Post mendeteksi permintaan dari origin https://andy-zhea.com.
3. Header Access-Control-Allow-Origin: https://andy-zhea.com dikirimkan bersama response font.
4. Peramban mengizinkan pembacaan font seketika. Ikon cincin pernikahan, peta lokasi, dan tanda panah navigasi tampil sempurna dan tajam di layar gawai tamu.

Matriks Perbandingan Keamanan CORS

Tips & Praktik Terbaik