Apple

December 10, 2014April 14, 2015

WordPress Security Hardening

WordPress is an Open Source project that’s maintained by hundreds of people all over the world. Started in 2003 it has grown to be the largest self-hosted blogging tool in the world, used on millions of sites and seen by tens of millions of people every single day. Pretty amazing for something that started as a single bit of code and used by only a handful of individuals.

Security of the WordPress environment is extremely critical, considering the vast reach that WordPress has garnered today and the number of people who depend on it. That is why the open source community supporting WordPress takes security so seriously. And you should too!

What is Security?

When it comes to computers, the concept of security is somewhat of an oxymoron. As long as a computer is turned on, someone, somewhere, somehow is going to try to break into it. In fact, the computer doesn’t even have to have any important information stored on it at all. If it’s on a network, it’s useful to someone and that’s why he or she will try to compromise it.

So at the end of the day a secure computing environment provides a trusted environment that protects the privacy, integrity, and availability of the software and hardware being accessed by the end user. When it comes to WordPress this encompasses the front-end webpages, the core environment files, and the backend databases used to deliver a WordPress website.

Security Vulnerabilities

There are two main vulnerabilities that need to be secured: hardware and software. Other than your own personal computer there’s not much you can do when it comes to securing hardware, unless of course you own the servers, routers, and networks that your WordPress environment runs on. In most cases you will have to rely on your web host and broadband providers to secure the core pieces of this infrastructure.

Good hosting providers will backup your site and do their best to provide a secure shared environment, so that nobody else that’s using the same hardware that you’re on will be able to infect our environment. Two web hosts that we recommend are HostGator and HostMonster.

Don’t forget that we are an affiliate for both of these services and if you haven’t read it yet make sure you read our Affiliate Relationship Disclaimer just in case you use one of our recommendations.

Although your service providers will also have some key software to secure across all the hardware supporting you, your main responsibility is making sure your WordPress environment is secure. So lets look at some of the key things that you control when it comes to securing your WordPress environment.

Level One Security

The following security steps are pretty basic. They are easy to implement and don’t required you to do anything outside of WordPress itself. Doing these are a minimum when it comes to security and taking just these few simple steps will help push intruders away from your site and towards someone else’s.

1. Applying WordPress Updates

The easiest way to keep your WordPress environment secure is to make sure you’re applying WordPress updates in a timely fashion. WordPress is no different than any other software package…it has bugs, bad guys exploit the bugs, good guys patch the bugs, and the cycle continues.

Prior to version 3.7 end users had to manually apply WordPress updates on their own, which many administrators never got to. However, automatic updates were introduced in WordPress version 3.7 that improved the overall global WordPress install base by enabling the direct push of update patches to installed environments.

NOTE: by default only minor point releases (3.7.1, 3.7.2, etc.) are applied automatically. Major release updates (4.0, 5.0, etc.) still need to be manually applied.

2. Theme and Plugin Updates

It’s no secret that themes and plugins are what make WordPress WordPress. If it weren’t for these two features, most WordPress sites would look identical and lots of cool features wouldn’t exists. Therefore, it’s extremely critical that any themes and plugins you purchase (or get for free) are acquired from reputable sources.

The last thing you want to do is install a theme or plugin that undoes all the other security steps you take to protect your visitors and your site. Just like WordPress itself, make sure you’re always applying the latest theme and plugin updates provided by your theme and plugin vendors.

There’s plenty of free stuff out there, just make sure the free stuff is trustworthy and not going to cause you more headaches down the road.

3. Strong Usernames

One of the easiest ways to keep the bad guys out of your site and moving on to the next site is to use strong usernames in place of default usernames. When doing a basic WordPress install a default administrative user named “Admin” is created. Using this or “Administrator” is not what you want to do.

When creating admin accounts you want to avoid usernames that are easily guessed like the two mentioned above or Webmaster, or your name, company name, etc. If you really want admin in the username of the account, then create something like “Admin_Acme” or “Admin_JD” for John Doe’s admin account.

4. Strong Passwords

Another easy way to keep the bad guys out of your site and moving on to the next site is to use strong passwords. And by strong password we don’t mean Happy123. Strong passwords are things that are hard to guess and hard to hack by brute force.

Using numeric and alphabetic (upper and lower case) letters, special characters, no repeating characters, minimum lengths of 10-12 characters, nothing related to your name, birthday, company, dictionary words (in any language) is starting to put you in the realm of strong passwords. And if this makes it too hard for you to come up with a password, then try the old phrase technique.

