• General information
• How to detect the issue
• How to resolve the issue

What is the 'Insecure content' issue?

If you recently installed an SSL certificate on your website, you may still run into the issue of receiving the mixed content warning in browsers. Browsers may warn your customers that your website is insecure, causing them to close the page due to this security threat.

Some browsers even block the insecure connection and mark the website as not secure so that your visitors will not see the website content. Below, you will learn what exactly mixed content is, why it occurs, and how to fix these warnings if you encounter them on your site.

Insecure (also called ‘mixed’) content usually appears when HTML code on a website loads over HTTPS, while other content (such as images, video content, stylesheets, and scripts) still loads over the insecure HTTP protocol. When this happens, some of the content of your site loads securely and some of it insecurely.

The issue with insecure content is that the browser tries to load all of your website content via a secure HTTPS connection, whether it’s secure or not. As a result, in modern browsers, the warnings we mentioned above are displayed to visitors who try to view a website that has some http:// content.

Below you can compare how a secure website should look like in different browsers and how it looks like if the mixed content warning is displayed:

Chrome:

Firefox:

Safari:

Please keep in mind if you face the issue of insecure http:// links in your site content, the security messages in the browser have nothing to do with the SSL installation. That is, it doesn’t necessarily mean the SSL wasn’t installed properly. To be sure, you can check that your SSL is installed properly here.

In order to find what is causing the situation, you'll need to check the elements within the HTML code of your site. You need to check your site content and detect if there are any http:// links.

How do I know if I have insecure content?

To locate the mixed content, you can do the following:

• Check the content of your website via this online tool
  
  
• In Google Chrome and Firefox browsers, you will need to either press:
  
  ‘Ctrl+Shift+J’ and then click on ‘Console’ (for Win/Linux) /
  
  ‘Command+Option+J’ for Mac or in Chrome Menu choose Tools >> Developer Tools Console/ in Firefox menu: Web developer >> Web Console.
  
  

How can I fix it?

You can try one of the solutions described below to remove the insecure content warning:

1. If your website is built on Wordpress, there are multiple plugins available for fixing insecure content", such as Really Simple SSL and Insecure content fixer. Read this article to find more information about fixing insecure content on Wordpress.
   
   Note: For EasyWP websites, if the plugins don’t fix the mixed content and the manual changes in the database are not saved, please contact our Hosting/EasyWP team to clear the cache from our side to accept the changes.
   
   
2. Add this special header to your site .htaccess file:
   
   Header set Content-Security-Policy "upgrade-insecure-requests" env=HTTPS
   
   
   • This header works for most popular browsers. It’s only sent if the page is requested via HTTPS (because of the env=HTTPS condition). When accessed via https://, it informs all browsers to use https:// links for images/scripts/CSS/frames/videos even if they are explicitly specified as http:// in the HTML page source.
   • Please keep in mind that the header should be put into the correct .htaccess file (for the website in question) so that the rule works for the website with the insecure content issue.
   • Additionally, in order for the rule to work properly, the header should be in the first line in the mentioned file.
     
     
3. Update all the HTTP links to HTTPS ones manually in the website’s script. For example, you should move the image file to a secure part of the site, e.g., https://secure.yyy.com/image.gif . If the content is linked from a third-party source, you could upload it to your server and make it secure;
   
   
4. Make the links relative to the root directory by adding a backslash before the file name as in the following example: ‹img src="/image.gif"›. This would translate to both ‹img src="https://www.yyy.com/image.gif"› and ‹img src="http://www.yyy.com/image.gif"›. This way, the browser will choose the proper HTTPS or HTTP link to display the image or content depending on which connection to the website (secure or not) is used.

If you didn’t create the site yourself, you will need to contact either your web designer or the company that provided you with the site to get assistance with troubleshooting the issue.