1. Overview

Did you ever try to understand why we get into issues related to mixed content on some of the websites that we develop?

In this article, let's try to understand when we get mixed content issues, why it happens, and how to resolve them.

2. Content

2.1 What do we mean by a mixed content issue?

The mixed content issue occurs when the HTML is loaded over a secure HTTPS connection which is considered to be the initial request, but all or some of the other external resources like styles, scripts, images, iframes, audio, video, etc., are loaded over an unsecured HTTP connection, which is considered to be triggered after the initial request.

This kind of scenario will create a mixed content issue because the application has used contents over both HTTP and HTTPS to load the same page.

This is happening because of the secure caching by browsers, where if a website is accessed on HTTPS, then browsers try to access all its resources automatically on HTTPS even we specify HTTP in our code.

Mixed content degrades both the security and user experience of your HTTPS site, which is not good to happen.

ssl-error

2.2. What happens if we don't address the mixed content issues?

Using the insecure HTTP protocol always weakens the security of the entire page, and the whole application, as the requests become vulnerable to man-in-the-middle attacks, where an attacker can modify and replace the data that is being communicated between the two parties.

This will not only compromise the security of a page but the whole application. So, it is very important to address it as early as possible.

Nowadays, browsers are increasingly blocking mixed content, and fixing this now will help us relax before browsers become more strict.

2.3. How to fix this mixed content issue?

The application that consists of HTML and all its external resources that it uses to load a page must be using the same protocols, either HTTP or HTTPS.

In order to achieve this, we have all of them using HTTP or HTTPS. It is always suggestible to use the secured mode of communication using HTTPS.

So, in order to have HTTPS enabled, we need to have SSL enabled on the application and make sure we have all other external resources also available on HTTPS.

Here are the steps to follow to resolve this completely.

  • Only use HTTPS for your application
  • Make use of HTTPS URLs for loading external resources, update the HTTP links to HTTPS

In case, external resources HTTPS links are not available, then

  • Use the resource from a different host that uses HTTPS, if available
  • Download and host those resources on your HTTPS site, if legally allowed
  • Exclude the resource if none of them works.

3. Conclusion

We should have a clear understanding of the mixed content issue, its severity, and how to fix such an issue.