Giving Up The Ghost

I started getting into the popular Ghost blogging platform and had planned to write some blogs and tutorials on making some of the most popular WordPress platform modifications but I’ve decided to focus on other projects due to the complexity of node.js.

I have wondered how people feel about installing it on their server due to it’s strange setup. Perhaps it is just a system which is meant to be supported by the hosted solution they provide themselves?

Not really sure how developers can work with it as it makes things so much more difficult! Node.js will be something I undoubtedly return to as I hate being defeated by something but for now I’m giving up the ghost!

In the meantime, if any of you want me to carry on working with OpenCart (something I’m much more familiar with!) then feel free to send me a message through this blog, email me at: contact@jackwdavis.com or info@destrove.com!

Cross Site Request Forgeries

A Cross Site Request Forgery (or CSRF) attack is where a victim’s browser is used to send HTTP requests to a target website which can be fired inconspicuously by using the victim’s credentials. This kind of attack generally requires a victim to be logged into the target site while navigating another malicious which will allow that site to send a HTTP request to the target.

Here is a simple example. You are logged into your online bank account, while still logged in you open up another browser tab to a website which has malicious code in it. Because you have already verified your identity with the bank website by using your login credentials, the malicious code can send a request to the website using your browser which the bank will accept as you.

I will go into the process a bit more below and show you how to some techniques which will allow you to reduce the risk of your website accepting these CSRF attacks as normal user actions. Before I go into the solution though, lets have a look at how this process works.

How CSRF attacks work

OK, so here we will go into how the process works when a website attempts to use a CSRF vulnerability. I will be assuming you are familiar with PHP coding, nothing will be too advanced here but it will help to have an understanding of the code I’m writing.

Let’s assume you have been using a website for a while, which you trust, where you buy plane tickets. We will call this website jacksflights.com.

You’re logged into jacksflights.com and navigate to another website in a separate tab called jacksplanetimes.com. Unfortunately, this website has a malicious code point which will attempt to book tickts on your account without you ever knowing. Generally it is done in one of two ways:

Images and iFrames

Anyone with a basic understanding of HTML coding will recognise an image tag which usually looks something like the one below:

<img src="http://www.test.com/testimg.png" />

Unfortunately, there is no way for a browser to really distinguish what the website is trying to get. So, if we replace the perfectly innocent image link with a link to an actual page with parameters, the browser is going to call that page. All we have to do it set the image to be tiny and not display in the browser anyway and the visitor would never know it was there:

<img src="http://www.jacksflights.com/book_flight.php?flight_id=1234" width="1px" height="1px" style="display: none;" />

This new link doesn’t actually link to an image, but as far as the browser is concerned, it doesn’t matter. It calls the page anyway, now, if the user is logged into jacksflights.com then the flight can be booked automatically without the user even being on the right page.

Some will choose to attempt the CSRF by using an iframe to do the very same thing, the process is almost exactly the same:

<iframe style="display: none;" src="http://www.jacksflights.com/book_flight.php?flight_id=1234" height="240" width="320"></iframe>

This is a very simple example of how a CSRF attack could happen using ‘src‘ links in iframes and images.

Forms

The method is where post data is set by the page and actually fired off to the page in question which is a way hackers have gotten around developers requiring data to be posted rather than collected (more on this later).

So on our malicious website, jacksplanetimes.com, we could have a form buried in the code which is fired off automatically on page load. Some hackers prefer to use an AJAX form submit to reduce any suspicious reloading of the page. In this example though, I will keep things simple and use a standard html form with hidden inputs.

Now, many websites accept form data being posted from any URL at all which means all we have to do is point the form ‘action‘ towards the page we want to send data. See below for the example code:

</pre>
<form id="flightForm" action="http://www.jacksflights.com/book_flight.php" enctype="multipart/form-data" method="post">
<input type="hidden" name="flight_id" value="1234" /></form>
<pre>

Then the form can be fired by simply using JavaScript to fire the form off before the window has fully loaded. To the unsuspecting user, all they would see is a slightly longer load time as the page reloaded or, at best, the page flash up and then reload.

Again, a very simple example.

To sum up

You can see from these two examples that the very essence of a CSRF attack is by providing information to a page on an external website which the user is logged into in another tab. It takes the websites trust in a visitor and quietly submits information to it under the guise of being initiated by the visitor themselves.

In order to explain the fundamentals of CSRF exploits easily I’ve used very simple examples. In reality there can be a lot of data submitted in these attacks, we will continue to use the example in the next page though so you have an idea of the steps you can take to avoid getting hit with this.

Carry on reading on the next page to see how to protect your website from CSRF exploits and ensure all data is actually sent by the visitor and not an external website hijacking their credentials.

Updating the auto-updating blog

Just a quick note to everyone emailing in about the auto-update price blog on Cart Advisor. I will be updating shortly as the process on there is far too complicated I think and seems to be throwing people off!

