Why Google Chrome Blocks Mixed Content pages ?
If you are using SSL it’s important to pay attention to your website pages and ensure that all your content is served via a secure connection. Here are some tips on what to do if you find any “mixed content” or “insecure content” errors and how to fix them.
What is Mixed Content?
With TLS (also known as SSL), Internet communication is encrypted end-to-end, creating a more secure browsing experience. Users can easily identify TLS-encrypted sites because they have ‘https://’ in the URL instead of ‘http://’. But in some instances, an HTTPS site can also contain some elements that are loaded using the plaintext HTTP protocol. This creates a condition known as mixed content, sometimes referred to as ‘HTTP over HTTPS’.
With mixed content, users will be under the impression that they are on a secure, encrypted connection because they are on an HTTPS-protected site, but the unencrypted elements of the page create vulnerabilities, opening up those users to malicious activity such as unauthorized tracking and man-in-the-middle attacks. The severity of the vulnerability depends on whether the mixed content is passive or active.
What’s the difference between passive/display mixed content and active mixed content?
Active mixed content
In this case, elements or dependencies that can interact with and alter the entire webpage are served over HTTP. These include dependencies like JavaScript files and API requests.
Active mixed content presents a more severe threat than passive mixed content; when compromised, it allows an attacker to take over an entire webpage, steal passwords, login credentials, user cookies or redirect users to other sites, etc.
Passive mixed content
In this case, the unencrypted HTTP content is restricted to encapsulated elements on the site that cannot interact with the rest of the page such as images or videos.
An attacker can intercept an HTTP request (resources loading via Http) for videos or images on your site and replace those images with whatever he wants. he can also replace your product pictures or place ads for a different product.
How can I investigate mixed or insecure content errors?
You may not know whether your site contains mixed content, but don’t worry. You can find out quickly with a Secure Sockets Layer checker (SSL checker). This kind of tool verifies that your site’s Secure Sockets Layer (SSL) certificate has been properly installed and that your security is sound.
You can use our online SSL Checker to get a rating not only on the certificate but also on its protocol support and any potential vulnerabilities.
how to Eliminate Mixed Content from Your Website
If you discover mixed content on your website, don’t panic. There are multiple ways you can remove it, and make sure your site remains visible in search engines. With a few tweaks, your website can be more secure in no time.
Step 1: Install an SSL Certificate
While some hosts will supply an SSL certificate along with your plan, not all do so by default. If you haven’t installed one yet, this is a vital task. An SSL certificate adds an extra layer of protection for you and your visitors and enables your site to function via HTTPS.
There are three main types of SSL certificates :
- Domain Validation (DV)
- Organization-Validation (OV)
- Extended Validation (EV)
DV certificates are the easiest and quickest to get but offer the lowest level of security. OV certificates are a solid middle option, while an EV will take longer to secure but is a good choice for large e-commerce sites.
Step 2: Remove Any HTTP Hyperlinks from Your Website
As we mentioned earlier, most sites are served over either the HTTP or the HTTPS protocol. HTTPS allows for encryption and adds a layer of safety to your website.
Even if your site is linking to an external resource that contains an HTTP hyperlink, such as an image, you’re opening up your website to possible attacks. That also puts your website’s visitors at risk.
One method for fixing this problem is Google’s audit system. To use it, you will have to install Chrome’s Canary first, and then use Lighthouse (installed through npm) to perform the check.
Once everything is set up, run the audit by using the following code to get your report:
lighthouse --mixed-content http://www.example.com
Lighthouse will show you all of the insecure links that are currently on your website. Then you can modify or replace them as needed.
Step 3: Set Up a 301 Redirect to Boost Security
If you have updated your website from HTTP to HTTPS, you may want to consider implementing a 301 redirect. This type of redirect permanently reroutes users from one domain to another.
If you choose not to do this, some visitors may inadvertently end up using an insecure version of your website, or might never find it at all. To make sure everyone is redirected to the HTTPS version of your site, you’ll want to access your .htaccess file via File Transfer Protocol (FTP). Then add the following line of code at the bottom of the file:
Redirect 301 / http://www.yourwebsite.com/
Don’t forget to replace the placeholder with your site’s domain. Then save and re-upload the file, and your redirect will be ready to go.
