Why does my browser say my SSL page is only “partially secure” or contains “mixed content”?
The first step to making your pages display as “secure” is adding a free SSL certificate, then accessing your site using https:// at the beginning (with an extra “s”). (We have an overview page explaining how to get started with SSL.)
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”, or is “not fully secure” or “contains mixed content”. In many cases, the “padlock icon” in the browser may not fully activate, or the word “Secure” may not appear in the address bar. The Google Chrome browser displays it like this:
Firefox displays it like this:
To prevent this from happening, make sure that none of the page’s 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.
On this page:
- Fixing this in WordPress
- An example of the problem
- Finding the problem in detail
- Using the Content-Security-Policy “upgrade-insecure-requests” header
Fixing this in WordPress
If your site is a WordPress site, you can often fix this by logging in to the WordPress dashboard, clicking Settings > General, and changing both the “WordPress Address (URL)” and “Site Address (URL)” so that they begin with https:// (that is, add an s after “http” and before the colon). This will force WordPress to use your SSL certificate for most resources it tries to load.
If that doesn’t completely fix it, it’s probably because the site has other hard-coded non-https URLs in the database somewhere. We can help you fix this; just contact us and ask for help making the site fully secure.
wp search-replace http://example.com.customers.tigertech.net https://example.com --all-tables --report-changed-only wp search-replace http://www.example.com.customers.tigertech.net https://www.example.com --all-tables --report-changed-only wp search-replace http://example.com https://example.com --all-tables --report-changed-only wp search-replace http://www.example.com https://www.example.com --all-tables --report-changed-only rm -rf wp-content/cache/*
The last line is only needed if you’re using a caching plugin (we recommend the WP Super Cache plugin), but is harmless if you’re not using it. (It intentionally includes a * on the end to avoid deleting any “.htaccess” file in the cache directory.)
If you’re a technically advanced user comfortable with the shell, you’re welcome to do this yourself instead.
Finally, clear your web browser’s cache to test that your site is fully secure.
If you still have trouble, or if you don’t use WordPress, you’ll have to track down the exact problem using the tips below.
An example of the problem
Let’s say your page is at this “https” address:
<link rel="stylesheet" href="http://www.example.com/style.css"> <img src="http://www.example.com/image.jpeg"> <script src="http://www.third-party-site.com/script.js">
To fix this for items included from your own site, 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">
But that trick won’t work if your HTML code references content on a third-party site: you’d need to change that one to something like:
This will only work if the third-party site allows SSL, though. If they don’t, there's no way to fix it.
In a pinch, some people just force all included 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"> <script src="https://www.third-party-site.com/script.js">
Finding the problem in detail
The easiest way to find exactly what’s wrong with a given page is usually to use the third-party Why No Padlock? site. It can often (but not always) tell you exactly what’s wrong.
If that doesn’t work or you want more details, many web browsers will show you the source of the problem if you view the page in question, then open a special window:
- In Google Chrome, choose More Tools > Developer Tools, then look at the “Console” tab
- In Mozilla Firefox, choose Tools > Web Developer > Web Console, then reload the page
- In Safari, enable the Develop menu and choose Show Error Console
These windows will usually tell you something like “The page at https://www.example.com/ ran insecure content from http://www.example.com/style.css”, or “The page at https://www.example.com/ was loaded over HTTPS, but requested an insecure script from https://www.third-party-site.com/script.js”.
Using the Content-Security-Policy “upgrade-insecure-requests” header
If all else fails, there’s one other option: You can make your site send a special “header” that tells browsers to try to convert all non-SSL requests to SSL for anything it loads from the current page.
This usually works, but some older browsers don’t support it, so the main potential drawback is that a site might show as “secure” in new browsers and “not secure” in older ones. In addition, if the converted URL can’t be loaded using SSL, it will simply be ignored. To avoid these drawbacks, it’s better to fix URLs properly (as described above) if you can.
To use this header on your site, you can add a “Redirect non-SSL requests to SSL” redirect in our control panel, which adds the header to HTTP responses on your site as a side-effect.
Alternately, you can manually add this single line to your site’s .htaccess file:
Header set Content-Security-Policy upgrade-insecure-requests;