Score:0

Blocked loading mixed active content

pe flag

I am using react as my font end, and nodejs as backend which is running on localhost:3016 and I used nginx as reverse proxy and load balancer; this my nginx conf file for the site

upstream load_balance{
    #least_conn;
     #ip_hash;
    server  localhost:3016;
    #server localhost:8010;
    #server localhost:8011;
    #server localhost:8012;
    #server localhost:8013;
    #server localhost:8014;
    #server localhost:8015;
    #server localhost:8016;
    #server localhost:8017;
    #server localhost:8018;
}

server {

    # SSL configuration
    #
    # listen 443 ssl default_server;
    # listen [::]:443 ssl default_server;
    #
    # Note: You should disable gzip for SSL traffic.
    # See: https://bugs.debian.org/773332
    #
    # Read up on ssl_ciphers to ensure a secure configuration.
    # See: https://bugs.debian.org/765782
    #
    # Self signed certs generated by the ssl-cert package
    # Don't use them in a production server!
    #
    # include snippets/snakeoil.conf;
    # listen [::]:443 ssl ipv6only=on; # managed by Certbot
        listen 443 ssl; # managed by Certbot
        ssl_certificate /etc/letsencrypt/live/ethiolive.net/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/ethiolive.net/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


    #root /var/www/html;

    # Add index.php to the list if you are using PHP
    #index index.html index.htm index.nginx-debian.html;

    server_name ethiolive.net www.ethiolive.net;
    
    add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
        add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type, Origin,x-auth' always;
        #default_type application/json;
    
    location /api {
        proxy_pass  http://load_balance;
        proxy_http_version  1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host  $host;
        proxy_cache_bypass $http_upgrade;
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        # try_files $uri $uri/ =404;
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            #
            # Custom headers and headers various browsers *should* be OK with but aren't
            #
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            #
            # Tell client that this pre-flight info is valid for 20 days
            #
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
         }
         if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
         }
         if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
         }
    }
        location / {
        root /var/www/html/LiveStream/LiveStream-frontend/users/build;
        index index.html index.htm;
        }
    location /admin {
        root /var/www/html/LiveStream/LiveStream-frontend/admin/build;      index index.html index.htm;
    }
    location /socket/ {
                proxy_pass http://load_balance/socket.io/;
        proxy_redirect          off;

                proxy_http_version      1.1;

                proxy_set_header        Upgrade                 $http_upgrade;
                proxy_set_header        Connection              "upgrade";
                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 /socket.io/{
        
                proxy_pass http://load_balance/socket.io/;
        proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_http_version 1.1;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $host;
               
    }
           ```
I get this error 

2.2664eafa.chunk.js:2 Mixed Content: The page at 'https://www.ethiolive.net/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://192.168.8.101:3016/catagorey/getMainCategorie'. This request has been blocked; the content must be served over HTTPS.``` from chromes console, I think I am missing something on the nginx configuration, thanks

in flag
Configure your nodejs to generate the pages with the correct HTTPS urls.
Score:0
pe flag

I found the solution for the problem, and I believe sharing the solution would be helpful for others, use this 'proxy_set_header Content-Security-Policy upgrade-insecure-requests; below is how I configured

location /api {
                proxy_pass http://load_balance;
                proxy_http_version  1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host  $host;
                proxy_cache_bypass $http_upgrade;
                proxy_set_header   X-Real-IP         $remote_addr;
                proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_read_timeout 3600;
                proxy_headers_hash_max_size 512;
                proxy_headers_hash_bucket_size 128;
                proxy_set_header Content-Security-Policy upgrade-insecure-requests;

hope you find it helpful!

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.