Now the workload in the dayjob is petering off (slightly!) I will be making some more time to rewrite the blog post in a simple way and releasing a stripped down version of the vqMod which will be for sale at a small cost for those who don’t want to do it themselves. (It won’t be much and you can be satisfied knowing that it is keeping me in stock of Kindle books and alleviating some of the hosting costs!)

I’ll update when it’s done, nothing wrong with doing it as it is now since it still works! Just a bit tricky which I didn’t really think about when I was writing it :)

New Year, New Projects

Happy new year 2014 everybody!

So, I’m laden down with gifts over Christmas including a Kindle, Bleu de Chanel and a boatload of clothes so I can look and smell good while I’m getting distracted by books!

I’ve got a lot planned for this year including building my own version of OpenCart which I can use for personal projects with all my modifications from my Cart Advisor blog plus a few responsive goodies.

I’m also looking at writing a book on OpenCart development and working more on security for web applications and, of course, OpenCart sites.

So, an exiting 2014 ahead with lots of new things to look out for here. Over the year I will be getting back into developing with Destrove and improving the services we’re offering with some new API based projects ahead too!

I’d like to get some more people involved in these projects so I’d like to hear from other developers who would be interested in helping to build a powerful, marketing driven eCommerce software which could potentially become an open source project in time.

Look out for more blogs over this year across more genres and even more tutorials and guides on developing your OpenCart store into something your business can be proud of!

What have you all got planned for this year?

Writers Wanted for Cart Advisor

Hi everyone!

Another submission call. I’m looking more more developers to get involved in the Cart Advisor website so if you are an OpenCart developer with something to add or a cool tutorial in your head then send me a message to get set up and promoting you and your business.

Links are allowed, within reason of course, so promoting your business to over 10,000 monthly visitors is a good way to go as well as setting yourself up as an authority figure on OpenCart development.

I’d like to hear, in particular, from developers who are familiar working with the PrestaShop and Magento systems as I would like to expand the Cart Advisor tutorials into more frameworks over the next few months!

Email me on: contact@jackwdavis.com with any questions or to put yourself forward!

Thanks!

penman-ghost-theme

10 Best Responsive Ghost Themes

So recently I have discovered the gorgeous new(-ish) blogging CMS which is called Ghost. The Ghost team claim to want to reinvent publishing online and put the focus back onto the content of sites rather than the extra clutter and they have certainly brought it a long way since it’s original Kickstarter campaign a few months back.

I’ve trawled through the rapidly growing number of responsive Ghost themes out there to bring you what I think is the very best top ten responsive Ghost themes of 2013. Enjoy.

Phantom – Flat Parallax Responsive Ghost Theme

phantom-ghost-theme

To me, Phantom is one of the best themes out there because it really emphasises what the Ghost blogging platform is meant to be about: content. The design is fluid, fading in and out smoothly with plenty of white space to draw the eye directly to the body of the blog post. There is a flagship image which stretches all the way across the page and it just looks so amazing. This is one of the most popular Ghost themes available at the moment and there is no doubt why.

A few features:

  • Parrallax Cover Image
  • 5 Pre-Loaded Cover Images to get you started
  • PSD Files included
  • Flat and minimalist design
  • 100% Responsive design – looks great everywhere!

Read more

RAIN – Responsive Ghost Theme

rain-ghost-theme

One of the other great features of Ghost is how it allows theme developers to be more creative and re-write the blogging experience for consumers as well as publishers. There are few themes which do that better than Rain.

It’s gorgeous. One of the great feelings someone can have is settling down to read with a hot drink while rain hits the windows and with this theme, you get that experience all the time. Being built on Node.js, Ghost can offer more intuitive and creative designs and features than WordPress could possibly deal with effectively. On this theme the content is on the right hand side, with scrolling headings appearing on the left. The background is a full-size image (you can use your own) which has a blur and raindrops overlaid on it.

It’s amazing, and conveniently matches the weather outside as I write this. This is a must have for any new Ghost blog owner!

A few features:

  • Easy Audio file embedding (with some included in the theme)
  • Customisable background image
  • Amazing, calm raindrop animation
  • Unique layout

Read more

Moustachey: A Ghost Blog Theme with Extra Gusto

moustachey-ghost-theme

Despite it’s lighthearted name, Moustachey is a Ghost Blog theme built with greyscale colours to give a dark but highly enjoyable reading experience. A lot of Ghost Themes seem to have tons of white space so it’s refreshing to see a template which is darker but still offers a keen focus on design.

This is a must for people who love micro-blogging platforms like Tumblr, providing less of a bump as you might transition from one to the other.

A few features:

  • Port from a successful WordPress theme (so extra improvements ported across)
  • SoundCloud integration
  • Vimeo/YouTube integration
  • Tumblr-like design which new users will love

Read more

Heroic: A Timeline Ghost Blog Theme

