How to solve nginx reverse proxy mixed content(http, https)

Question

New to nginx. Played with it for 2 days and cannot figure out how to solve this:

I have a bunch of VMs running in one box, the box is behind my router obviously, one of the VMs is running nginx(my reverse proxy) and is set as DMZ.

I have got SSL certificate installed on that VM properly, now I want all incoming traffic to be directed according to their path, e.g.:

domain.com/service1->192.168.1.101

domain.com/service2->192.168.1.102

And so on. Idea is to let nginx work as the SSL layer and nginx talks to other VMs via HTTP or whatever protocols unencrypted. Then of course when nginx talks back to the client, the messages shall be encrypted.

I have got that partially working. If I access via HTTP everything is fine except not encrypted, but if I access via HTTPS the web pages are broken and I got this kind of error: Mixed Content: The page at 'https://domain.com/service1' was loaded over HTTPS, but requested an insecure stylesheet 'http://domain.com/service1/blahblah.css'. This request has been blocked; the content must be served over HTTPS.

I also got this kind of warning: The page at 'https://domain.com/service1/' was loaded over HTTPS, but is submitting data to an insecure location at 'http://domain.com/service1/': this content should also be submitted over HTTPS.

Now, for some of the services I can hack the service itself so it can get fixed...but I do not want to do that, because then I have to hack every service which is time consuming and can potentially break something. I want to touch the services as little as possible.

My current configuration works with the hack but does not work without hack. It covers the whole service1:

location /service1/ {
    proxy_pass              http://192.168.1.101/;

    proxy_read_timeout      3500;
    proxy_connect_timeout   3250;

    proxy_set_header        X-Real-IP $remote_addr;
    proxy_set_header        Host $host;
    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header        X-Forwarded-Proto https;

    proxy_set_header        SSL_PROTOCOL $ssl_protocol;
}

I looked around the internet for a general solution but only found one hack that worked for one service. Other nginx examples/howtos did not help much(still getting the errors and warnings).

Many thanks in advance!

Answer 1

You have to go through the sites' code, and replace all occurences of http://domain.com/resource with either /resource or //domain.com/resource.

This ensures that all the dependent web page resources are loaded with the same protocol as the website itself is loaded.

Answer 2

This worked for nginx https proxy >> nginx http serving Django backend

Inside a location directive:

proxy_set_header X-Forwarded-Proto $scheme;

For more details it's worth to read this excellent article: https://www.metaltoad.com/blog/running-drupal-secure-pages-behind-proxy

Answer 3

With nginx, I needed:

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

Answer 4

Adding to this apache.conf file fixed my issue

 <IfModule mod_setenvif.c>
  SetEnvIf X-Forwarded-Proto "^https$" HTTPS
</IfModule>

Answer 5

In settings.php, set

$base_url='';

But bootstrap will show you error on it, so change the below code in /var/www/includes/bootstrap.inc

if (isset($base_url)) { 
//change to 
if (isset($base_url) && $base_url!='') {

Answer 6

I might be late by half a decade, but I faced the issue recently and for me the solution was setting in HTML page:

<base href="/" />