title: How to deal with mixed content in a website which should be secured as https?
body: <p>I am building a website on server A (with domain name registered), used for people to create and run their "apps".<br>
  These "apps" are actually docker containers running on server B, in the container, there lives a small web app which can be accessed directly like:</p>
  
  <pre><code>http://IP_ADDR_OF_SERVER_B:PORT
  </code></pre>
  
  <p>The PORT is a random big number one which maps to the docker container.
  Now I can make SSL certificate working on server A, so that it works fine by accessing:</p>
  
  <pre><code>https://DOMAIN_NAME_OF_SERVER_A
  </code></pre>
  
  <p>The problem is, I enclosed the "apps" in iframe by accessing "http" like above, therefore my browser(Chrome) refuse to open it and report error as:</p>
  
  <p><code>
  Mixed Content: The page at 'https://DOMAIN_NAME_OF_SERVER_A/xxx' was loaded over HTTPS, but requested an insecure resource 'http://IP_ADDR_OF_SERVER_B:PORT/xxx'. This request has been blocked; the content must be served over HTTPS.
  </code></p>
  
  <p>So, how should I deal with such issue?<br>
  I am a full stack green hand, I'd appreciate a lot if you can share some knowledge on how to build a healthy https website while solving such problem in a proper way.</p>
  
  <hr>
  
  <h2>Supplementary explanation</h2>
  
  <p>Ok I think I just threw out the outline of the question, here goes more details.</p>
  
  <p>I see it is intact and straight forward to make the iframe requests to be served with https, then it won't confuse me anymore.  </p>
  
  <p>However the trouble is, since all the "apps" are dynamically created/removed, it seems I'll need to prepare many certificates for each one of them.  </p>
  
  <p>Will self signed certificate work without being blocked or complained by the browser? Or do I have a way to serve all the "apps" with one SSL certificate?</p>
  
  <hr>
  
  <h2>Software environment</h2>
  
  <p><strong>Server A</strong>: Running node.js website listening to port 5000 and served with Nginx proxy_pass.</p>
  
  <pre><code>server {
      listen 80;
      server_name DOMAIN_NAME_OF_SERVER_A;
  
      location / {
          proxy_set_header   X-Real-IP $remote_addr;
          proxy_set_header   Host      $http_host;
          proxy_pass     http://127.0.0.1:5000;
      }
  }
  server {
      listen 443;
      server_name DOMAIN_NAME_OF_SERVER_A;
  
      ssl on;
      ssl_certificate /etc/nginx/ssl/DOMAIN_NAME_OF_SERVER_A.cer;
      ssl_certificate_key /etc/nginx/ssl/DOMAIN_NAME_OF_SERVER_A.key;
      ssl_session_timeout 5m;
      location / {
          proxy_set_header   X-Real-IP $remote_addr;
          proxy_set_header   Host      $http_host;
          proxy_pass     http://127.0.0.1:5000;
      }
  }
  </code></pre>
  
  <p><strong>Server B</strong>: Running node.js apps listening to different random big port numbers such as 50055, assigned dynamically when "apps" are created. (In fact these apps are running in docker containers while I think it doesn't matter) Can run Nginx if needed.  </p>
  
  <p><strong>Server A</strong> and <strong>Server B</strong> talk with each other in public traffic.</p>
  
  <hr>
  
  <h2>Solution</h2>
  
  <p>Just as all the answers, especially the one from @eawenden, I need a reverse proxy to achieve my goal.  </p>
  
  <p>In addition, I did a few more things:<br>
  1. Assign a domain name to <strong>Server B</strong> for using a letsencrypt cert.<br>
  2. Proxy predefined url to specific port.  </p>
  
  <p>Therefore I setup a reverse proxy server using nginx on <strong>Server B</strong>, proxy all the requests like:</p>
  
  <pre><code>https://DOMAIN_NAME_OF_SERVER_B/PORT/xxx
  </code></pre>
  
  <p>to</p>
  
  <pre><code>https://127.0.0.1:PORT/xxx
  </code></pre>
  
  <p>Ps: nginx reverse proxy config on <strong>Server B</strong></p>
  
  <pre><code>server {
      listen 443;
      server_name DOMAIN_NAME_OF_SERVER_B;
  
      ssl on;
      ssl_certificate     /etc/nginx/ssl/DOMAIN_NAME_OF_SERVER_B.cer;
      ssl_certificate_key /etc/nginx/ssl/DOMAIN_NAME_OF_SERVER_B.key;
      ssl_session_timeout 5m;
  
      rewrite_log off;
      error_log   /var/log/nginx/rewrite.error.log info;
  
      location ~ ^/(?&lt;port&gt;\d+)/ {
          rewrite ^/\d+?(/.*) $1 break;
          proxy_pass http://127.0.0.1:$port;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
          proxy_read_timeout 86400;
      }
  }
  </code></pre>
  
  <p>Thus everything seems to be working as expected!<br>
  Thanks again to all the answerers.</p>