Knowledgebase: Site Design

Why am I getting an error that says "page contains both secure and nonsecure items" on my store?

 

This error is given by most web browsers when you are entering a site in secure HTTPS mode, but the page you are viewing contains one or more elements such as images, JavaScript files and/or style sheets that are being pulled from a non-secure location.

For example, let's say you've added an image to your site's header or footer. However, you mistakenly reference the image with its full path like this.

<img src="http://www.yourdomain.com/assets/images/image-name.jpg" />

When you access your site's secure HTTPS mode and this image is referenced, your browser may give you the security warning since the image is unsecured.

To fix this, simply reference the image in a relative path like this:

<img src="assets/images/image-name.jpg" />

Be aware however that there may be more than one image path that needs to be fixed in this fashion.

The easiest way to troubleshoot this is to do the following:

  1. Go to your store in secure mode to receive the warning but click YES (as in "Yes you want to see non-secure items")

Note:
When accessing your store in HTTPS mode, be sure to do it organically by adding products to the cart store and proceeding to the store's naturally occurring secure areas like the checkout or sign in pages. This way you're not needlessly troubleshooting a page that wouldn't normally ever be in secure mode, such as the home page.

  1. In your browser, right-click your mouse and select Source or View Source
  2. A tab will open up with the source html code of your page. Perform a CTRL-F search for: "http://"
  3. Any time you see "src='http://[path]" it will indicate a file path that should be changed to a relative path.

Of course this fix only really applies to internal images on your site. Be aware that the warning could also be in reference to other types of files like javascript, css file(s) or even externally hosted images.

For off-site images and scripts you can simply change them to a protocol relative link by removing the protocol from the address. So for example <script src=http://www.google.com/script> is changed to <script src=//www.google.com/script> which will work the same way as an internal relative link. The script or image will still load, and it will load with the appropriate protocol (http or https).

Important
Although removing the protocol on off-site elements should work, there's no guarantee that it will work. The external page from which the element is hosted may not be available securely so there's a slight chance these cannot be used. In such cases, it's best to copy the element (with permission, of course) and upload it to your site so that it can be served locally.

Additionally, if you have embedded elements like videos on your store layout, you will need to make changes to the element's embed code so that the warning doesn't come up.

It may also help to use this web resource to check your site for unsecure elements as they come up - http://www.whynopadlock.com/

Tip
Looking to convert your whole store to HTTPS? Why not let us do it for you? Click here for more information.


Help Desk Software by Kayako fusion