I’m sure you’ve come across IE7’s warning “This page contains both secure and nonsecure items. Do you want to display the nonsecure items?” Or IE’s more recent warning “Do you want to view only the page content that was delivered securely?” Other browsers have similar messages, which will rightly unnerve cautious internet users.
These warnings are the result of the page being secured, delivered over HTTPS, but some of the page’s resources being delivered using HTTP. It’s a simple thing to overlook if you have a site that has both secure and unsecured areas, but share master pages, or other code that might link to JavaScript, CSS, and image files.
Thankfully there are a couple of really simple solutions:
Use relative paths
In your link to the resource, be it an src attribute in HTML or a url in CSS, you can use a relative path, which will automatically take on the same protocol as the current page.
For example, if you were linking to a background image from your CSS, you could use background-image: url(images/bg.png); which would look for an images directory in the same folder as your CSS file and find bg.png in there.
Omit the protocol
Technically this is simply another type of relative path, only this time you leave off just the http or https from the beginning of the path.
For example, if you were linking to Google’s Content Delivery Network to get your copy of jQuery then you could use <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> and the browser will fetch the script using whatever protocol the page is using.