Enhancing Magento Security – Best practices

After watching the recent panorama documentary on the recent TalkTalk hack, it made me wonder how vulnerable many of the Magento sites where and what can be done to tighten Magento’s security.

Many opensource platforms are often hacked for example WordPress is a regular culprit , though it’s not as widespread that the core code has vulnerabilities it’s usually a rogue plugin or one that hasn’t been updated, with WordPress’s built in automatic updating it has a bit more protection.

Magento doesn’t have such frequent easy updating but recently the Magento team have released a flurry of patches, in what seems to be either that they have woken up to the fact that Magento in it’s previous incarnation had many exploits or that retailers have fed back to Magento. Whatever the case like any opensource platform continual updates are required especially in an ecommerce environment.

Magento and other ecommerce systems will be a prime target for hackers, thousands of un-encrypted customer details and in most cases it’s in-practical to encrypt them so your left with the only option of tightening up server security and the application itself.

So what steps can you take to secure Magento?

Patch/Upgrade

Install the most up to date patches
http://magento.com/security-patch

As of writing there are around 15 patches for community edition, depending on which version you have installed.

https://www.magentocommerce.com/download

Alternatively upgrade Magento to the most current release, as it includes all current patches 1.9.2.2

Upgrade to the next version 2.0
Probably not viable for most retailers just yet

PCI Compliance

Any ecommerce should be PCI compliant even if your taking payments offsite it’s worth having a PCI scanner in place. For that I would recommend using Trustwave some PayPal integrations require it anyways.

This will scan your site for common exploits, you might be surprised by what it picks up.

Trustwave

https://www.trustwave.com

Strong SSL

Ensure your using a strong cipher suite and your webserver is set up to use the correct protocols.

SSL Rating

https://www.ssllabs.com/ssltest/

Run your site through SSL Labs for any recommendations, A or above rating is recommended.

Change the admin path

A simple yet effective change to move the /admin to somewhere else, edit your config xml including the following.

<admin>
<routers>
<adminhtml>
<args>
<frontName><![CDATA[admin]]></frontName>
</args>
</adminhtml>
</routers>
</admin>

If this isn’t an option as it can break some plugins, then request your server admin add (if not already installed) a rule to fail2ban to prevent attacks on the /admin folder.

Prevent access

To magento’s directories, see a complete list in the bottom example.

directly in the vhost (Apache):

LocationMatch ^/(app/|var/) >
    Require all denied

Nginx:

location ^~ /app/ { deny all; }
location ^~ /var/ { deny all; }

Alternatively you could return a 404

location /app/                { return 404; }
location /downloader/         { return 404; }
location /errors/             { return 404; }
location /media/              { return 404; }
location /assets/             { return 404; }
location /images/             { return 404; }
location /skin/               { return 404; }
location /includes/           { return 404; }
location /lib/                { return 404; }
location /media/downloadable/ { return 404; }
location /pkginfo/            { return 404; }
location /report/config.xml   { return 404; }
location /shell/              { return 404; }
location /var/                { return 404; }

Also make sure to include any external import/export tools e.g Magmi

Turn on SSL for the admin

secure

Ideally you should have your entire site as SSL, this can affect performance on lower end servers.

Use strong passwords

Simple but obvious, this is probably the single biggest threat. Make it easy to remember but hard to guess, a password generator might not be useful here unless you use a password manager. Ideally use two-factor authentication

Two factor auth

Through this extension: http://www.xtento.com/magento-extensions/two-factor-authentication-enhanced-admin-security.html

Restrict admin by IP

Ideally this would be better sitting in the apache/nginx config, but if you don’t have that kind of access or want GUI control there is a free module.

http://www.magentocommerce.com/magento-connect/et-ip-security.html

Use a more granular admin permission module

This allows you to control in a more detailed way what each admin user can do.

http://www.aitoc.com/en/magentomods_advanced_permissions.html

Even if it’s just you managing your site, you could have a master login and editor role, to limit the use of full access.

Advanced server side