Take a phrase like “The red fox runs in the forest to the river every Sunday afternoon.” If you take the first letter of each word, alternate each character between upper and lower case, and then change a couple letters to special characters you can come up with a password like: TrFrItF2tRe$A – which will be pretty hard to guess or attach by brute force.

5. Modify Your WordPress Nickname

Each username you create in WordPress is given a nickname and by default the nickname will be the same as the username. Unfortunately this can open up a security hole, because the nickname is used as the author tag on post that you write. Hackers use scrapper programs to roam the web looking for WordPress author tags, which they then use as the login username to your site in a brute force password attack.

Make sure you update each users profile and modify your WordPress Nickname to something different than the username. And when doing so make sure you select the “Display name publicly as” option. This option will make sure the displayed author tag on your posts is not your username.

6. Limit Login Attempts

One of the easiest security hacks to prevent against a live site is a brute force attack. This is where an attacker uses a known username and then just tries password after password to access the account. Unfortunately, limiting login attempts is often overlooked…just ask Apple who not long ago had a number of celebrity iCloud accounts hacked in this manner.

The best way to prevent a brute force attack is to use a plugin that’s designed to do just this…limit login attempts. One we use is called Login Lockdown by Bad Neighborhood. In addition to doing what it’s designed to do, it has a nice feature that allows you to “Mask Login Errors.” When you set this feature to “Yes” WordPress will generate a more generic error message when incorrect login information is entered; you won’t be told that the password only is in error when a valid username is entered. This makes it a little harder for an attacker to determine if they have a valid username or not.

NOTE: if you’re really paranoid and want to implement even more security on your website, then you’ll want to install the plugin Wordfence Security. Not only does this plugin allow you to control many more security related options on your site, it also has an interesting Live Traffic option that allows you to see who’s attacking your site.

7. Schedule Regular Backups

If you do nothing else, not even the basic security steps, then the most important thing that you must do is have a solid backup strategy; although this will always be suspect, if you don’t do the basic stuff too. There are plenty of plugins that do this, so find one you like and use it to schedule regular backups.

Also, don’t just rely on your web hosting service provide to backup your WordPress environment. Having them help you recover is not only harder, but will take much longer as well. Instead, schedule regular WordPress backups using the plugin of your choice and make sure you always keep your backup files in a secure location. And by regular we mean hourly, daily, weekly, or monthly – it really all depends on how often your content is updated.

By the way, a secure location is NOT the same location where your WordPress environment is installed. A more secure environment, for starters, is a directory on your web host outside your WordPress environment, while an even more secure environment is on a totally different web host all together. A secure cloud environment, your own PC, or a stand-alone storage drive can provide you with a simple offsite storage solution.

Level Two Security

Up until this point we have been addressing security within WordPress itself. Now we’re going to tackle some things outside of WordPress. These next set of tasks are not that difficult to implement and will go along way in security your setup. Don’t worry if you’re not comfortable with editing files on your server, just make sure you backup any files before you edit them and you’ll have a quick recovery plan in place.

8. File Permissions

It’s important to have all the files within your WordPress environment secured properly and the easiest way to do this is with file permissions. At a minimum the security permissions of all files from your root level on down should be set to 644 and all folders should be set to 755.

When it comes to file permissions it’s best to secure things as much as possible and only when you have problems should you reduce the security permissions of a file or directory. Also, be careful and suspicious of any themes or plugins that require write access to core files.

9. Basic .htaccess File Security

The .htaccess file is a directory-level configuration file that is supported by most all web servers. Its main purpose is to allow for decentralized management of web server configuration.

There are a couple of things that we are going to secure via some basic .htaccess file security and we will need to Copy/Paste these parameters either before or after the # BEGIN and # END WordPress tags:

# Begin Security Updates: copy/paste from here down

# BLOCK Directory Access
Options -Indexes

# STOP Access to Sensitive Files
# BLOCK wp-config.php File Access
<files wp-config.php>
order allow,deny
deny from all
</files>

# BLOCK Include-only File Access
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^wp-admin/includes/ – [F,L]
RewriteRule !^wp-includes/ – [S=3]
RewriteRule ^wp-includes/[^/]+\.php$ – [F,L]
RewriteRule ^wp-includes/js/tinymce/langs/.+\.php – [F,L]
RewriteRule ^wp-includes/theme-compat/ – [F,L]
</IfModule>

# End Security Updates: copy/paste from here up

The first BLOCK section will prevent people from browsing directories on your server and seeing files that they shouldn’t. The second BLOCK section will prevent people from accessing your wp.config.php file. And the third BLOCK section will secure your “wp-includes” from unwanted access. NOTE: on Multisite environments you will need to remove the third RewriteRule for things to function properly, however that will reduce your overall security a little.

