This article provides you with information on how to resolve your browser blocking mixed content on your website.



What is Mixed Content?

If you click on a link that leads you to a website with mixed content, you’re taking a risk. To put it simply, mixed content is when a website has both safe and unsafe scripts running simultaneously.

Many sites have moved from HTTP to HTTPS by activation of SSL certificates, but some site owners fail to make that switch completely, which results in mixed content.

Many browsers will provide a warning to let you know about sites with mixed content. What’s more, some browser is starting to block such content completely:




How can I tell if a page has mixed content?

If your browser does not completely block the site like the image above there ways of telling whether your site has mixed content. There are two types of mixed content: mixed passive/display content and mixed active content. The difference lies in the threat level. Look for a padlock icon in your address bar to determine whether the page has mixed content.


FF70 Gray Padlock

No mixed content: secure

  • Gray padlock - Firefox 70 : You’ll see a gray padlock when you are on a fully secure (HTTPS) page.

Mixed content is not blocked: not secure

  • unblocked mixed content 42 : If you see a padlock with a red line over it, the page contains mixed active content and your browser is not blocking insecure elements. That page is open to eavesdropping and attacks where your personal data from the site could be stolen.
  • orange triangle grey lock 42 : A gray padlock with an orange or yellow triangle indicates that your browser is not blocking insecure passive content, such as images. Attackers may be able to manipulate parts of the page like displaying misleading or inappropriate content, but they should not be able to steal your personal data from the site.


Steps You Can Take to Eliminate Mixed Content from Your Website


Step 1 - Remove Any HTTP Hyperlinks from Your Website

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 using Why no padlock. This will provide you with a report as to which links on your website are not secure.


Step 2 - 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 HTTP to HTTPS.

To do this 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:



RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Alternatively, if you have a web.config file then add the following line of code at the bottom of the file:


<system.webServer>
<rewrite>
    <rules>
        <rule name="HTTP to HTTPS redirect" stopProcessing="true"> 
        <match url="(.*)" /> 
        <conditions> 
               <add input="{HTTPS}" pattern="off" ignoreCase="true" />
        </conditions> 
        <action type="Redirect" redirectType="Permanent" url="https://{HTTP_HOST}/{R:1}" />
</rule>   
    </rules>
</rewrite>
</system.webServer>


Then save and re-upload the file, and your redirect will be ready to go.