Mixed content issues occur when there is a combination of both HTTPS (secure) and HTTP (insecure) resources being requested within a particular page. Secure content loaded over HTTPS is safeguarded against man-in-the-middle attacks and sniffers however, if the same page loads resources over HTTP, these insecure resources are susceptible to attacks.
Mixed content errors can stem from various sources including hard-coded links that you may have forgotten to change, third party plugins, etc. Therefore, it is important to regularly check your website to ensure there are no mixed content errors, thus ensuring that your visitors are browsing a fully-secured website.
Types of Mixed Content
There are two types of mixed content; passive and active. The difference between each pertains to the level of threat that exists if there were to be a man-in-the-middle attack. Each type is explained in the next section in further detail.
Passive Mixed Content
Passive mixed content refers to content that is delivered over HTTP on a HTTPS webpage, however does not interact with the rest of the page. This means that an attacker is limited in what they can do in regards to tracking the visitor or changing the content. This type of mixed content can be possible within the following HTML elements:
- <img> (“src” attribute)
- <audio> (“src” attribute)
- <video> (“src” attribute)
- <object> subresources
Passive mixed content is less urgent than the alternative, active mixed content. Users that come across a website with passive mixed content will see a warning message similar to the following, however all assets will still be shown as expected.
Active Mixed Content
This type of mixed content is susceptible to much greater threat as it has access to all parts of the DOM. If a man-in-the-middle attack were to occur, the attacker could potentially steal sensitive data from the user. HTTP requests for the following list of elements can be subject to active mixed content errors:
- <script> (“src” attribute)
- <link> (“href” attribute) (CSS included)
- <iframe> (“src” attribute)
- XMLHttpRequest requests
- CSS where a url is used (e.g. @font-face, background image, etc)
- <object> (“data” attribute)
These errors should be resolved as soon as possible as an attacker can use this vulnerability for malicious purposes. This type of mixed content will also be blocked by browsers leaving your web page “broken”.
How to Solve Mixed Content Errors
To fix the issue of mixed content errors, the solution is simple – replace all links using http:// with https://. Depending on your CMS, the process you go about doing this may be different. In WordPress there are a few solutions. Read our post section regarding updating all hard coded links to HTTPS for more information.
If your site is small you can of course update your links manually by changing the protocol from http:// to https:// or using a relative protocol “//”. Defining a relative protocol will allow the page to determine which protocol it should used based on the protocol used to open the page. However, using this method may pose issues with other plugins therefore it is recommended to use https:// instead.
Updating your links to use https:// only works for the assets on your domain. If you are using third party plugins that are loading resources over http:// you will continue to receive mixed content warnings / errors. Ensure that you have enabled any SSL setting in the plugin if it exists, and if not try contacting the plugin author.
If you haven’t yet moved your site over to HTTPS but want to learn how, read our complete guide on how to move from HTTP to HTTPS.
Tools To Find and Fix Mixed Content
Now that you are familiar with the importance of solving mixed content errors, how do you go about finding them? The following section outlines a few methods you can use to find and fix these errors. In the examples below I have purposely modified an image URL to use http:// instead of https:// in order to show the error.
- Why No Padlock is a website that allows you to simply enter your https:// domain name and it will return information pertaining to your certificate issuer, as well as if you have any insecure items.
- Chrome Dev Tools is an easy way to quickly see if you are requesting any insecure content on a particular page. Simply open the dev tools and navigate to the Console tab. If you have any warnings or errors you will see a message similar to the following.
- SSL Check is similar to Why No Padlock in that you can enter your domain URL and it will return any pages that are affected by a resource that is delivered over HTTP. Simply click the question mark “?” to see which resource is causing the warning / error.
With all of these tools you can quickly find any insecure resources that are loading on your web page. Being aware of any mixed content errors on your web page is crucial and they should be resolved as soon as possible to help make your website a safer place for visitors to browse.