Fixing issues related to mixed content

Because of the increased priority placed on safety across the internet, every site should use HTTPS. Installing an SSL certificate on your website allows you to make that shift. But websites that have been running on HTTP in the past may run into an issue: mixed content warnings.

Let’s take a look at some of the most prevalent problems associated with mixed content, discuss what causes the issue, and then discuss how you can fix them.

What happens to create mixed content

A mixed content warning is displayed when both HTTP and HTTPS connections are used to load the same page. What’s happening behind the scenes is the HTML is loading for the page through HTTPS, but then the individual content resources load over HTTP.

A browser will warn the user and perhaps restrict mixed material if it is detected. The following is a possible example of such a scenario:

What causes mixed content warnings

Websites that have a lot of site components, particularly external ones like photos, media files, JavaScript, and CSS, are more likely to display mixed content warnings.

Why? There are two primary causes for this:

• The site’s code permanently stores the URLs to such files.
• By default, these resources are downloaded through HTTP.

As a result, even after a site is migrated to HTTPS, some paths will continue to point to the insecure version. In terms of how that might appear in a website’s code: This may occur if the image, stylesheet, or script file path is specified using an absolute URL (https://www.example.com/about/mixed-content/) rather than a relative URL with just the path (/about/mixed-content/).

How to fix mixed content problems

An indication that your site contains mixed content is when the “Not Secure” warning appears in the Chrome browser’s Omnibox even though the domain in question uses HTTPS. If you get that warning take the following five steps to get the issue fixed. 

Step 1: Locate the mixed content on the page

If your browser warns you about “Insecure content identified on the webpage,” you can verify the presence of “http://” URLs by viewing the page’s source code. This can be easily accomplished by performing the simple CTRL+F command on the source code.

Step 2: Make sure to check both HTTP and HTTPS resource is available 

There is a possibility that the mixed content can be accessed by HTTP and HTTPS simultaneously. In situations like this, you won’t need to make any adjustments because the Chrome Browser version 79 will automatically upgrade mixed resources to https://, ensuring that websites will continue functioning normally.

On the other hand, if you are unable to locate the HTTPS version of the same file – “Resource not available over HTTPS” – or if you encounter a Chrome Notification that states “Certificate warning while attempting to view resource over HTTPS,” then you will need to consider upgrading the resource to HTTPS.

Step 3: Transfer from an HTTP resource to HTTPS

If you discover non-HTTPS resources or see a warning while accessing them, consider doing the following:

• Get help from a different HTTPS-capable host.
• If the external resource is a file that can be downloaded, download it again and host it on your HTTPS server.
• If the resource is not essential for displaying on the website, remove it entirely.

Step 4: Modify the source file

After uploading the resource to an HTTPS domain, replace the source code with the resource’s new HTTPS URL.

Step 5: Verify the issue is resolved

The final step is to check to make sure the error has been fixed and you’re no longer receiving a warning. The evisio platform can help you keep track of when this issue occurs, when it’s fixed, and how to prevent similar issues in the future.