Mixed content
Mixed content occurs when HTML is initially loaded over a secure HTTPS connection, but other resources, such as images, videos, stylesheets, scripts, etc. are loaded over an insecure HTTP connection.
This is what is known as 'mixed content' because both HTTPS and HTTP content is being loaded to display the same page. As well as the initial request being run over a secure HTTPS connection.
When a user visits a page served over HTTPS, they are using a secure connection where the web server is encrypted with TLS. Therefore, they are safeguarded against most sniffers or man-in-the-middle attacks.
When a page also fetches content using clear text HTTP, this is then a mixed content page. This leaves pages only partially encrypted, meaning that the unencrypted content is vulnerable to attacks.
How to fix mixed content?
Follow these simple steps to fix your mixed content issue.
1. Identify mixed content on the page. You will normally notice a browser notification indicating 'insecure content found on the webpage'. You can then use a CTRL+F to find where the "HTTP://" is in the source code.
2. Check if the resource is available in HTTP and HTTPS. If it is available in both, then you won't have to make any changes, as the Chrome browser 79 will automatically implement any upgrades to HTTPS.
However, if you are unable to find the HTTPS file, or it indicates that the resource is not available in HTTPS, you will have to migrate the resource over.
3. Migrate the HTTP resource to HTTPS. You can do this by:
- Using the same resource with a different host who can serve the HTTPS version.
- If the resource is downloadable, download it and host it on your HTTPS server.
- If the resource is not necessary or integral to your page, exclude it from your site altogether.
4. Update the source file. Check if the resource is available in HTTPS, if so, simply change the URL on the page from HTTP:// to HTTPS://
5. Then check if the error has been resolved. If it, has you should see no more warnings for 'mixed content'.