NOTE: the .htaccess file is already protected and forbidden to browsers, as long as, the file is named properly. To be sure, double check that the file is named “.htaccess” and not “htaccess” or “htaccess.txt”. The file must start with a dot.

**10. Secure Your wp-config.php File**

When it comes securing your wp-config.php file there are a couple of schools of thought on this one. Some people believe that moving the wp-config.php has minimal security benefits and, if not done properly, it will actually introduce serious security vulnerabilities to your site. Others disagree with this concept, including us, and prefer to NOT move the wp-confi.g.php file.

Instead we prefer to implement the second BLOCK concept in the .htaccess file as mentioned in Step 9 above. Implementing this method will secure your wp-config.php file and deny access to anyone surfing for the file. This method will also limit any additional security vulnerabilities that might arise by moving the file to a different location on your server.

11. Changing Your Database Table Prefix

This change is best done when you are first creating a new WordPress environment. Although it can be done to a live site, it’s much riskier and you can really mess things up if you make a mistake. We won’t tell you how to change a live site here, but if you need to just drop our support team an email and we’ll send you some notes on how to do it…totally at your own risk of course!

When installing a new WordPress environment the prefix “wp_” will be used for your default database table_prefix. Since there are plenty of automated attack tools out there looking for this default setting, it’s best if you change it to something else when you performing your install. It doesn’t really matter what you change it to, just change it to something other than the default.

12. Disable File Editing

By default the WordPress Dashboard allows users with administrator privilege to edit standard WordPress, Theme, and Plugin PHP files. An attacker who is able to login to a site will often use this feature as an attack method, since it allows code execution.

In order to disable file editing from the WordPress Dashboard the following code can be entered into the wp-config.php file:

define(‘DISALLOW_FILE_EDIT’, true);

Be aware that since you won’t be able to edit files through the WordPress Dashboard anymore, if the need does arise to edit files, then your best bet will be to do it through your CPANEL File Manager.

**13. Delete the readme.html File**

By default WordPress creates a readme.html file in the root directory of your site install. Unfortunately this file can provide some useful information to snooping eyes about the version of WordPress you’re running. After successfully installing WordPress just go ahead and delete the readme.html file. And you may want to delete any similar files that get installed by themes and plugins too.

NOTE: it’s possible that this file gets recreated when you update your version of WordPress, so if you do not want to keep checking for this file and deleting it over and over, you can add the following to your .htaccess file. By the way, not only will the below code prevent people from accessing the standard WordPress readme.html file, it will prevent users from accessing any readme.html file on your server… some plugins may have these files as well, so this is a good thing to do.

# Stop access to sensitive files
# BLOCK readme.html File(s) Access
<Files readme.html>
Order Allow,Deny
Deny from all
Satisfy all
</Files>

You can add this after you # BLOCK Directory Access and before you # BLOCK wp-config.php File Access.

14. Limit Bot Crawling

Although this doesn’t really provide you any real security, we’re still going to list it…just so we don’t have 13 Security Checklist Items for those who are superstitious. Google bot and other search engine bots crawl the web indexing everything they come across, that’s how they collect their content so they can provide all those search results when you go looking for things.

If you want to limit bot crawling and the directories that search bots have access to you can create a robots.txt file and place it in the root directory of your site. This file should contain at a minimum:

User-agent: *

Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /dev/
Disallow: /test/

Note: the last two entries are examples of how to prevent bots from accessing directories with the name “dev” and “test” under the root directory. If you don’t have these directories on your site, then you don’t need these lines in your robots.txt file.

Remember that this isn’t providing any real security. Although real search engine bots like Googlebot will abide by the rules you include in your robots.txt file, not all bots will and the bad ones will search directories that you tell them not to anyway.

When All is Said and Done

At the end of the day there really isn’t much you can do to prevent someone from hacking your system. Given enough time and resources, those who are determined will find away in. As the old saying goes…”the only secure computer is the one not turned on and buried six feet under ground.” Of course it’s also not a very useful computer either.

On the other hand, if you took the time to read this post and then spent another hour or two at the very most to implement everything we told you, then you’ll be 99% more secure than all your friends who are running WordPress and plenty of other people out there too.

There’s plenty more WordPress security hardening that you can do, and just doing a little goes a long way to make your would be attacker go looking for an easier site to hack.

June 12, 2014June 13, 2014

HTML5 Video Example

