Question

HTTPS not working for webpath links. ERROR mixed contents Nginx

I am setting up the nginx for our office eCommerce website.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.

Show comments

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in Q&A, subscribe to topics of interest, and get courses and tools that will help you grow as a developer and scale your project or business.

@fatha1

When it comes to SSL, files served over http and https are treated individually. Even though they do appear to come from the same domain, they are treated as two different resources, which is why you’re seeing the mixed content warning.

Anything served over SSL (images, CSS, JS, etc) needs to be secured by SSL otherwise you’ll see that warning pop up. Ideally, I’d recommend serving everything over SSL to simplify configuration.