Insecure Content

Summary

Loading a WordPress/Shopp website over HTTPS with a valid SSL certificate results in “insecure content”, “non-secure content”, “partially encrypted” or “mixed content” warnings in different browsers.

Errors

Chrome

Error displays when hovering over the crossed out https in the location bar.

Your connection to website.com is encrypted with 256-bit encryption. However, this page includes other resources which are not secure. These resources can be viewed by others while in transit, and can be modified by an attacker to change the behavior of the page.

Safari

No secure lock icon appears in the top right of the browser window title bar. The error message only appears in the error console.

The page at https://website.com/ displayed insecure content from http://website.com/images/image.jpg.

Firefox

Clicking the website icon shown on the left-side of the location bar will display the error.

Your connection to this site is only partially encrypted, and does not prevent eavesdropping.

Clicking the More Information button of the connection details popup shows the following Technical Details

Connection Partially Encrypted

Parts of the page you are viewing were not encrypted before being transmitted over the Internet. Information sent over the Internet without encryption can be seen by other people while it is in transit.

Internet Explorer

Internet Explorer 9 displays a popup dialog at the bottom of the page.

Only secure content is displayed.

Internet Explorer 8 displayed a popup alert.

Security Warning

Do you want to view only the webpage content that was delivered securely?

This webpage contains content that will not be delivered using a secure HTTPS connection, which could compromise the security of the entire webpage.

Opera

Clicking the Page Information icon button show to the left of the location bar displays a popup with the error.

Insecure Connection

Clicking the More Details button shows a new window with in-depth Security Information.

Site not secure

The connection to website.com is not secure. Do not use it to submit sensitive information.

The server attempted to apply security measures, but failed.

Known Causes

Note that the Shopp Support Team cannot fix insecure content issues in any third-party plugins or themes.

The issue is caused when loading a resource referenced with an insecure (HTTP) connection within a secure (HTTPS) page. When the page is loaded with HTTPS, other page assets such as images, stylesheets and Javascript files are loaded over HTTP because of the way they are referenced in the markup of the page.

In WordPress websites, this is typically a result of third-party plugins or the active theme referencing the resources improperly. Usually, an improper reference is one that is hardcoded into the source code of template or plugin files. The hardcoded references are not able to be dynamically filtered or rewritten when the site switched from insecure (HTTP) mode to secure (HTTPS) mode.

Possible Solutions

To address insecure content issues, the insecure references need to be identified and updated to either HTTPS connection all the time or use a built-in WordPress functions to build the URL reference so that the URL will dynamically and automatically switch to HTTPS as needed.

To identify insecure content:

  1. Connect to the website using HTTPS
  2. Use the web browser error console to find resources that are loading over HTTP

Each browser has differences with how to access the error console. In some browsers a web inspector allows you to inspect the network connections to directly see how all resources on the page are being loaded. Safari/Chrome both use the WebKit Web Inspector. Firefox has a built-in inspector or you can use the popular Firebug extension.

Plugin Solutions

There are several free (free cost and free speech) plugins available for download from the WordPress plugin repository that can fix the HTTP references by automatically rewriting the to HTTPs.

These plugins can solve a great many insecure resource reference problems, including some hardcoded references but it may not be able to fix them all. Some hardcoded references may appear outside of any filterable content and, as a result, cannot be rewritten by a plugin. To fix the remaining issues you will need to follow the manual fix approach outlined below.

Manually Fixing Insecure References

After identifying which resources are insecure, the most difficult part of the process is locating where the resources are called. This is made more difficult when running many different plugins or a theme developed by a third-party. One approach to simplify the process is to strip the site down to basics and address insecure content issues as you bring the WordPress install back to running everything again, step-by-step. This means where possible, deactivate every plugin you can and switch the theme back to a WordPress default theme (Twenty Ten, Twenty Eleven, Twenty Twelve).

Once you have the site back to a default state, you need to verify that the site loads in HTTPS with no mixed content errors to establish the baseline of a secure website. Next, activate the theme and to identify any insecure resources that are being referenced from the theme and only from the theme.

You’ll then need to locate in the theme where the insecure content is referenced and fix it. See the section below on fixing the references to different resource types.

Once you have fixed all of the theme resources, you can move on to addressing plugin problems. Following the same approach as you did fixing the theme, activate one plugin at a time and load the site over HTTPS to find new insecure resource references introduced by the newly activated plugin. This approach helps you isolate where to look to locate the insecure content efficiently. It isn’t always possible to do this on live sites which makes the job of locating the offending plugin(s) much harder.

Fixing Image References

Image references can occur both in theme template files, stylesheets and even in WordPress content (posts and pages). The post/page content can be taken care of by a plugin solution automatically, but hardcoded references in the template files that use a full http://website.com/images/image.jpg path will not (in most cases) be filterable by plugins. In those cases it is best to use a WordPress call to reference the URL for the image in the theme.

<img src="<?php bloginfo('template_directory'); ?>/images/logo.jpg" alt="Company Logo" width="128" height="128" />

Base URL

Another approach is to set a base URL for the page that all relative URLs will use. The base URL is set inside the <head> elements found in the theme’s header.php template file.

<html>
<head>
    <base href="<?php bloginfo('template_directory'); ?>" />
</head>
<body>
    <img src="images/logo.jpg" alt="Company Logo" width="128" height="128" />
</body>
</html>

Fixing Stylesheet References

Stylesheets that are called using hardcoded <link/> elements are the usual culprit in this situation. In a typcial theme, most of these references can be found in these theme files:

  • header.php
  • functions.php

Advanced themes can spread these calls out in include() files that make locating them much more difficult. In that case the only thing you can do is use a mass find tool, such as Unix command-line grep if available or an IDE that allows cross-file searching.

All stylesheet references should be removed and instead added to the functions.php or an include file of functions.php using the built-in WordPress wp_enqueue_style in a manner similar to the example below.

<?php
function enqueue_theme_styles () {
wp_enqueue_style('my-styles',get_template_directory_uri().'/my-styles.css',false,'1.0','screen');
}
add_action('init','enqueue_theme_styles');
?>

Details about how to use wp_enqueue_style can be found on the WordPress Codex

Fixing Script References

Script references that are hardcoded similar to stylesheets in the theme’s header.php or functions.php file will also cause mixed content issues. Again, for advanced themes you may have to us a cross-file search tool such as those found in an IDE, project-aware text editor or Unix command-line tool such as grep.

Once located all scripts references in <script src="path/to/script.js"> should be removed and instead set up in the functions.php file of the active theme using the WordPress wp_enqueue_script call using an approach similar to the example below.

<?php
function enqueue_theme_scripts () {
wp_enqueue_script('my-styles',get_template_directory_uri().'/fancybox.js',false,'1.0','screen');
}
add_action('init','enqueue_theme_scripts');
?>

See Also

Insecure Content
  • 0.00 / 5 5
  1. Hi,

    The insecure content affecting my SSL page comes from html that is typed into the text widget and produces a contact form in my sidebar. The html is for AWeber and shows in the chrome console view as:

    he page at https://dolangaddilending.com/freeratequote/ displayed insecure content from http://www.aweber.com/images/forms/modern/gray/button.png.
    The page at https://dolangaddilending.com/freeratequote/ displayed insecure content from http://forms.aweber.com/form/displays.htm?id=jEycrIwMHGyM.

    Any way to make it so these could work and the page would be fully secure?

    Thanks!
    Chris

    January 11th   #

You must be logged in to post a comment.

© Ingenesis Limited. Shopp™ is a registered trademark of Ingenesis Limited.

Skip to toolbar