More advanced server side implementations should include:

Install fail2ban

As mentioned above you can set it up to restrict the login attempts on /admin but more globally attacks on SSH and other services.

Use of hard/soft firewall

Any server should have a software firewall in place locking down ports that should not be open, ideally a hardware firewall gives more concrete protection.

Correct permissions on folders

Configuring which folders have read/write access ideally all should be read-only accept where required.

Anti virus installation

ClamAv or any other virus install a personal favourite on windows is ESET, it’s a worthy note you should have this on your personal/work machine’s too.

Code monitors

Use of products like CodeGaurd that alert you of code changes, there’s also sucuri, this would help spot simple iframe injections or other code injection attacks where the site is kept running with an unobtrusive line of malware injected into your index.php files or other index files.

DNS level protection

Use CloudFlare for DNS level blocking and DDoS protection.

Use a load balancer

Whilst not essential this can help prevent DDoS attacks and hide your main server IP, it also gives you lots of flexibility in changing/upgrading your server.

Change SSH port

This does cut out a lot of the attacks, there’s arguments for and against this as a hacker could easily find the port, but this will prevent the thousands of automated attacks.

Disable non secure FTP

It’s not enabled by default on most linux distro’s but if you have something like cPanel installed it may be.

Jail SFTP users & Jail Apache/Nginx

Effective in locking down what users can access, and possibly preventing further access to other parts of the system.

Remove .htaccess / disable AllowOverride and put the configuration directly in the vhost file. (Apache Only)

Moving the config further up the chain makes it harder for hackers to change the site configuration in combination with the jail it would be difficult for someone to make a change to the apache configuration for the site.

Disable Postfix and other mail services and use Mailgun/Mandrill instead

Recently a server I look after was compromised and was sending out spam emails via postfix. It’s best to disable these services unless you understand properly how to secure them. Mailgun and Mandrill both have limits in place that would prevent this kind of attack.

 

Frontend Development in CQ5

I’m new to using CQ5 in this instance version 5.5, as a frontend developer I found the software a little confusing at first, mainly in working in a VM development environment like below:

dev

 

As CQ5 is platform independent it can easily be set up on Ubuntu with Apache acting as a reverse proxy to your local content repository allowing you to preview the content through your shared folder. The above can be extended to include https and the author instance.

In short Apache passes any requests to etc/project* to your localhost e.g 8080 which is serving the shared folder and so serves up your local repo.

If you want to find out more about how the repository works in terms of folder structure etc there is some useful documentation here on Adobe’s site.

Once this is set up you can get on with developing again there’s some useful guides

Component Properties and structure

Component best practices

Developing on CQ 5.6

Widget docs

All available Xtype’s

Any starting point should be copying an existing component and playing around with the attributes and settings.

JSP is server side so there’s not really the prospect of trying out your jsp without simply adding it to your component, although I did come across http://zkfiddle.org/ which does work albeit a bit slow.

If you do get an error and your not in the component.jsp you need to undo your changes and then modify/save component.js to clear any cache.

