How to fix "Blocked loading mixed active content" for css and js over https

Question

When attempting to view my site over https, I keep getting a "Blocked loading mixed active content" error in my Firefox console. I am getting this error only for my css and js file.

The reason I am so confused is because the reference to the files in the page code itself is https:

<link rel="stylesheet" href="https://www.example.com/style.css">

But in the console, it shows it as http:

Blocked loading mixed active content "http://www.example.com/style.css"[Learn More]

I can do a view source on the page and search for "http://" and there are no results anywhere on the page.

Any ideas?

Answer 1

I think that you can try with relative protocol caller.

<link rel="stylesheet" href="//www.example.com/style.css">
                    ---------^^

if your users visit your web in http, it loads http, and if the user visit under https it loads https.