Adding HTML5 Video to your website is now easier than ever. Stop wasting time with Flash videos and convert all the videos on your website to use HTML5. With more and more individuals accessing content from mobile devices, specifically Apple products, you don’t want to alienate those visitors and have them leave your site because their device can’t render your video content properly.

Our HTML5 video example below will show you all you need to know to add rich video content to your website in a few simple steps that any visitor will be able to watch, regardless of their device type.

Web Video History

In the early days, actually not so long ago, there was no standard for showing videos/movies on web pages. In fact before HTML5 came along, most videos could only be played with a plug-in (like flash). And for the longest time different browsers supported different plug-ins, making it even a bigger pain to present your videos to all visitors.

Fortunately HTML5 came along and defined a new element which specifies a standard way to embed a video or movie on a web page. Using the <video> element, web developers can now easily add videos to their website.

Checkout JWPLAYER’s State of HTML5 Video report for more details about HTML5; it’s a great resource that shows you not only which browsers support the HTML5 video standard, but also some of the key features of the standard that the browsers support too.

HTML5 Video Example

Below is an HTML5 video example and the code used to render it on this page using the video element:

<video width="360" height="202" controls 
              poster="https://millionairesuccessnetwork.com/wp-content/uploads/MSN-HTML5-Promo.png">
    <source src="https://millionairesuccessnetwork.com/wp-content/uploads/MSN-HTML5-Promo.webm" 
                    type="video/webm" width="360" height="202" />
    <source src="https://millionairesuccessnetwork.com/wp-content/uploads/MSN-HTML5-Promo.mp4" 
                    type="video/mp4" width="360" height="202" />
    <!-- fallback -->
        Your browser does not support HTML5 video.
</video>

Getting Your HTML5 Code To Work

Even if you’re not an HTML expert it’s pretty easy to follow this example, and we’ll break it down for you just in case you really are an HTML novice and are clueless when it comes to coding.

Video Element: controls the setup of your video and there are four parameters that we reference: WIDTH, HEIGHT, CONTROLS, and POSTER. These are not required parameters, however, if height and width attributes are set the space required for your video is reserved when the page is loaded. If you do not set these attributes the browser does not know the size of the video it’s loading and cannot reserve the appropriate space on the page for the video while the page loads, thereby causing the page layout to change while the video loads. The controls attribute adds video controls, like play, pause, and volume, to your video player. The poster attribute controls the image displayed where your video will be shown on your page when the page is loaded. If you’ve ever worked with YouTube videos, you’re probably familiar with how your video cover images are somewhat limited. Using this attribute, especially if you’re referencing a YouTube video, gives you complete control of what video cover is shown when your page loads. By the way, make sure your poster image width and height are sized the same as your video.
Source Element: controls the different video formats that your page supports. In the early days of HMTL5 video support you had to specify a bunch of video formats, basically one for each browser type. Now most browsers support the MP4 format, however, we still include the WEBM source format for older versions of Chrome and Firefox. The key parameters of this element are the SRC, TYPE, WIDTH, and HEIGHT. The src parameter contains the URL path that points to the actual video file, which does not have to be on our server. The type parameter specifies the MIME video format for this source element and it must match the file referenced in the src attribute. Valid MIME types are MP4, WEBM, and OGG. Make sure you always include the type attribute in the source element, otherwise the browser of the person visiting your site will need to load each video file until it can find a type that it supports, which can be really annoying when you have large videos!
Text Element: although not a true element, you should include some text after your last source element and before the closing video tag about non-HTML5 support. This text will be displayed by browsers that do not support the HTML5 video standard. Note: in the example above the <!– fallback –> text is just a comment (used for reference) and is not required.

That’s pretty much it or at least the coding basics that most individuals need to get the job of migrating their video code to HTML5 done. However, there’s plenty more to learn when it comes to the HTML5 video standard, so if you want to learn more check out any of these great resources: Mozilla Developer Network, w3schools (a great resource for when you want to learn some HTML feature you can’t quite figure out), and of course Wikipedia. Each of these resources can teach you tons of other little tricks that you can use to enhance your HTML5 video implementations.

HTML5 Video Gets Complicated

Well not really! As you can see from the example above, writing the code to display a video on a web page in HTML5 is pretty easy. The only complicated part of the process may be creating the different MIME video formats you need for all the different browsers. And this really isn’t that difficult either.

If you create your own videos, then you probably already know how to created all the MIME video formats that HTML5 supports. If you don’t, creating the formats you need from the format you already have is a simple as downloading and installing some video conversion software. The following video conversion software items are all FREE and have versions that run on MAC and PC: FLV Crunch, HandBrake, and Miro Video Converter. Of course there are other products out there, but these are ones we use, we know they work, have some pretty handy features, and did we mention they are all free!

