16 Oct 2021

CSS Mix Content Blocked – NGINX Reverse Proxy

Saya biasa menggunakan NGINX reverse proxy untuk melakukan SSL Termination. Sehingga server aplikasi di belakangnya cukup lah dengan protokol HTTP. Ini sangat memudahkan saya dalam mengelola sertifikat ssl, karena saya tidak perlu melakukan instalasi SSL di setiap server yang membutuhkan SSL yang valid.

Tapi, dengan skema reverse proxy ini saya terkadang terjadi beberapa problem, seperti CSS saat di akses dari browser tidak terload seperti gambar di bawah ini :

Solusi sederhana yang saya dapat lakukan adalah menambahkan berikut :

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

pada file konfigurasi virtural host nginxnya, dengan contoh sebagai berikut

 

server
{
listen 80;
server_name testing.hanangpriambodo.com;
index index.php index.html index.htm default.php default.htm default.html;
root /www/wwwroot/testing;

add_header Strict-Transport-Security "max-age=31536000";
add_header 'Content-Security-Policy' 'upgrade-insecure-requests';

error_page 497 https://$host$request_uri;
location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
{
return 404;
}

# Directory verification related settings for one-click application for SSL certificate
location ~ \.well-known{
allow all;
}

location /
{
proxy_pass http://123.123.123.123/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_read_timeout 900;
}
}

Sekian tutorial kali ini semoga bermanfaat,

Terima Kasih

 

— H P —

Leave a Reply