Resolve warnings about secure and insecure elements

It could happen that, when visiting a website via HTTPS, the browser notifies that there are insecure elements on the page. This is a common issue when serving the website via HTTPS, but some images, scripts or stylesheets are still loaded via HTTP. Solutions can be found below;

Change your website content

By making sure that all content is served via a secure connection, the problem can be solved completely serverside. This requires all HTTPS pages need to contain secure URL's, so all items need to be loaded via HTTPS. You can do this as follows;

1. Make use of a network sniffer that supports HTTPS, and has the ability to show which are being loaded from cache. HttpWatch is such an example.
2. Navigate to the webpage to makes the message occur and have the browser display the mixed-content.
3. Analyze the results from the sniffer, to decect items that were loaded over HTTP. Every URL should start with HTTPS, correct those that do not.
4. Try reloading the website via Shift-Refresh, it could be that certain content was loaded from cache.

JavaScript as culprit

These alert can also be caused by snippets of JavaScript, where a common used technique is the source of this issue: // Causes a warning about mixed content in IE
document.write("<script id="__ie_onload" src="javascript:void(0)"></script>");
document.getElementById("__ie_onload").onreadystatechange = function()
{

if (this.readyState == "complete") domReady();

};

The following workaround emulates the DOMContentLoaded event in IE. The error is the result of the javascript: protocol being used, even while there is no actual file downloaded.

We can solve this issue by using the //: pre-fix for the src-attribute like we do for instance on jQuery and prototype. This results in an (innocent) errormessage in HttpWatch, but it does resolve the rror about mixed content:

// Solves a warning about mixed content in IE
document.write("<script id="__ie_onload" src="//:"></script>");
document.getElementById("__ie_onload").onreadystatechange = function()
{

if (this.readyState == "complete") domReady();

};