Problem

I get the error message, "This page contains both secure and nonsecure items" when I visit my webpage; or I get the error message, "Do you want to view only the webpage content that was delivered securely?" when I visit my webpage.

Solution

This problem arises when an https-enabled page includes http content.  Different browsers and browser versions provide varying security alerts.

Internet Explorer 6/Internet Explorer 7 - The error will prompt the user, "Do you want to display the nonsecure items?"  If the user clicks on yes, the SSL padlock will disappear meaning the website is no longer secure.  If the user clicks on no, the webpage will stay secure, however the element that is being brought into the webpage that is unsecured may not display properly (ie. an image or video may not display).


Error message you receive in IE6 or IE7 when there are nonsecure items present.

Internet Explorer 8 - IE8 acts in reverse to IE7 and IE6.  When the user is prompted, "Do you want to view only the webpage content that was delivered securely?" if you click on Yes this time, the webpage will still stay secure and the element that is unsecured will not be displayed.  If you select no, then the webpage will display in it's entirety unsecured and without a padlock.


Error message you receive in Internet Explorer 8 when there are nonsecure items present.

Internet Explorer 9 - IE9 does not display the mixed content by default.  You must click on the Show all content button at the bottom in order for IE9 to display the mixed content that is insecure.


Error message you receive in Internet Explorer 9 when there are nonsecure items present.

Firefox - Firefox will display the https:// in the address bar however it will not display the installed SSL certificate.  Instead, you will see a grey passport man (as seen below).


Error message you receive in Firefox when there are nonsecure items present.

Upon clicking on the More Information... button displayed above, you will receive the following message in Firefox:



Google Chrome - The padlock in Google Chrome contains a yellow 'caution' symbol that appears over the padlock.  Upon clicking on the padlock, you will receive the following message:


Error message you receive in Google Chrome when there are nonsecure items present.

This happens when some part of the webpage tries to load content from a nonsecured source of another webpage.  This content could be JavaScripts, images and/or even frames within the webpage.

Example:

If you look at the source code for a secure webpage (address bar contains https:// in the beginning), you might see something that says:

<img src=http://www.domain.com/image.gif alt=""/>

This tag in a secured website may cause the error message to display.  If you click on 'No', the website will still be secured, however the image may not display to keep the website secured.  When you are dealing with an entire frame or even the CSS (Cascading Style Sheet) being pulled from another place that is unsecured, clicking on 'No' will completely distort the webpage.  There are a few solutions to try when fixing this, however as the possibilities are endless, this article will only focus on the above string to give the reader an idea on what could be causing the issue.


Solution 1 - Change the links to https://

Whenever you see http:// in the source code, you should change it to https://.  This would make our above example look like:

<img src=https://www.domain.com/image.gif alt=""/>

This method however may not work if the webpage that the image is being loaded from does not have an SSL Certificate installed on it.  This method also loads the SSL images when the client is loading from a nonsecure page.  This will provide a longer processing load on both the client and the server meaning that solution 1 is not recommended for a high volume site.


Solution 2 - Change all the links to //

Instead of changing the source code from http:// to https://, change them to just //.

Our example would look like:

<img src="//www.domain.com/image.gif alt=""/>


Solution 3 - Make the links relative

Providing that all the images are located within the same domain, you can access them relatively, rather than absolutely.

Our example would be the look like:

<img src="image.gif alt=""/>

The image stated above will still need to be available on the other server in a secure manner.