heroic-ghost-theme

I’m a big fan of something which pushes a different kind of style and, because of that, Heroic really stood out for me as a good blog theme which offers a timeline-type style for easily seeing blog posts in a slightly different way.

The whole theme is slick. The page loads with the timeline showing and the blog posts slide in from the left and right. The process is smooth and design is great and even works on mobile so it’s great for offering a brief snippet of the post and easily clicks through.

A few features:

  • Unique timeline-like layout
  • Smooth animations
  • Full-screen background (customisable)

Read more

Flatted Responsive & Flat Theme for the Ghost CMS

flatted-ghost-theme

This is a great Ghost theme which is summed up nicely just with it’s title. The Flatted theme for Ghost is a fully responsive theme which offers a center-aligned content view and a huge full-width header image for offering blogs a simple, but striking template which puts the emphasis on the content.

A few features:

  • Easy social links at the bottom of every blog post
  • Set a custom front page easily
  • Built in social icons on blog posts
  • Author Bio section nicely integrated with theme
  • Easily customise the colours in the theme

Read more

Fruity – Responsive Ghost Theme

fruity-ghost-theme

Another cool layout on this one which has your latest blog posts in columns from the left hand side of the page and things like pagination, blog title and social links all neatly arranged on the right hand side of the page.

Click any of the blog titles and you can see the blog post open up smoothly with an author bio fading in on the right hand side for writer. This is a great theme, not sure about the background on the demo but you can change it easily enough if you get the theme. As an added bonus, you can use the blog post main image as the full-width background image for even greater immersion for your reader.

A few features:

  • Customisable backgrounds
  • “Light” & “Dark” settings for the theme
  • Sleek font
  • Cool, unique column layout
  • Neat and organised structure

Read more

Chimera – Clean Responsive Ghost Theme

chimera-ghost-theme

This is definitely a Ghost theme for fans of the Pinterest-style layout. The structure of this theme is laid out in cards with images, the title and a small extract of the content. The theme looks great, is mobile responsive and has a cool 3D effect for all the cards.

You can “stick” one of the cards to the side to stop it scrolling which is great for highlighting certain blog posts, advertising or promoting one of the site authors. The theme is very simple and smooth; the grey, white and blue-ish colours make reading on it a delight.

A few features:

  • Infinite Scrolling
  • Responsive design
  • Logo / Cover Image support
  • Easy Discus integration
  • Google Fonts integration
  • Fitvid.js integration for video bloggers

Read more

 Penman – Minimal Responsive Ghost Theme

penman-ghost-theme

This is another favorite responsive Ghost theme for me. It is a wide, full-width layout with a static left hand pane which allows a background image and some author details, social links etc.

I think this is definitely a theme I will be buying as it offers a clean, easy-to-read in environment which is great for blogs of all genres.

A few features:

  • Sleek, stylish and simple layout
  • Built with HTML5/CSS3
  • Disqus integration
  • Easy social links
  • Custom Fonts

Read more

Interstellar – Ghost Theme

interstellar-ghost-theme

If you’re looking for something which is going to make your Ghost blog stand out then Interstellar may be the best way to go. It has an animated header which sees a bokeh design lazily floating from left to right. It is definitely different to the others I have seen and offers an animation which complements your content rather than distracting from it.

The rest of the design is very simple, just offering a small column down the center of the page with your content and an author bio/social links at the bottom.

A few features:

  • Animated Header
  • Simple, one-column design
  • Twitter Feed Bar
  • Easily set featured image or embedded iFrame

Read more

Aperture – The First Photography Theme for Ghost

aperture-ghost-theme

 

I wouldn’t be able to live with myself if I didn’t include one responsive Ghost theme which is built purely for photographers and designers to showcase their work. Aperture is perfect for it, with huge images which scroll horizontally and a nice fade effect when clicking onto one of them for more info.

It’s a really cool Ghost theme with a huge emphasis on the imagery. Everything else is stripped down so probably not one for those who will be blogging about anything other than photography or designs.

A few features:

  • Built for imagery
  • Looks great on all screen sizes and devices
  • Horizontal scrolling
  • Custom Logo and Author Bio image

Read more

OK, so there are my top ten favourite responsive Ghost themes, I hope you enjoy them! If you have any other themes you’d like to add, feel free to do so in the comments below!

Back in action

Sorry for the various delays in getting back to everyone, it’s been a wild ride over the last few months at work but we’re close to the finish line and it won’t be long before I’m back doing more freelance projects with Destrove!

Rebranding a company has been stressful to say the least and put me to the absolute max but I’ve got lots of ideas for new services and features to be adding to OpenCart stores and I’ll be getting back to all my emails over the next few weeks.

Now, I just need to recover from the biggest workload in history!

If you feel like adding more pain to my inbox, send across your projects to contact@jackwdavis.com or info@destrove.com.

Cheers