Another niggle is the VM not shutting down properly, something I’m not aware of there being a fix, which gives you a nice blank page when you fire up the author or publisher. The only solution being copying over a new instance of your VM. I did read about the Lucene indexes getting corrupt but these take hours to re-compile so it’s not worth the time unless you where really stuck (there’s a good article here on that http://www.wemblog.com/2011/12/how-to-rebuild-index-in-cq5-wem.html) and that’s if that is indeed the error.

If you have any suggestion for the above please leave a comment.

Child products from parent ID by store

Child products from a parent ID by store

 $storeId = Mage::app()->getStore()->getStoreId();
        $coreResource = Mage::getSingleton('core/resource');
        $conn = $coreResource->getConnection('core_read');
        $query = "SELECT * FROM catalog_product_relation AS c
LEFT JOIN catalog_product_website AS w
ON c.parent_id = w.product_id
LEFT JOIN catalog_product_link AS l
ON l.product_id = w.product_id
WHERE c.child_id = $childId AND w.website_id = $storeId AND link_type_id = 4
GROUP BY parent_id";

Adding website/store filter to category product grid in Magento

It appears the Magento developers didn’t think this one through enitrely as this to me is something that should be there by standard. Not everyone has a multi-website set up and products that span two stores, yet that’s the very reason this kind of thing can be a pain to add on not just here but also in the main catalog view and in other views like reports.

website_filter

I am detailing this by editing core files, this is not the correct way and should be added via a module or local override, which in this case would be very little extra work,  but in essence the steps you need to take are modifying/overriding

Mage_Adminhtml_Block_Catalog_Category_Tab_Product

First find the function

_addColumnFilterToCollection

Add the following if statement at the top, this is checking for our column which we later add and looking up the website ID’s

 if ($column->getId() == 'website_id') {
            $this->getCollection()->joinField('websites',
                'catalog/product_website',
                'website_id',
                'product_id=entity_id',
                null,
                'left');
            return parent::_addColumnFilterToCollection($column);
        }

At the bottom of the function you need to modify the lines like so, to bring in the website names.

parent::_prepareCollection();
$this->getCollection()->addWebsiteNamesToResult();
return $this;

Next add a new function directly underneath the above, this is a custom column callback for our new column which we add next, which is simply a way of adding more criteria onto our $collection, in this case we add the store filter.

   protected function _websiteFilter($collection, $column)
    {

        if (!$value = $column->getFilter()->getValue()) {
            return $this;
        }

        $store = Mage::app()->getWebsite($value);
        $collection->addStoreFilter($value);

        return $this;
    }

Finally add the website column, with our custom filter callback

  if (!Mage::app()->isSingleStoreMode()) {
                         $this->addColumn('websites',
                                 array(
                                     'header'=> Mage::helper('catalog')->__('Websites'),
                     'width' => '100px',
                     'sortable'  => false,
                     'index'     => 'websites',
                     'type'      => 'options',
                     'options'   => Mage::getModel('core/website')->getCollection()->toOptionHash(),
                                     'filter_condition_callback' => array($this, '_websiteFilter'),
             ));
         }

And you’re done.

Module_Helper_Data not found any module magento

If you receive the Helper_Data.. not found message when trying to install a new module either manually or through the Downloader and get this message it’s simply a case of disabling Compilation mode before enabling the new module.

Quick and simple one, might be overlooked if you don’t tend to use Compilation mode, but that’s all you need to do simply disable compilation mode.

 

Optimising WordPress for PageSpeed Insights

Recently I was commissioned to optimise a WordPress site on behalf of an SEO agency. This usually consists of reports from Google’s pagespeed insights and there’s a number of things you can do to increase the speed.

pagespeed

Before you start you should first check that the foundations are correct.

Enqueue

For example all JS and CSS files are properly enqueued in WordPress we will later need to work on minifying and combining these into one file.

HTML Structure

Ensure important page elements are near the top, move your html around if required and ensure that your CSS files are ordered in the way the page loads you might want to break the css up into two files. The first loading important structure e.g header, body content etc.. The second appearing in the footer loading the remaining part of the site.

Onto the optimisation

Optimise images

The next thing you want to look at is image optimisation there’s a plugin you can install that optimises all image uploads as you upload them which in turn utilises some command line tools to compress images e.g optipng and jpegoptim. You also need to run these tools on the existing image library.

Set an expiry on assets through nginx or apache or alternatively just use Cloudflare or any CDN of your choice.

Minify HTML

HTML Minify https://github.com/cferdinandi/html-minify does a decent job of minimising your html.

Minify CSS/JS

You then need to install a plugin to combine your css/js and again work on the order here to ensure the right delivery.

Blocking

Fonts are often blocking resources, consider using Google’s Font API instead and anything else that isn’t critical either defer or move to the bottom of the page.

A lot of the above can also be achieved in part of in full by Google’s pagespeed module you’ll achieve better results though by doing each part onsite.

Image resizing

If you have any scripts that work with images e.g sizing images on the fly or creating thumbnails and have a very large amount of images either through the creation of different sizes or in total watch out for anything that reads the folder they are contained in as this can put a serious performance hit on your server.

Magento collection filtered

Here’s a simple setup for a product collection with the following filters used in most of my modules, ideal for things like product feeds etc.

It has the following filters

– By Store
– Must have price > 0
– Must cost > 0
– Only simple products
– Visible either Catalog,Search or Both

$visibility = array(
    Mage_Catalog_Model_Product_Visibility::VISIBILITY_BOTH,
    Mage_Catalog_Model_Product_Visibility::VISIBILITY_IN_CATALOG,
    Mage_Catalog_Model_Product_Visibility::VISIBILITY_IN_SEARCH
);

$storeId = 1;
$collection = Mage::getResourceModel('catalog/product_collection');
$collection->getEntity()->setStoreId($storeId);

// Reset the select.
$collection->getSelect()->reset();

// Update table name.
$reflectionMethod = new ReflectionMethod($collection, '_initSelect');
$reflectionMethod->setAccessible(true);
$reflectionMethod->invoke($collection);

$collection
 ->addAttributeToSelect('sku')
 ->addAttributeToSelect('name')
 ->addAttributeToSelect('description')
 ->addAttributeToSelect('small_image')
 ->addAttributeToSelect('manufacturer')
 ->addAttributeToSelect('msrp')
 ->addAttributeToFilter('visibility', $visibility)
 ->addAttributeToFilter('status', '1')
 ->addAttributeToFilter('type_id', array('eq' => 'simple'))
 ->addFinalPrice()
 ->setPageSize(900000)
 ->setCurPage(1);

Full Stack Frontend catchup & workflow

I have come to the realisation recently I’m more of a full stack developer. Taking some time recently to run through the recent developments in frontend if you haven’t explored this area for a while you will find it’s moved on quite a bit.

What you need to know:

Get familiar with npm and node-js because you will be using them a lot, of course it isn’t the only package manager out there and more for frontend dev’s is bower the debate is still out on which is best. If you want a good explanation of both see this Stackoverflow answer what’s the difference between node-js and bower? you can of course use the tools together.

Just like composer for php and other languages that now user composer type tools these help you manage your dependencies.

Along with these you can use further bundled packages that in their own way try to speed up development e.g INIT and Yeoman. INIT bundles together HTML5 Boilerplate, Bower and Grunt and some other things to give you a head start there are many others out there. Yeoman sort of serves as library manager for installing these, all of the above act like a scaffolding for a new project.

If you’ve barely touched Grunt , you would be better starting off writing your own Grunt config and learning about how underlying tools work you would be surprised how easy it is.

There’s also Gulp which is very similar to Grunt it’s good to give both a try as different agencies may have a preference. What they allow you to do is pull off some impressive automation into your development for example maintaining a /build folder structure from the same source dir and having different process’s, files, settings etc for each e.g a testing scenario vs a live build. Some common tasks like css/js compression, whitespace removal, concatenating a bunch of files together basically giving you a squeaky clean page structure which can be run every time you make changes to your project through a one line command.

But the really clever stuff is automating things like changing your URL’s to a CDN , compressing images, minifying html etc.. Roll in automated testing, compiling sass, less, copying files, compiling html and even run other command line tools.

There’s still some lively debate about which is best, but they both have good support and achieve the same outcome only currently gulp has some performance advantages that I think only apply to large projects, so as always it may be a decision based on the project.

What else is current:

JS

Most dev’s will have worked on some project or another that used Angular, Backbone or some other MVC based framework I gave Agility.js a go last year, Angular is definitely looking pretty strong and backed by Google it’s likely to grow further it’s pretty popular in job listings as well.

ECMAScript was released this month (June 17th 2015) what it brings to JS is classes and a ton of other features see http://es6-features.org/ or there’s a good overview of the main changes with some examples here or view the full spec you don’t have to wait till it’s safe to use it, there are many compilers (Babeljs) that offer backward compatibility allowing you to use it today.

CSS/HTML

There’s still plenty of frameworks popping up with Bootstrap, Foundation, Semantic UI, Pure, Inuit, UI Kit all serve different needs some more basic than others, my framework of choice for frontend websites is Foundation as the name suggests it feels solid and seems to offer just the right balance of components but not feeling too bloated.

By now your very familiar with transitions, drop-shadows and all that CSS3 brought, CSS4 is on the horizon it’s still a working draft so it’s not worth spending more than a glance on what it might have to offer at this stage as you would still have to polyfill some of CSS3’s features for older browsers.

Mostly pain free features that you could be using:

  • SVG with IE8 Polyfill (npm install grunt-badass –save-dev)
  • vh/vw useful for fullscreen layouts (https://github.com/saabi/vminpoly)
  • Semantic markup (that’s a given by now)
  • HTML5 form (mostly ok IE9 lacks support without polyfill)

Here’s a set up for a small mainly static project I recently developed:

Technology Stack

  • Nginx
  • PHP5-FPM
  • Rackspace Load Balancer
  • Lsyncd
  • MySQL
  • Cloudflare
  • Modernizr
  • Angular JS
  • Foundation 5
  • JQuery
  • Typekit

Folder Structure

  • /project/app
  • /project/app/api
  • /project/app/assets
  • /project/app/assets/css
  • /project/app/assets/fonts
  • /project/app/assets/img
  • /project/app/assets/js
  • /project/app/views
  • /project/app/views/partials
  • /project/src
  • /project/src/js
  • /project/src/img
  • /project/src/sass

Development Tools

  • Phpstorm
  • Browserstack
  • New Relic
  • Blitz.io
  • Virtual Box
  • Ampps
  • LiveReload

gitignore

node_modules
.npm-debug.log
tmp
bower_components
.sass-cache

Grunt build tasks

grunt.registerTask('build', ['clean', 'jshint', 'sass', 'concat', 'cssmin', 'copy','uglify','htmlmin', 'cdnify', 'svgmin'])
grunt.registerTask('test', ['jshint', 'sass', 'concat', 'copy','uglify']

The benefit or running all this stuff can be seen by putting your site through Pagespeed Insights it can become an obsession to get the highest score possible but at the end the speed is worth it.

There are some caveats:

  • IE8/9 can only read a maximum of around 280kb in file size or 4096 rules so putting everything into one file might not be possible at least that’s true for CSS files
  • If your using concat and pre-minifed versions of your JS dependencies make sure to use the separator option to prevent errors
    separator: ';\n',
  • Crushing everything into one file might not be the best for your project, as if everything is efficiently structured, you can utilise the browsers connections better by splitting them into a few files e.g app.js, index.js etc.. furthermore you can use things like https://github.com/ocombe/ocLazyLoad or RequireJS to load files as you need them. But ideally if you can achieve a small file size and one file that’s the goal
  • Angular JS does not support IE8
  • SVG not supported in IE8
  • Using the html5mode in Angular did not work for me in iOS safari and other browser versions when loading a subpage.
    $locationProvider.html5Mode(true);

 

Calculating selling price from the cost price

Recently in my price matching system I had to calculate the selling price of a product in a way that also calculates a transaction fee percentage on the final selling price without knowing the selling price, and without knowing what the transaction fee is until you’ve calculated the total price. Had fun chasing your tail yet?

You can do this in Excel with circular references but you will get circular reference warnings and the only way is to allow these warnings and an iteration limit of 100.

Stepping aside from the magic of excel I was able to work out the exact formula for this and below is a calculation for anyone else struggling to work out how to do this.

$cp = 9.56; // cost price
$d = 2.50; // delivery fee
$m = 0.15; // margin 15%
$tf = 0.019; // transaction fee

$sellingPrice = (($cp+$d)*(1+($m)))/(1-((1/6)+$tf)*(1+($m)));

$costPrice = $x / (1+(.15));

echo $sellingPrice."\n";
echo $costPrice;