HTML5 Video Summary

Adding video to your website that supports all visitors, whether they have a mobile device that supports flash or not, is easier than ever before and opens some amazing new possibilities for you. With more and more people watching video on the web, make sure your site supports anyone that comes to your site and from any device they use.

So if you’re sites not using the HTML5 Video Standard today, schedule some time to update your code and make sure your visitors are seeing what you want them to see.

PS – the above video was just a short sample taken from our Internet Marketing Untold What You Wish They Told You… But Didn’t product. If you haven’t already, go get your free copy of this report and find out “What they don’t want you to know!”

June 10, 2014June 13, 2014

Apple Touch Icon Customize Your Website For Apple Products

There are plenty of Apple mobile device users out there, so why not take an extra minute or two and add a little known customization to your website in the form of an Apple Touch Icon and make those visitors fell special. If you manage your website, this really is easier than it looks and it’s a customization that will make you standout above your competition.

What is an Apple Touch Icon?

Apple touch icons are basically favicons for Apple mobile devices and when set in your HTML it will be displayed when a user saves your web page to their home screen on any of their Apple mobile (iPad, iPhone, and iPod) devices.

Unfortunately Apple didn’t just use the already defined favicon standard and instead created their own short code to do this, thus you have to do a little work to setup this special icon. However, setting the Apple Touch Icon is relatively easy and a good idea, because by default iOS just saves a small thumbnail of your website as the application icon on a mobile device. These default thumbnails are often hard to identify and generally don’t look all that great.

Creating an Apple Touch Icon

To create an Apple touch icon you don’t have to be a professional graphic designer. As long as you have a good quality image that scales well and access to some simple image editing tools, you’ll be just fine. On the other hand, if you don’t already have an image that scales well or any image editing tools, then just hire a graphic designer to create your icon for you.

Begin by creating a square .png formatted graphic that is sized to 152 by 152 pixels. A 152-pixel image is the perfect size for the Apple iPad and will allow other Apple devices to properly resize the icon as needed. Although you can create individual icons specific to each of the Apple Mobile Device Types, we’ve found that creating one icon sized for the iPad works just fine. NOTE: if you love getting down and dirty and knowing all the little details about coding, checkout the iOS Human Interface Guidelines: Icon and Image Sizes or Safari Web Content Guide: Configuring Web Application articles.

By the way, when creating your icon, don’t worry about adding fancy rounded corners or glowing effects. Although some of these features were once key characteristics of Apple icons, some have since been deprecated and the device will automatically add those features that are still supported.

Implementing Your Apple Touch Icon

Implementing your Apple Touch Icon is very easy to do and requires one simple line of HTML code, unless of course you create individual touch icons for each device type. In that case you’ll need to add one line of HTML code for each of the images you create for the different devices; one more reason we use just one image for all device types.

Make sure you upload your Apple Touch Icon to your web server and if you name your image file “apple-touch-icon.png” the only changes you need to make to the above line of code are to replace “your-domain.com” with your domain name and “directory-path-to-image” with the directory path to your touch icon.

Testing Your Apple Touch Icon

Once you’ve created your Apple Touch Icon, uploaded the image to your website, and made the appropriate HTML code edits you’re readying to test your handy work. Grab your favorite Apple mobile device, launch Safari, and visit your website. After your website loads press the AirDrop icon (looks like a box with an arrow pointing out the top of it) at the bottom of Safari. AirDrop will open and you should see a scrolling list of icons in the bottom portion of the display; press the “Add to Home Screen” icon and that’s it.

If all goes well you should see your customized Apple Touch Icon displayed on your mobile device; it will probably be the last icon on the last page of icons on your device. Below is how our Millionaire Success Network Apple Touch Icon looks on an iPhone. Oh… it looks the same on an iPad too!

That’s it, simple and quick!

PS – this should work for your Android mobile devices visitors as well, with no other changes required. And if you have any problems getting the above code to work, try moving your Apple Touch Icon to the root directory of your web server and adjusting the image path accordingly.

Although this isn’t the same as having a dedicated iOS application, it does provide a better mobile user experience for visitors who routinely access your website from their mobile devices. More importantly it gives you complete control of how your brand is displayed to mobile users that bookmark your site to their home screen.

Being able to control every aspect of your brand and how it’s presented to your customers is priceless, so take an extra minute or two and add that Apple Touch Icon to your websites HTML code and take control of your branding today.