Why is JS/CSS rejected because of mixed content?

Question

I have an application (static web site) which is served internally in HTTP but the access from the end users' browsers is forced to HTTPS via a load balancer:

+-------------------------+  +----------------------------------+
| browser                 |  |load balancer to which            |
| http://www.example.com  |  |www.example.com is resolved       |
| or                     +---> - listens on 80 and 443          |
| https://www.example.com |  | - rewrites http:// into https:// |
|                         |  |                                  |
+-------------------------+  +---------------+------------------+
                                             |
                             +---------------v-------------+
                             |actual server which listens  |
                             |on someip:80                 |
                             |                             |
                             +-----------------------------+

My web page loads JavaScript scripts and CSS via classical entries such as <script src='/script/hello.js'></script> or <link rel="stylesheet" href="/static/main.min.css">

It happens sometimes that these scripts/CSS are not loaded (the page is rendered without CSS and JS so it is obviously incorrect) the first time (it is OK when pressing F5 to reload the page) and I managed to catch the error in Chrome Dev Tools:

Mixed Content: The page at 'https://www.example.com/status/' was loaded over HTTPS, but requested an insecure script 'http://www.example.com.com/static/jquery.min.js?ticket=ST-1233778-1feFoRbZPxS0ICdkJeR6-cas'. This request has been blocked; the content must be served over HTTPS.

The message is clear: the overall HTTPS page has components which are HTTP only.

My question is: how come they are HTTP and not HTTPS?

• the calls are relative, so whatever the page is should be appended to the relative path
• I suppose that the error comes when someone does the initial call via http:// (otherwise there would be no problems)
• but in that case what happens is that
  • the user types http:// and that query leaves the browser ...
  • ... arrives at the load balancer ...
  • ... which forwards the query as http:// (so the server receives an http call) ...
  • ... the content is delivered back to the load balancer ...
  • which transforms the call to https://

I fail to understand where the mixed content could be generated and why this is only for the first call to the page, fixed by refreshing it via F5.

Answer 1

Make sure the base tag in your page is HTTPS based.

The tag specifies the base URL/target for all relative URLs in a document.