How to Find and Fix Mixed Content Warnings on HTTPS Sites
Simply
supporting HTTPS isn’t always enough — you also need to know how to identify
and fix mixed content errors
If you recently migrated your website from an insecure HTTP connection to a more secure HTTPS connection, you may still run into the problem of receiving mixed content warnings. Worse yet, your site may render as insecure to site visitors, causing them to quickly click the ‘back’ button and find elsewhere to explore.
That said, the real problem with mixed content warnings on HTTPS
connections is emerging with Google Chrome’s latest release — Chrome 79. With this new release, some
content that continues to load over an insecure connection will automatically
be blocked. It will mark websites that use TLS 1.0 or 1.1 as “Not
Secure” and no longer show the lock icon for them.
Further down the road with Chrome 81, scheduled to be released sometime in March, Google will completely remove support for the legacy TLS protocol, which will block all non-secure content by default. In other words, content on your site that is not loading via HTTPS will not load at all, and your site visitors will not see this content.
If you want to make sure all your site’s content is loading over a
secure connection and site visitors see it all, keep reading. Today we’re
explaining what mixed or insecure
content is, why it’s a problem, and how
to find and fix mixed content warnings if you see them on your HTTPS
website.
Let’s hash it out.
What
is Mixed Content?
According to Google, mixed content occurs when HTML on a website loads over a secure HTTPS connection (thanks to a recently installed SSL certificate) but other content, such as images, video content, stylesheets, and scripts, continue to load over an insecure HTTP connection. This results in some web content loading securely and some web content loading insecurely.
Hence the name “mixed
content.”
The thing with mixed or insecure content is that it all loads over
a secure HTTPS connection, whether the content itself is secure or not. And
when this happens, modern browsers such as Google Chrome display warnings to
users trying to view the web content that the site contains insecure content.
Secure websites that load over HTTPS connections provide the
following benefits:
- Authentication. Reassure your site visitors that they’re safe when they land on
your website and engage with your site content, especially if you run an online
shop where financial information is shared. In addition, verify for site
visitors that they’re on the website they want to be and haven’t been redirected
to a malicious site. - Data Integrity. Visually tell site
visitors that their personal and financial information is secure and safe from
hackers no matter what action they take on your site. In addition, give
browsers the ability to detect whether a hacker has changed any data a browser
receives. In other words, help users trust that a hacker hasn’t redirected
money paid via your online store to another account. - Anonymity. Guarantee site visitors that
their behavior while on your site isn’t being intercepted by others and used
maliciously.
In short, HTTPS allows website owners to secure their data and
build trust with those that visit their site so they can continue to build
their brand and business.
Why
is Mixed Content a Security Issue?
If mixed content loads over a secure connection, you may be asking
yourself why it matters. After all, the
HTTPS connection should be securing the resources regardless of whether it’s
mixed or not, right?
Wrong.
Any time there is mixed or insecure content on a webpage, the
entire website becomes vulnerable to attack. While it doesn’t open the webpage
up to all types of cybercrime, it weakens the overall security of the site.
This means that if a hacker breaches a website that loads mixed content, they
might be able to take control of the entire page, not just the resource that is
insecure.
While most modern browsers display mixed content warnings for
people to see before they visit a website, the truth is, many of these warnings
come too late. In fact, oftentimes hackers have already broken into mixed
content websites and have begun doing damage without the site owners or
visitors knowing what’s occurred.
Here are some other ways mixed or insecure content on your HTTPS
site can become a security problem:
- Hackers can intercept HTTP requests
to load an image and swap your site’s image out for another one the hacker
prefers. - Your ‘save’ and ‘delete’ button
images can be switched, causing site visitors to accidentally save or delete
content. - The front end of your site can be
defaced, which is especially bad when it’s with lewd or inappropriate images or
text. - A hacker can intercept written
content and rewrite it entirely. - Passwords, session cookies, and
other login credentials can become compromised and land in the hands of cybercriminals. - Your site visitors can be
redirected to another site without knowing any different.
Browsers do their best to block the most dangerous types of mixed
content on websites. However, it’s impossible to block all of it (though that seems like an obvious solution)
because so many well-established and highly trafficked websites render mixed or
insecure content for site visitors. Blocking all of it will lead to ruin and
cause a lot of problems.
That said, you can expect popular browsers like Chrome to continue
to block more and more mixed content as new versions are released.
How
to Find and Fix Mixed Content Warnings on Your HTTPS Website
If you’ve taken a proactive approach to site security and have installed an SSL certificate on your site, be proud. Data from Google’s Transparency Report indicates that desktop users load more than half the pages they visit over HTTPS connections and spend more than two-thirds of their time on HTTPS webpages.
Unfortunately, data encryption is less prevalent across mobile
devices, though more site owners are taking measures to secure their mobile
sites as time goes on and mobile usage worldwide continues to climb.
However, just because you’ve done the right thing by encrypting
your site’s data, doesn’t mean your website’s content is fully secure. That’s
why you must work hard to prevent loading mixed content on your website in the
first place. Otherwise, that SSL certificate does you no good.
Let’s look at how to find
and fix mixed content loading on an HTTPS website using Google Chrome.
Step
1: Visit Your Website
Visiting your website to find mixed or insecure content warnings
may seem obvious. But, in reality, how
many times do you casually visit your own website as though you’re a site
visitor?
It’s important you check your site first to see if you’re loading
mixed or insecure content over your secure HTTPS connection. Remember, Google
Chrome will display mixed content warnings if mixed content is present on your
site.
To view Chrome’s mixed content warnings, first click on the
webpage you want to check. Then, right-click and scroll down to ‘Inspect
Element.’ When you do, choose the tab labeled Console. The browser will detect mixed content and display warnings
like this:
If the mixed content is very serious (meaning it opens up hackers to take complete control over your entire
web page), the mixed content warnings will display in red:
The Chrome Developer tools will only display mixed content
warnings for the webpage you’re currently viewing. This means you will have to
manually inspect every single web page on your website if you want to fix all
the mixed content warnings on your site. As you can see, this can be a very
time-consuming and tedious task if you don’t catch the problems early on.
Step
2: Verify Your Site’s URLs
Besides inspecting the source code on your entire website, another
surefire way to identify insecure content on your site, despite having an HTTPS
connection, is to check your site’s URLs.
If you notice that some of your site’s URLs are HTTP instead of
HTTPS when you know that you have an active SSL certificate on your
site, then you know there’s likely a problem with some mixed content loading on
the front end for site visitors. It’s best to keep a list of all web pages on
your site that are loading mixed or insecure content. This will help you stay
organized when it comes to fixing all the warnings you discover.
Step
3: Compare the HTTP vs HTTPS Web Pages
Once you know mixed content is loading on your HTTPS website, the
next thing you’ll want to do is compare your insecure HTTP web page against the
secure HTTPS web page (using the same URL for both). If the web pages are
identical over HTTP and HTTPS, move on to the next step. This means no content
is being blocked by Google Chrome and you can move on.
If, however, you see a warning or the content will not display
over the HTTP connection, you should do one of the following:
- Get rid of the resource
altogether (e.g. the image, video, etc.
that will not display over HTTP); - Include the resource from another
host if available; or - Download and host the resource on
your site directly.
Step
4: Change the URL and Save
If your website renders the same over both HTTP and HTTPS
connections, the next step is to change the URL from http:// to https://, save
the source file and redeploy the updated file.
Then, click on the web page where the mixed content error appeared
and make sure it’s fixed and rendering over a secure HTTPS connection.
Ways
to Prevent Mixed Content Warnings on Your HTTPS Site
It can be frustrating to install an SSL certificate on your
website and continue to receive mixed content warnings despite the secure
connection. That’s why taking a few additional measures to secure your website,
and safeguard your site visitors, is sometimes necessary.
1.
Always Use HTTPS URLs When Loading Your Webpages
It’s important that you apply your HTTPS connection (https://) to
all web pages on your website whenever possible. If you notice that your web pages
are loading over an insecure connection, despite having an active SSL
certificate on your site, you need to fix this. This might mean getting in
touch with your web hosting provider’s support team if they’re the ones
providing you with an SSL certificate.
2.
Use the Content-Security-Policy-Report-Only Header
If you want to collect reports of mixed content on your website automatically, you might consider adding this snippet of code to your site’s HTTP response header:
Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpointThough this isn’t 100% reliable for fixing mixed content before it
becomes a problem, it does help those with large websites stay on top of
insecure content.
When a site visitor lands on a web page that has mixed content, a
report is sent to https://example.com/reportingEndpoint alerting
you that something has violated the content security policy.
The report will include the:
- URL of the webpage in question,
and - The subresource that violated the policy.
By configuring your reporting endpoint to log these reports, you
can track mixed content on your website without having to visit each webpage
yourself. That said, the only time this strategy works is if a site visitor
lands on a web page with mixed content. Not to mention, you’ll only receive
reports for moderately to highly trafficked web pages, meaning mixed content
may be loading for some time before you become aware of it.
3.
Use the Upgrade-Insecure-Requests CSP Directive
Another way to automatically detect and fix mixed content warnings on your HTTPS site before it becomes an issue is to use the upgrade-insecure-requests directive tool. This tool tells the browser to upgrade all insecure URLs before making any user requests.
In other words, an insecure URL will be made secure before loading
for a site visitor on the front end of your website.
To do this, add this meta tag snippet of code to the document’s
HTML <head> section:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">Remember, if the resource that is loading via HTTP over an HTTPS
connection is not available over HTTPS, this tool will not work. Therefore, the
resource will not be upgraded as secure and will not load for site visitors.
Though this means site visitors will miss some of your site’s content, it also
means they remain secure as they explore your site.
4.
Use an Online Tool to Identify Mixed Content Warnings
If you have a large website and don’t have the time and manpower
to do all of the above, you can always use a web crawler service to help
identify mixed content warnings on your HTTPS website:
- Why No Padlock? This free tool will allow you to quickly check your URL to ensure there are no insecure links found on your site.
- HTTPS Checker. This “freemium” software, which is available for Windows, Mac, and Ubuntu Linux, is great for
- checking for Chrome’s ‘Not Secure’ warnings,
- helping you prepare for an HTTPS migration,
- scanning many domains at once, and
- checking for issues related to major imports or content changes.
- Mixed Content Scan. Found in GitHub, Mixed Content Scan lets you scan your HTTPS website for mixed content. After scanning your site, you’ll see a list of URLs causing mixed content warnings. You’ll see the varied warnings in different colors so you can easily spot what is causing problems on your site.
- JitBit Scanner: This free tool scans your entire website, even following internal links, to look for insecure images, scripts, and CSS files that trigger mixed content warnings. That said, you can only scan up to 400 web pages with this tool.
Wrapping
Up
In the end, having an HTTPS
website is more important than ever. Google Chrome will be the first to
tell site visitors when your site isn’t secure and using an HTTPS connection. Your
search rankings will tank if you have an insecure site, and people will be slow
to trust your brand or business if you can’t prove to them that they’re safe
while browsing your site.
A free SSL certificate is often included in web hosting plans, but premium certificates can cost up to hundreds or thousands of dollars. While there’s no one right answer for which type of certificate to choose (because everyone’s needs are different), keep in mind that any free SSL protection is usually domain-validated only (i.e. the least secure option). Here is a comparison of SSL certificate types to give you an idea of prices, features and level of security offered.
As you can see, just
enabling HTTPS on your website isn’t enough. If you have mixed content
loading over a secure HTTPS connection, you’ll continue to receive mixed or
insecure content warnings and push people away. So, take the time to check and
monitor your site for insecure content. Because you can bet that even though
some site visitors will still risk visiting your site with mixed content
warnings, popular browsers like Chrome are going to continue to crack down on
insecure sites and prevent users from engaging with them the way you’d like in
the future.
*** This is a Security Bloggers Network syndicated blog from Hashed Out by The SSL Store™ authored by Matt Ahlgren. Read the original post at: https://www.thesslstore.com/blog/how-to-find-and-fix-mixed-content-warnings-on-https-sites/
