HOW TO prevent mixed content warning in web pages


What is a Mixed Content Warning?

This blog post explains it well:

HTTPS-enabled sites require all resources on the page, including the ads, to be SSL compliant to protect the user against man-in-the-middle attacks. If an HTTPS page loads an HTTP resource, the page is considered mixed content, and the browser displays a mixed content warning (like the padlock with warning triangle in Chrome). 

New browser releases like Firefox 23 are starting to block mixed active content (scripts) but still display mixed content warnings for mixed passive content (images).

The mixed content warnings vary in aggressiveness among browsers. 


One way for developers to fix this issue is by using a Protocol Relative URL.

A Protocol Relative URL is just like a regular URL except that you leave out the protocol prefix:
 //mvark.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js

A protocol relative URL is just a URL without the scheme. For example //billpatrianakos.me is a protocol relative URL. These types of URLs are meant to be hit by a browser only. The point is that a browser can fetch a resource from whatever protocol the site is telling it to use.

You get the automatic use of HTTPS on secure pages and avoid the overhead of HTTPS on non-secure pages.

Comments