Why does my browser say my SSL page is only "partially secure"?

If your SSL Web page includes non-secure images, CSS files or JavaScript — that is, if you use links beginning with http:// instead of https:// — some browsers will show a warning message.

Each Web browser handles this situation differently. Some browsers may ask if you want to display the nonsecure items, for example. Others may tell you that that the page is only “partially secure”. In many cases, the “padlock icon” in the browser may not fully activate.

To prevent this from happening, simply make sure that none of the included URLs begin with http://, such as src="http://. You can replace such URLs with src="https://, or use URLs that don’t include any hostname.

An example

Imagine your page is at this address:

https://www.example.com/

... and that page’s HTML source code includes both a CSS file and an image file that look like this:

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

<img src="http://www.example.com/image.jpeg">

This won’t work properly, because the visitor’s Web browser will load the HTML part of the page using SSL, but will load the CSS and image files without using SSL. That’s what “partially insecure” or “partially secure” means.

To fix this, you can remove the hostname from the URLs. That way, the visitor’s browser will automatically use SSL to load the included items when the enclosing page is loaded as SSL:

<link rel="stylesheet" href="/style.css">

<img src="/image.jpeg">

Or, in a pinch, you can force the URLs to always be loaded as SSL, although this will slow down your site for visitors who don”t load the enclosing page as SSL:

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

<img src="https://www.example.com/image.jpeg">

I'm not using non-secure URLs. Why do I still see the warning message?

Another potential cause of “partially secure” pages is the base href HTML tag. If your SSL Web page uses “base href”, make sure the URL begins with https://, not http://.

More generally, if you examine the “source code” of a page that has this problem, it should not include src="http:// at all, and it should not include href="http:// for CSS stylesheets.

If you’re stumped, an easy way to find the source of the problem is to view the “JavaScript Console” in the Chrome Web browser. It will usually tell you something like this:

The page at https://www.example.com/ ran insecure content from http://www.example.com/style.css.

(Other Web browsers usually have similar features in their developer tools.)