fatha1
By:
fatha1

HTTPS not working for webpath links. ERROR mixed contents Nginx

July 7, 2017 102 views
Nginx Apache CentOS

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.

1 comment
  • Hi @fatha1
    I'm just wondering why you don't want to serve the entire site via https ? Having the entire site https will make everything easier, faster and better search engine ranking.
    Also, the ecommerce site in TomCat probably has a configuration to define if it's hosted on http or https. Which ecommerce system is it?

1 Answer

@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.

Have another answer? Share your knowledge.