Fix Non-SSL Elements on SSL Page

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Solution #2)
 
Line 120: Line 120:
  
 
If modifying your .htaccess file causes errors, contact your hosting company. Send them the modification you are trying to make and details about the problems that you had. Hopefully they can help you modify the change to fit their hosting requirements.
 
If modifying your .htaccess file causes errors, contact your hosting company. Send them the modification you are trying to make and details about the problems that you had. Hopefully they can help you modify the change to fit their hosting requirements.
 +
 +
 +
[[Category:Advanced Topics]]

Latest revision as of 12:06, January 14, 2011

Contents

Problem

In order to support a shopping cart or some other WordPress plugin that requires or recommends running the site with an SSL certificate, you added a SSL certificate to your site. You test your site by loading "https://domain.com/" (where "domain.com" is your site's domain), and things look good at first.

You then notice that some browsers aren't too happy with you.

Firefox pops up a dialog box saying: "You have requested an encrypted page that contains some unencrypted information. Information that you see or enter on this page could easily be read by a third party."

Chrome shows a warning symbol over the SSL padlock and says: "Your connection to domain.com is encrypted with 256-bit encryption. However, this page includes other resources which are not secure."

Internet Explorer 8 has a "Security Warning" dialog box that says: "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."

Cause

This issue is caused by having an image, CSS, JS, or other similar file that is loaded as part of the site that does not load by using the SSL connection. Here's an example of what I mean.

You have your site at "domain.com", and you just loaded your site by going to "https://domain.com/". When this issue happens, it means at least one element on the page is loading with a URL of "http://domain.com/image.jpg". Since this "image.jpg" file is loading with "http://" instead of "https://", it will not have the data transfer encrypted. Since not all of the elements on the page are sent via an encrypted channel, your browser will notify you of this as it may be an issue if you rely on having all the information encrypted.

Unfortunately, WordPress can cause this issue by itself as it won't automatically try to ensure that a secure page request contains only secure page elements. In particular, if you upload an image when in the WordPress back-end when not on a secure connection, that image will always be displayed using an insecure URL.

Solution #1

The best way to address this issue in my opinion (this is Chris Jean) is to force the site to always use SSL. This means that when you are administering your site -- sending your user name and password to log in, changing plugin configurations, updating passwords, saving PayPal configurations, etc -- this data is always encrypted (it isn't by default). In addition, it means that when users are browsing your site, any potentially-sensitive information stored in cookies will also be encrypted.

In other words, by encrypting everything on the site, you are assured that sensitive information that your server sends or a user sends to the server will always be secure. When you run a site with a store or other system where privacy is very important, having too much security is always better than not enough.

There are two steps getting your site to have complete encryption: update WordPress to always use secure links and modify the .htaccess file to force an SSL connection.

Updating WordPress Settings

It is important that you do this step first. Doing these steps out of order can cause problems.

Log into your site and go to the "General Settings" page (Settings > General). Update both the "WordPress address" and "Site address" URLs to use the "https://" protocol rather than "http://".

For example:

Wordpress-address-update-ssl.png

Make sure that you click the "Save Changes" button at the bottom of the screen. After making this change, you will probably need to log in again. This is normal.

Updating an Existing .htaccess File

In your sites main directory, such as "/home/domain.com/public_html" or "/home/cpaneluser/public_html/domain", you should find a ".htaccess" file. If you don't, skip to the next section.

Open up the .htaccess file and find a section that looks like the following.

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L] 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule . /index.php [L] 
</IfModule>

# END WordPress

Update this section to include the two new lines added below.

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On

RewriteCond %{SERVER_PORT} !^443$
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

RewriteBase /
RewriteRule ^index\.php$ - [L] 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule . /index.php [L] 
</IfModule>

# END WordPress

Test this change to make sure that your site still works properly. If it does not, remove the change, and see the section below on troubleshooting.

You should now be able to have your site automatically redirect from "http://domain.com/" to the secure "https://domain.com/". Your site will now force all connections to be secure.

Add a New .htaccess File

If you already updated your .htaccess file, skip this section.

If your site does not have a .htaccess file, one will have to be created. This file will reside in your site's main directory, such as "/home/domain.com/public_html" or "/home/cpaneluser/public_html/domain".

Create a new .htaccess file in your site's main directory with the following contents.

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
</IfModule>

# END WordPress

Once you have this file in place in your site's main directory, test to make sure that your site still works properly. If it does not, remove the new .htaccess file, and see the section below on troubleshooting.

You should now be able to have your site automatically redirect from "http://domain.com/" to the secure "https://domain.com/". Your site will now force all connections to be secure.

Solution #2

Another solution is to add the following plugin to your site. While this is somewhat easier, it adds processing overhead and more increased memory consumption to each site load. This means that your site will be slightly slower and will consume more server resources.

Beyond the performance limitation, this code does nothing to protect your login details or the data you send while administering the site.

Plugin ZIP: Fix SSL/Non-SSL Links

With this plugin active, two things will happen on all page loads:

  1. If the page request is secure, all instances of "http://domain.com/" will be replaced with "https://domain.com/" where "domain.com" is the site's address.
  2. If the page request is note secure, all instances of "https://domain.com/" will be replaced with "http://domain.com/" where "domain.com" is the site's address.

In other words, this plugin will force all image, CSS, and JS file requests inside the HTML page produced by WordPress to have a protocol ("http://" or "https://") that matches the page request's protocol.

Troubleshooting

Neither solution will modify links to content outside the site. So, if you or another plugin link to a remote jQuery JS file, image, etc using an insecure link, this plugin cannot fix this issue as it does not know if a secure version exists. These issues will have be dealt with by modifying your custom plugin or theme code or contacting the developer that made the code to ask for a fix.

If modifying your .htaccess file causes errors, contact your hosting company. Send them the modification you are trying to make and details about the problems that you had. Hopefully they can help you modify the change to fit their hosting requirements.

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox