SSL not working on nginx 443 configuration

Question

I am setting up the nginx for a website. i want to set only for some sublinks to ssl link user login, sign up .i create a lets encrypt ssl and the certificate is working fine. i checked on ssl shopper. I want to configure the ssl only for store not for all the site.so i redirect the store from 80 to 443 and only the store want to work ssl. but after i configure on nginx some buttons (javascriptvoid) not working. its says mixed content , so when i check on view source its shows the url of the buttons are still http in store page.(it should be https) .

i check with everything, i reconfigure nginx, check the tomcat side, all are oky.i dont knwo what is the issue.

my nginx configuration is here for you

(The(/sub) sub location is the one which i want to work https)

NGINX configuration

upstream backend_front {
    ip_hash;

    server tomcat_serverip:8080;

}

server {
    listen       80;
    server_name  www.domianname.com;

    charset utf-8;

   access_log  /var/log/nginx/80access.log main;

     location / {
    proxy_pass   http://backend_front;

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


    location /sub/ {

        if ($http_x_forwarded_proto != 'https') {
            return       301 https://$server_name$request_uri;
        }

       proxy_pass   http://backend_front;

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

    }

}

server {
    listen       443 ssl;
    server_name  www.domainname.my;

    ssl on;
    ssl_certificate         /etc/letsencrypt/live/fullch.pem;
    ssl_certificate_key     /etc/letsencrypt/live/privkey.pem;

    ssl_session_cache shared:SSL:20m;
    ssl_session_timeout 15m;

    ssl_prefer_server_ciphers       on;
    ssl_protocols                   TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers                     ECDH+AESGCM:DH+AESGCM:ECDH+AES256:DH+AES256:ECDH+AES128:DH+AES:ECDH+3DES:DH+3DES:RSA+AESGCM:RSA+AES:RSA+3DES:!aNULL:!MD5:!DSS;


    charset utf-8;
    access_log  /var/log/nginx/443access.log main;

    add_header Strict-Transport-Security "max-age=31536000";


        root /data/resources/;

location /sub/ {

       proxy_pass   http://backend_front;

        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 X-Forwarded-Proto $scheme;


    }

    location / {
        proxy_pass   http://backend_front;

        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 X-Forwarded-Proto $scheme;
}


  # for static files caching 
    location ~ .*\.(html|jsp)?$ {
        proxy_pass http://backend_front;

        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 X-Forwarded-Proto $scheme;
    }

    location ~ .*\.(gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ {
        root /data/resources/;
        expires 20m;
    }    # for static files caching -- end 

    location ~ /favicon\.ico {
        root html;
    }

    location ~ /\. {
        deny all;
    }
}

The view source result for the buttons

<a href="javascript:void(0)" url="http://www.example.com/store/account.htm" onclick="tiaozhuan(this)" style="padding:0px">Manage Account</a>
<a href="javascript:void(0)" url="http://www.example.com/store/order.htm" onclick="tiaozhuan(this)" style="padding:0px">My Orders</a>

When I click on the button this error message showing on google chrome element console (but for http its working fine.)

jquery-1.8.3.min.js:2 Mixed Content: The page at 'https://www.example.com/store/account.htm' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.example.com/isLogin.htm'. This request has been blocked; the content must be served over HTTPS.
send    @   jquery-1.8.3.min.js:2
ajax    @   jquery-1.8.3.min.js:2
tiaozhuan   @   account.htm:155
onclick @   account.htm:77

please help me guys on this.i am stuck on thi for last 1 week to fix this.i am not a programmer i am a sys admin. and new for nginx.please help on this.

Answer 1

"Mixed content" usually refers to a page which, when loaded, then makes secondary requests under both HTTP and HTTPS (eg, images, css, javascript).

When you use make a request under HTTPS, all subsequent requests must also be HTTPS. You need to convert the URL of the buttons to be "https://"

Answer 2

At last we find out the issue and resolved the issue after 3 weeks. the issue is beacuse of the proxy ip.We use nginx server for redirection and for proxy. so we need to add aditional enty in server.xml in tomcat about the nginx server ip .here is the entry.

<Valve className="org.apache.catalina.valves.RemoteIpValve" internalProxies="111\.111\.111\.111" remoteIpHeader="X-Forwarded-For" protocolHeader="X-Forwarded-Proto" protocolHeaderHttpsValue="https" httpsServerPort="443" />

so the Internal proxy is the Nginx IP.