This is the seventh in our series of insights which seek to explore and simplify the topic of SSL (and TLS) in the context of web application hosting. In our previous insight, we looked at Web Server Headers; in this insight, we’ll explore Mixed Content Warnings.
What is a mixed content warning?
Imagine you have a special notebook that is very secure, and you only let people write in it with a special, secure pen. Let’s say someone tries to write in it with a regular pen. Your notebook sees this and says, “Wait, that’s not the special secure pen!” This is like what happens with a mixed content warning on a website. When you go to a website that is supposed to be secure (its address starts with “https://”), it’s like the notebook. It’s expecting everything on that page also to be secured. But if something on that page is unsafe (like a picture or a video from an “http://” link), that’s like the regular pen. The website will warn you that there’s mixed content – some secure, some not – just like the notebook would warn you about the different pens.
How to check for mixed contents
Manual Inspection of the Page Source
One primary method is to right-click on the webpage and select “View Page Source” or a similar option, depending on your browser. Once viewing the source, you can manually search (using Ctrl+F) for “http://” within the code. Every instance of “http://” is a potential mixed content.
Browser Developer Tools
Google Chrome: Right-click on the page and select “Inspect” to open the Chrome Developer Tools. You can go to the ‘Console’ tab. Here, Chrome will log mixed content issues, indicating resources that were blocked or loaded insecurely. Firefox: Similar to Chrome, use the “Inspect Element” option to access the developer tools, and then check the ‘Console’ for warnings about mixed content. Safari: Enable the Develop menu from Safari’s preferences, then use the “Show Web Inspector” option. Check the ‘Console’ for mixed content warnings. Browser Security Indicators: Look at the address bar in your browser. If there’s mixed content, browsers like Chrome, Firefox, and Safari often change the padlock icon to a warning symbol or remove the padlock entirely.
Online Tools and Scanners
There are various online tools available that can scan your website for mixed content. Tools like ‘Jitbit SSL Check’ or ‘Why No Padlock?’ can crawl your site and identify pages with mixed content issues.
Network Tab in Developer Tools
The’ Network’ tab can also be helpful in the developer tools (for browsers like Chrome or Firefox). Reload your page with this tab open, and you can see all the resources the page loads. Look for any URLs that load over HTTP instead of HTTPS.
Content Security Policy (CSP) Reports
Implementing a Content Security Policy (CSP) and setting it to report-only mode can help identify mixed content. The CSP report will log any instances where the policy would have been violated, which includes loading insecure resources.
Fixing mixed content warnings
Once you’ve located the mixed contents, you must change how your application references them. The references might be contained in the content (for example, in the body of a blog post), in your web design (for example, the CSS in a template header) or in your application’s configuration (for example, wp-config.php). The easiest way to fix mixed contents is to change the absolute URL to relative; if your reference says https://domain.ext/logo.png, change this to simply /logo.png and let the web browser decide http or HTTPS. Where you want to reference a third-party resource such as Google Fonts, you can change http://fonts.googleapis.com to just //fonts.googleapis.com and let the web browser decide between http or https. If both fail, you can change the absolute reference from http://domain.ext/logo.png to https://domain.ext/logo.png. Further Reading We’ve also put together a Post SSL Install Checklist which covers the application of some of the above.
Keep updated with the latest from Pipe Ten by subscribing below.
More in the Simplifying SSL/TLS series
- SSL Basics – What is SSL?
- SSL Certificate Terminology
- EV vs DV vs OV vs FREE SSL Certificates
- Certificate Authorities and The Signing Process
- TLS and Versions
- Web Server Headers
- Mixed Content Warning
- Testing & Tools
Author: Carl Heaton
Carl is a founder of Pipe Ten and uses his role as Technical Director to drive the company’s vision to transform business online in delivering it’s mission to forge agile technical partnerships that accelerate web success. Carl boasts an illustrious career spanning over two decades, starting as a fledgling web developer in his teens, he swiftly ascended the ranks, honing his skills in architecting secure web application infrastructure. With his finger on the pulse of emerging web technologies, Carl has tracked and influenced the ever changing world of cyber security, internet governance, industry regulations and information security compliance ensuring Pipe Ten successfully achieved and maintain ISO/IEC 27001 certification.