What is Mixed Content Error and How to fix it?

ArvanCloud offers free SSL certificate, as a part of its cloud CDN service. Enabling this service in your user panel helps you secure the connection between your website and its visitors.
To prevent a common error known as Mixed Content, you need to ensure that all your website links are relative. In this user guide from ArvanCloud, we will take a look at Mixed Content error and how to fix it.

Mixed Content Error

This specific error occurs when both HTTP and HTTPS assets are being loaded from a particular web page, which was requested to be fetched as HTTPS. The browser is receiving a secured page, which includes insecure resources like videos, images, or scripts, and this leads browsers to block these mixed contents.
Mixed Content Error can be, whether active or passive.

Passive Mixed Content Error

In this type of Mixed Content Error, contents do not interact with the rest of the page. The assets that are being loaded as HTTP are audios, videos, images, and objects. The SSL sign of the website turns orange in these cases to inform a Passive Mixed Content Error occurred.

Active Mixed Content Error

The page as a whole is engaged with this problem. The security issue in this type of error is so severe that the browsers block the connection with them, in order t prevent Man in the Middle attacks. In these cases, the assets being loaded as HTTP are:

​​<script> → SRC
<link> → href (CSS as well)
XMLHttpRequest → Object
<iframe> → SRC
CSS (@font-face, background-image,…) → URL
<object> → Data

How to Fix Mixed Content Error

To fix Mixed Content Error, you need to find all HTTP assets on your page and change them to HTTPS.
If you are using a website created with WordPress, you can follow these instructions to fix the issue:
Go to: Settings > General Settings > URL
Enter your website address with HTTPS