Glance up at the address bar in your browser. See that lock icon in front of the URL? That means the page you are reading is secure and all of the embedded resources are encrypted; no doors have been left open, and no paths left unsecured. This is an example of web development best practice. Now, if you browse through the pages of your website and come upon one (or several) that show an unlocked icon image, that means you have mixed content on your website and some of the resources on the page(s) may not be encrypted. Here, we’ll explain what mixed content is, what issues it can cause, and how to fix it. 

What Is Mixed Content?

A web page is considered to have mixed content if resources on it are loaded via an HTTP connection instead of HTTPS. This type of content usually consists of images, iframes, widgets or tools, and JavaScript and CSS that is using old protocols. What’s happening is that some inline links or third-party resources reside on your website and they may not be secure. When you land on a page with mixed content, your browser recognizes it and shows an “insecure content” warning with the unlocked icon or it blocks the content altogether. Just because one page has HTTP content, does not mean your entire website is insecure; it’s all page-dependent.

Your first reaction to the presence of an unlocked icon on one of your pages may be to ignore it because you have an SSL certificate. However, an SSL certificate doesn’t guarantee your entire website is free from HTTP content. When you visit a website, your browser does an SSL “handshake” which validates both your SSL certificate and the ownership of your website; it then establishes an encrypted channel from the server. If you have mixed content on one of your pages, that page will be served as HTTP and its sidekick, the unlocked icon. An SSL certificate won’t remedy or mask the mixed content issue for you. As New Target’s Director of Hosting and DevOps, Sateesh Nutulapati adds, “SSL is there for you, but you need to fix your mixed content or it won’t show it.” Ultimately, your hosting provider should be adding redirects to a secure version of HTTP content. 

The Consequences

Having pages with mixed content can have adverse effects. First, Google will penalize your website in its search results and, just as impactful, it could result in a trust issue with your visitors. Imagine users going through checkout or registration on your website only to glance up and see the unlocked icon in the URL. You can write volumes about your security measures and encryption practices, but the very presence of that dreaded icon can cause visitors to flee. Remember, the more information you exchange with users, the more critical it is to ensure pages with forms, logins, carts, checkouts, etc. contain HTTPS resources. Outside of ecommerce, be sure to check user-contributed resources as well, as they can also be a source for HTTP content. On a lighter note, you don’t have to worry about HTTP content on hyperlinks and on third-party sites like AMSs, as mixed content is a site-specific issue.

The Remedy

Pages on your website that load as HTTP can be disconcerting, but the fixes are relatively easy. For HTTP images, it’s just a matter of replacing them with HTTPS versions. For third-party widgets and/or iframes that have non-secure paths, you will need to contact the source and notify them of the issue. Also, be sure that all internal URLs are relative where possible. A relative URL goes directly to the page “/home.html” whereas an absolute URL includes the full domain name. If you choose to use absolute URLs, be sure the external site is HTTPS secure. The most efficient and cost-effective remedy is to have New Target conduct a thorough scan of your website and then update links and resources to HTTPS for you. Contact us to get started on the path making your entire website HTTPS secure!

With offices in Washington, D.C. and Los Angeles, Ca., New Target provides digital strategy, digital marketing, web design, web development, branding, website hosting, and creative services for prominent nonprofits, companies, and government.