Mengatasi Resource yang Diblokir oleh CORS Policy di Browser pada Server Nginx

Thursday, September 13, 2018

Mengatasi Resource yang Diblokir oleh CORS Policy di Browser pada Server Nginx - Jadi tadi saya mencoba untuk memindahkan file statis di wp-content situs news.linuxsec.org ke subdomain static.linuxsec.org. Ternyata beberapa resource diblokir salahsatunya font karena tidak adanya konfigurasi Access-Control-Allow-Origin di Nginx nya.
Oke kira-kira seperti ini screenshot nya:
Alhasil, tampilan di web juga ancur.

Masalahnya karena di static.linuxsec.org tidak ada parameter yang menunjukkan bahwa resource disana boleh diakses dari news.linuxsec.org. Hasilnya browser memblokir resource tersebut.

Cara mengatasinya sangat mudah. Pertama, kita pastikan dulu apakah resource yang dimaksud sudah dikenali oleh Nginx. bisa di cek di mime.types. Dalam kasus saya yang diblokir adalah file font berekstensi .woff.
cat /etc/nginx/mime.types | grep .woff
Contoh output:
    application/font-woff            woff;
    application/font-woff2           woff2;
Jika belum ada silahkan ditambahkan sendiri. Oke sekarang kita edit serverblock nya.
nano /etc/nginx/sites-enabled/static.linuxsec.org.conf
Lalu tambahkan kode berikut
location ~* \.(eot|otf|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin https://news.linuxsec.org;
}
Di block server. Access-Control-Allow-Origin sebenarnya bisa diisi dengan "*" yang berarti semua situs boleh mengakses resource di situs tersebut. Tapi dari segi keamanan tentu hal ini tidak dianjurkan. 

Oke sekarang restart Nginx. Lalu untuk memverifikasi bisa gunakan curl apakah Access-Control-Allow-Origin sudah ada di header.

Cek lagi di browser

Oke mungkin sekian tutorial kali ini semoga bermanfaat.

Artikel Terkait Nginx ,Security

No comments:

Post a Comment