How to Fix and Maintain Mixed Content Issues

Throughout this article, we will be going through what mixed content is, how it is formed and how to prevent or remove it. 

As we all know, it is preferable to have websites that are HTTPS, as it requires servers to be authenticated via an SSL (Secure Socket Layer) certificate, therefore, protecting its users from various network attacks. Previously, however, when people were debating the switch from HTTP to HTTPS, not all libraries, environments and platforms were prepared for HTTPS, causing some to only secure certain major components such as log-ins etc. Of course, these days, this argument is no longer valid, however, there are still websites that will only implement HTTPS for certain scenarios.

What is Mixed Content?

Mixed content is caused by websites that do not serve all of their content via HTTPS, as touched on above. Overall, this can create a negative effect on your website in general, affecting not only security but site performance, SEO and more.

via GIPHY

An example of this, it not only helps with ranking itself (despite not being a major ranking factor) but can affect other issues which may be more of a concern, such as performance. For instance, if you are on a website with a mixed content issue and are going from an encrypted connection (HTTPS) to one which is unencrypted, this will be slower.

 

Moving from HTTP to HTTPS

When moving from HTTP to HTTPS, there are plugins such as: ‘Really Simple SSL’ which may help with a few basic issues, however, in the long term, it is best to update your URLs.

Firstly, a simple way of checking if you have any mixed content issues is by going to your site and inspecting it, and then viewing the console tab. This will likely show us any of the main mixed content issues by displaying as an error such as: ‘Mixed Content: The page at…’. This will list the pages which are having mixed content issues, (as well as images etc) that are being loaded over HTTPS but requested an insecure image. In order to check these warnings in bulk, you could also look into free tools that can crawl your site and search for insecure images and scripts that may be causing such mixed content issues.

Now that you know some simple ways of detecting mixed content, you will need to replace these URLs with the updated HTTPS URL. To do this, you can do a search and replace using a plugin such as ‘better search and replace’. Using this, you will be able to replace any ‘http://’ with a ‘https://’. 

If you have a relatively small site, this may have fixed all of the issues, but often not. You may still have certain files that will need to be hardcoded. 

Once a search and replace has been carried out, the old URLs which have been replaced will have to be redirected (using a 301 redirect). Be sure that everything is redirected correctly and not simply redirected to the home page, as this will definitely result in a substantial change in rankings.

 

illustration of a 301 redirect

 

Preventing Mixed Content Issues

In regards to those that may have larger sites, it can get difficult keeping track of all the potential mixed content issues that could arise in the future. To help with this, you can use a content security policy. A CSP (Content Security Policy) will essentially send a report whenever a policy violation occurs. In this case, whenever a user visits a page where a subresource is trying to be loaded over HTTP, a report will be sent out. 

There are of course disadvantages to this, as reports will only be sent if a user is visiting the page or content with the mixed content issues.

To enable the content security policy directive, you will need to add in a response header to your site. Here is an example: ‘Content-Security-Policy-Report-Only: default-src https: ‘unsafe-inline’ ‘unsafe-eval’; report-URL https://example.com/reportingEndpoint’. There are also other directives which can be added, such as the ‘upgrade insecure requests’ directive which will make the browser attempt to upgrade any insecure URLs before making any network requests.

For example, if an image contains an insecure URL, the browser would request a secure URL for the image, ensuring the user does not come across mixed content issues. This will work if you have made sure prior that an HTTPS image URL exists for that specific image. As well as this directive, there are many more which can even block any mixed content. To choose the right one for you, there is great documentation on such content security policies.

 

Conclusion

In conclusion, it is highly important to remove and maintain any mixed content issues for many reasons, including user experience, search engine optimisation, performance and more. The solution to how these issues are fixed and maintained is also going to be different in regards to complexity and time required, depending on the size of the site, cms and more.

Amir

In my spare time I enjoy playing piano songs from artists such as Beethoven, Ludovico Einaudi and more, doing some photography, going to supercar events, trying to avoid video games (ever since my last intervention), or binge-watching TV Series legally.