Jurnal: Membenahi kendala mixed-content pada Nginx Reverse-Proxy

Sekedar dokumentasi dari permasalahan yang pernah saya jumpai. Terkadang dari sisi aplikasi tidak siap untuk dipublikasi secara HTTPS karena di dalam source code-nya masih ter-hardcoded beberapa resource eksternal menggunakan protokol HTTP.

Hal ini membuat kebanyakan web browser mengeluh dan enggan untuk memuat resource yang dipanggil dari protokol HTTP tadi.

Maka solusinya ada 2:

1. Edit source code-nya, ganti semua kode yang memanggil resource dari HTTP menjadi HTTPS.
2. Dari sisi Reverse-Proxy, tinggal tambahkan header berikut:

1

add_header 'Content-Security-Policy' 'upgrade-insecure-requests';

Kali ini saya akan membahas solusi untuk Reverse-Proxy Nginx

Contoh konfigurasi server block dan penempatan header :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

server {
    listen 443 ssl http2;
    server_name namawebsite.tld;

    root /var/www/public_html;
    ... konfigurasi ssl ...

    add_header 'Content-Security-Policy' 'upgrade-insecure-requests';  <-- Taruh disini, di dalam server block dan diluar block location

    location / {
        ... konfigurasi ...
    }
}

Semoga bermanfaat, insyaAllah.