Handling Mixed Content Errors

When you add an SSL certificate to your site and make the switch from http to https, you may notice a warning in the address bar that the site is not secure, or that certain content doesn’t load the way it did before.

If this is the case, the most likely cause is that the page scripts contain links or assets beginning with “http://”, which SSL doesn’t recognize as secure.

To fix this, you’ll need to find and change any hardlinks beginning with “http://”.

How do I know if my site contains insecure content?

Not every https site containing insecure content behaves the same way. Here are some things to look for on your page.

  • The lock symbol. If you see a lock symbol in the URL bar of the browser, then your SSL certificate is working and considers the site secure. If you don’t see this symbol, you should check for content that is causing the site not to be fully secure.
  • Other icons in the address bar: there may be a shield, a lock with a yellow warning symbol, or an info icon. Clicking on these will tell you if there are any mixed or insecure content errors.
  • Any content that doesn’t appear the same way it does when using http, such as missing images, buggy CSS, etc.
Determining What Content is Insecure

There are many tools available that will find insecure hardlinks in your page. Two of these are Chrome Developer Tools and WhyNoPadlock.com.

Chrome Developer Tools
  1. Open Google Chrome.
  2. Navigate to your domain using https.
  3. On the page you want to check, press ctrl+shift+I or right click on the page and select “Inspect”. This will open the Chrome Developer Tools window.
  4. Click on the “Console” tab at the top.

You will see any errors or warnings listed here. Red or yellow errors beginning with “Mixed Content:” give you the exact hardlinks that are insecure.

If your site has multiple pages, you should check every page template for these errors as they may contain insecure content that the homepage doesn’t.

WhyNoPadlock
  1. Navigate to whynopadlock.com.
  2. Type in the URL for the page you wish to check and click “Test Page”.
  3. Scroll down to the “Mixed Content – Errors” section.

The exact hardlinks that are causing the page to be insecure are listed here.

If your site has multiple pages, you should check every page for these errors as they may have different content than the homepage.

How to Fix HTTP Hardlinks

Note: Make sure you have a current backup of your site before you begin making these changes.

Depending on how your site is structured, you may have to look through multiple files for your domain to check for hardlinks. You can use DirectAdmin’s File Manager, an FTP client like FileZilla, or SSH to search through the file system.

We recommend starting with index files, and files with these extensions: ‘.html’, ‘.htm’, ‘.php’, ‘.css’.

The following content often contains http hardlinks:

  • links to other content on your own site
  • embedded external content such as images, videos, etc.
  • third party scripts
  • old google fonts or iframes
  • imported stylesheets

Once you have found an insecure hardlink, replace the “http://”” part of the link with “//”. For example, the following reference:

<a href="http://support.vacares.com/">

would be changed to

<a href="//support.vacares.com/">

Why aren’t we replacing it with “https://”” instead?

Using “//” creates a relative link, which tells the page to load the content using the same protocol as the page itself. So if you access the page through https, then it will load the content with https as well. This approach is more flexible than defining the link to use a specific protocol.

Updating WordPress Sites

If your site uses WordPress, we recommend using the Really Simple SSL plugin. See our support guide for more about this plugin and how to use it.

What if My Content Still Doesn’t Load?

Make sure to clear your browser’s cache (or press CTRL+F5 to do a hard refresh) when you reload the page after changing the hardlinks. If the content still doesn’t appear, it’s possible that the site hosting that content doesn’t have an SSL certificate itself. To test this you can visit the reference link using “https://” in your browser.

If you get a warning that the page isn’t secure, then the site doesn’t have SSL and the content can’t be loaded over https. In this situation, you can contact the admin of that site about getting SSL, remove the content from your site, or choose not to use SSL for your site (we don’t recommend this).