Blog | NeoTech Design

What is a mixed content?

When you visit a website, your browser makes a request to the server requesting the HTML content. Almost all websites these days have multiple files that are required to render an HTML page such as css files, javascript files, fonts, images, etc. These resources are loaded using a protocol (including the HTML file itself) which dictates how to transmit the desired resource. Most of the time, the protocol used to transmit that data could be one of the following:

• HTTP (Hyper Text Transfer Protocol)
• HTTPS (Hyper Text Transfer Protocol Secure)

HTTP is a cleartext protocol, meaning the resources are transferred in plain text format which is then interpreted as their appropriate resource types by the browser. On the other hand, HTTPS is a secure version of the HTTP protocol that is encrypted via TLS or SSL, its predecessor.

A resource that is requested using HTTP in a web page which is loaded over HTTPS is called a mixed content, since the web page will now have mixed protocols, hence the name. A web page that exhibits this behavior is called a mixed content page.

What is the harm?

Requesting a resource over HTTP in an HTTPS web page weakens the HTTPS protocol and the security of the website as a whole. The un-encrypted content is vulnerable to man-in-the-middle-attacks - where attackers could sniff the communication between the browser and the server and could potentially alter the communication.

Many browsers these days report these kind of issues, however, as a developer it is your responsibility to ensure that security issues like these are eliminated at the root to ensure that your customers/users are protected.

Let’s say you go to a coffee shop to use their free Wi-Fi—not knowing that a potential attacker could be sitting next to you—then you surf the internet as usual to do some shopping using your credit card and the next thing you know is that your credit card information is stolen. This could happen to you if you do not know anything about internet security and hand off sensitive information to websites that are not properly protected, in this case NOT using HTTPS.

What are the benefits of HTTPS?

HTTPS was invented to make the web a secure place. With HTTPS you will get the following benefits:

• Security
• Data integrity

HTTPS lets your browser detect whether the information is legitimately sent from a website and not from an attacker. This also prevents an attacker from eavesdropping on what is being transmitted to and from the other end. NOTE: You should NOT always trust a website based on whether it is using HTTPS or not because scammers could also be operating a website using an HTTPS connection to portray legitimacy.

How can I protect myself?

Most browsers these days have a clear way of indicating whether a website is protected via HTTPS or not. You can tell this by looking at the lock icon in a browser’s address bar.

As you can see above, on the left - a website loaded over HTTPS and on the right - a website loaded over HTTP and you can see how major browsers treat each protocols.

How can I protect my users?

I suggest obtaining an SSL cert for your website as soon as possible. Google just announced that it will flag all unencrypted websites insecure. Personally I think it is an awesome idea because it will motivate web masters to move to HTTPS in order offer a secure user experience to their visitors.

You can even go one step further and enable HSTS policy in your web server like PayPal did - HSTS is a policy that is transparent to the user which prevents browsers from loading a website, if the browser attempts to load any resources over HTTP whereas the website itself is loaded over HTTPS. However, HSTS is not supported by all browsers as of right now.