Category: Web Application

php

Reasons to Choose PHP for Web Development

100Web Application

Reasons to Choose PHP for Web Development

Today’s dynamic and interactive web pages are created using one of the many prominent technologies. Most web developers and development firms choose PHP to build their web applications.

One of the major reasons behind this is, it is an open-source server-side scripting language that provides various features which help them create apps which match the expectations of big enterprises. It also supports multiple platforms and application servers.

If you are looking to build a web application, which is reliable, secure and efficient, you can leverage PHP to do so effortlessly.

In this blog post, let us have a look at the reasons why anyone should choose PHP over other languages and why PHP is widely used for web app development. This post contains beginner level introductory material for any firm or developer looking into selecting an appropriate technology for developing web applications.

Why PHP?

  • PHP is simple and very easy to learn
  • PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
  • PHP is compatible with almost all servers used today (Apache, IIS, etc.)
  • PHP supports a wide range of databases
  • PHP is free to download and use
  • PHP is easy to learn and runs efficiently on the server side

Benefits Of Choosing PHP:

PHP supports more than 700 features, which eventually lessens the difficulty of programming. PHP also supports multiple databases such as Oracle, MySQL, SQL Server and MS Access.

With PHP, you are not limited to output HTML. You can output images, PDF files. You can also output any textual data, such as JSON, XHTML and XML.

Various widely used CMS platforms like Joomla, Drupal, WordPress etc, and frameworks like CodeIgniter, CakePHP, Zend etc. and shopping carts like Magento, Zencart, Opencart, Oscommerce etc. are built using PHP.

The above mentioned PHP frameworks provide multiple ways to accomplish your tasks quickly as they follow the organized MVC ( Model View Controller) pattern.

Those who want to develop a project rapidly by using well written libraries which are less prone to errors can leverage PHP frameworks for development. PHP frameworks are built using simple patterns that can be followed easily. Beginners can save plenty of time while developing projects using PHP frameworks. They will get sufficient community support in terms of resolving errors and developing high quality code

Benefits of PHP

What Can PHP Do?

  • PHP can generate dynamic page content
  • PHP can create, open, read, write, delete, and close files on the server
  • PHP can collect form data
  • PHP can send and receive cookies
  • PHP can add, delete, modify data in your database
  • PHP can be used to control user-access
  • PHP can encrypt data

Factors that add on more popularity to PHP are:

Let us now look at some of the main reasons why all the web developers choose PHP over other languages.

User-Friendly:

The core PHP syntax is extremely simple and the learning curve is very small for any aspiring web developer.

Flexibility:

PHP provides maximum level of flexibility when compared with ASP. Net, and is ideal for any user who wants to extend it to exactly match the custom requirements of their business. As it is an Open-source software, the user can write the code using any type of editor. PHP can be combined with diverse libraries such as graphics and XML etc.

Data Processing:

Developing a website using PHP, helps the user to add fast data processing capabilities and boost the website features quickly.

Open Source:

As PHP is a universally recognized open source language,it provides a multitude of solutions for any website development needs. One of the major reasons behind the success of PHP is that, it is a totally free software with a very simple syntax.

Cross Platform:

Since PHP works amazing on UNIX, LINUX and Windows platforms, it is very easy to develop cross-platform applications with PHP. It interfaces with Apache and MYSQL and if you are interested to develop a cross platform application, then, PHP is the best choice.

Common Mistakes Made by PHP Web Developers:

Failing to use Database Caching:

In your PHP application, are you using any database ? If so, make sure that you use some kind of database caching.

Continuing the use of MySQL Extension:

MySQL extension misses on few modern MYSQL features and is insecure and not reliable. It doesn’t support SSL. So, its better to opt for MYSQLi.

Not using PHP Data Objects(PDO):

MySQLi is indeed fast, reliable and secure, but is MySQL specific. So, it will be instead better to use PDO. Doing so, allows you to use object-oriented syntax and it will also make you ready for other SQL databases.

PDO enables using of named parameters and it would save a lot of time by allowing you to inject the fetched data into a new object.

PDO and mysqli

Conclusion:

PHP web development will continue to gain popularity in the near and distant future. Coding on a language like PHP will surely be a breeze if some of the commonly made mistakes are avoided. We hope that the information we shared above have spurred on some new ideas regarding PHP.

As always, please share your thoughts as comments. Thanks.

mobile-website-friendly

How to Make Your Website Mobile-Friendly

1616Web Application

How to Make Your Website Mobile-Friendly

A Mobile friendly website makes it much easier for users to navigate and read the content on various mobile devices, smart phones and tablet devices. A mobile friendly website must include the features found on a standard website, such as navigation, search options, and share functions. Having a separate mobile site from your desktop site allows you to optimize for speed, which is paramount for mobile.

In this blog post, we are going to help you to mobilize your website, so that your business can start benefiting from its mobile traffic instead of turning it away.

What is a Mobile Friendly Website?

As the name indicates, a mobile friendly website is a site which gives the best experience for user, no matter which mobile device they use.

Characteristics of a mobile friendly website:

  • Navigation has been simplified and clearly laid out to make page selection easy
  • Design elements have been compressed, replaced or removed to simplify usage
  • Content has been laid out to allow for mobile consumption
  • Phone numbers are setup for click to call functionality
  • Addresses are setup to use the device’s map functionality
  • Calls to action are setup to work with simple forms or the device’s email functionality

How to Mobilize Your Website ?

Following are some of the tips which could help you to make your website mobile-friendly and provide your mobile users with a better user experience.

Use a Responsive website design on CMS:

Mobile users have different needs and wants than desktop users, and the design of the site should reflect that. Great mobile design is a lot more than having legible text and properly sized images.

Responsive design allows website developers to create a site that can be viewed easily on different devices. Responsive design furnishes the best possible experience at the mobile level but allows for enhancements to the site’s design and functionality as it increases in screen size.

Responsive design uses CSS3 to automatically adapt website content to the size of the user’s screen based on width, orientation and resolution. This reduces the amount of work which developers have to do when it comes to develop a website.

The responsive design approach makes use of flexible layouts, flexible images, and cascading stylesheet media queries.

When responsive design is used on a website, the web page will be able to recognize the visitor’s screen size and orientation and change the layout accordingly. Responsive website content such as images and text will automatically shift around to be easier to navigate, depending on the mobile device used.

Responsive Design

Build a responsive website using frameworks like Bootstrap/ Foundation:

Bootstrap is a responsive framework for building web sites and applications, and it’s a great starting point for building a responsive theme for your website.

Using Bootstrap, the development of responsive website is more easier. Bootstrap editors and builders makes it easier to prototype, test and build responsive websites.

Let us have a look at some of the Bootstrap tools which helps to create responsive interfaces and websites faster than ever.

Brix.io:

Brix is a powerful online Bootstrap tool that enables you to create responsive interfaces & websites faster than ever. Brix produces easily readable, smooth and well-formatted HTML, CSS & JS for use with any hosting service or other editor.

Jetstrap

Jetstrap is a premium web-based interface building tool for Bootstrap 3 that helps developers and designers to build for all devices and allows to work from anywhere.

Divshot

Divshot is not only a visual Bootstrap editor, but also an application-grade hosting environment built for developers.

Bootstrap Starter Kit:

Bootstrap Starter Kit is a Bootstrap template with a compilation of unique, professional Content Blocks, that can be composed together to develop unlimited responsive layouts to suit any business.

Use the drag-and-drop HTML Builder to quickly and visually create your perfect site, or copy-and-paste your chosen blocks for greater control.

Foundation:

Foundation is a family of responsive front-end frameworks which helps to build beautiful responsive websites, apps, prototypes and emails that look amazing on any device.

Foundation is easier to style, faster to learn, modular, semantic, readable, flexible, and completely customizable, so you can easily build your responsive website from prototype to production in no time.

Foundation supports Right-to-Left(RTL) languages to help designers around the world to design great products faster.

Bootstrap and Foundation

Build a separate mobile version of your website:

If you build a mobile version of your website, you will effectively have two websites – one for desktop and one suitable for mobile devices.

When the users visit your website using a mobile device, they will be redirected automatically to your mobile website. With a separate mobile website, you can have different content, layout, images, etc. on the site.

Advantages:
  • With a separate site, you can tailor the content to the needs of your mobile readers that won’t be replicated on the desktop version of your website.
  • It is inexpensive to build.

Include viewport meta tag:

The viewport is a virtual area used by the browser rendering engine to determine how content is scaled and sized.

Without viewport, your site will not work well on a mobile device, because the viewport meta tag makes each page to fit exactly inside the screen of the mobile device.

Include the below given meta tag at the head of the document.
<meta name =”viewport” content=”width=device-width, initial-scale=1”>

Use high-resolution images:

High resolution images are very important on your responsive website to make sure that your user’s experience is of a high standard.

Having extremely high-resolution images will help you avoid blurry images when viewed on a retina-quality screen.

Optimize Image Size:

Mobile friendliness isn’t just about having a beautiful website design. The major part is about enhancing the user’s experience, and the load times of images.

When you’re dealing with mobile devices, make sure that you design the images which have the smallest possible file size.

Smaller size images will look crisp and clear on whatever screen it’s being viewed on and it helps to load the page faster, and generally contributes to a positive image of your site.

Another reason is, the bandwidth of mobile devices are much smaller when compared to desktop’s and it causes increased loading times.

Check the font size and button size:

Font size and button sizes matter a lot for mobile devices.

Font size should be at least 14px. This may seem big, but instead of having your users zoom-in to read the content, this makes it easier for them by adjusting your font size for maximum legibility. Only on labels or forms, you can go with a minimum of 12px.

Always go with bigger button sizes, because it reduces the chances that the user will click the wrong button by mistake.

Remove the default zoom:

Default zoom (auto-zoom) will always mess up the layout elements.

Images and the navigation content, may not work properly using the auto-zoom feature, since they may appear too small or too large in your layout.

To avoid this, use the “viewport” meta tag to set up custom variables within the content and ensure that you include the tag <meta name =”viewport” content = “initial-scale=1”> in your <head> HTML.

Don’t Block Javascript, CSS, or Image Files:

Javascript is a widely used language and together with CSS and image files, it’s one of the backbones for a responsive, mobile-friendly site.

Try to make your website universally compatible i.e. it should display your website from any device that people would like to view it on i.e. using software and coding that are accepted universally. The more focused something is, the less likely your site will be compatible all around.

Use Mobile Plugins on Popular CMS Platforms:

The most popular website content management systems — WordPress, Joomla, or Drupal can make any website mobile-friendly, without adding two different versions.

WordPress Mobile Plugins:

WPtouch is one of the best plugins for WordPress websites which likes to add a custom mobile experience. It provides a paid version that contains added benefits for ecommerce sites.

JetPack is WordPress.com’s solution for implementing a simple mobile theme to ensure mobile access to its websites.

Joomla Mobile Plugins:

Responsivizer and JoomlaShine plugins have simple ways to add mobile functionality to your Joomla website. These are essential only if you use an older version of Joomla, such as 2.5 or lower. Joomla 3.x comes with default support for mobile websites.

Drupal Mobile Plugins:

Drupal offers two modules — ThemeKey and MobileTheme — that checks whether a user is on a mobile device and it automatically re-directs the theme of the website to a mobile friendly appearance.

All the above mobile plugins offer easy-to-use interfaces once you get them installed.

Mobile SEO:

Mobile Search Engine Optimization is the method of developing a website to make it appropriate for looking on mobile devices of different screen sizes.

Mobile search engine optimization (SEO) ensures that your website appears in mobile search engine results, and that users who access your website through a mobile device have an optimized experience.

Why Mobile SEO?
  • Mobile media has surpassed desktops
  • People are attached to their phones
  • Mobile users shop extensively for products and services.

A website is considered as mobile friendly if it has the following characteristics:

  • A good mobile website has a responsive design which performs well on desktops as well as mobile devices. It not only reduces the maintenance of the website but also makes the content consistent for the search engines.
  • The contents of an excellent mobile website are easy to read on a mobile device without having to zoom the screen. It has appropriate fonts, colors, and layouts.
  • It is easy to navigate through a good mobile website on a small screen. It provides links and buttons that can be clicked easily using a finger.
  • A good mobile website must be lightweight i.e. it should takes less bandwidth and time to load on mobile networks.
  • The Home Page of a mobile website plays the most important role in connecting users to the content which they are looking for. Therefore, a good mobile website must display the most important links on the Home Page, so that they can get enough visibility.
  • A website’s ranking depends on how user friendly it is. So, in-order to increase the ranking of your website , make sure that your website is user friendly.
Mobile seo

Best Practices for Mobile Optimization:

Design for maximum usability:
  • Use text that is large enough to read without zooming
  • Make sure that the users do not have to scroll horizontally to see your content on a mobile device
  • Make sure clickable links are not too close to each other, making it hard for users to click the right link
Use schema.org structured data

With minimal space on the screen, search results that include rich snippets will look more appealing.

Optimize images and videos:
  • Use HTML 5 instead of flash.
  • For the best user experience, ensure that the videos play perfectly, and that no image elements overlap each other.
Use clear calls to action:
  • Text calls to action are very tricky to click, and can result in poor results.
  • Make your calls to action highly click-able by using buttons, color differentiation, custom graphics, images, etc.
Improve page load speed:

Page speed is more essential for mobile than desktop devices due to hardware and connectivity problems.

Improve page speed by minimizing the code and reducing the image file sizes

A one second delay in page response can result in a 7% reduction in conversions

Avoid popup ads:

Popup ads can annoy the visitors, and can lead to a higher bounce rate.

Use videos on your website:

Using YouTube videos on your website is a solution to combat any complexities in viewing videos on mobile. The reason behind this is that, the embed code of YouTube is responsive already, and this will revive multiple steps to ensure that your videos are mobile-friendly.

Don’t oblige your user’s mobile experience:

No matter how elegant your mobile website is, always add “go to full website” or “view desktop version” option at the bottom of your website, because few users will always prefer to have full site experience.

We hope these guidelines will help you to know how to make your website more mobile-friendly.

Web-Application-Security

Common Web Application Security Vulnerabilities and Fixes

120Web Application

Common Web Application Security Vulnerabilities and Fixes

We were en-trusted with developing a web application for one of our clients, who were into securing their customer’s sensitive data. We were asked to come with a document listing common security vulnerabilities with respect to a web application and were asked to provide solutions for each of them. We came up with the below vulnerabilities & solutions, which we wanted to both share and discuss with all of you folks out there.

Cookie Stealing/Session Hijacking

Cookie Stealing/Session hijacking is the exploitation of a valid computer session to gain unauthorized access to information or services in a remote server. In a web application, HTTP cookies are sometimes used to maintain a session, which could be easily stolen by an attacker using an intermediary computer or with access to the saved cookies on the victim’s computer.

One of the common ways to steal cookies is using source-routed IP packets. This method allows an attacker at point B in a network to participate in a conversation between A and C by encouraging the IP packets to pass through B’s machine.

If source-routing is off, an attacker can use a technique called “blind” hijacking, whereby it guesses the responses of the two machines. Using blind hijacking, an attacker can send a command, but can never see the response. But, a common command would be to set a password which would enable the hacker to access the site from somewhere else on the net.

An attacker can also be “inline” between A and C using a sniffing program to watch the conversation. This is known as a “man-in-the-middle attack”.

session-hijacking

Solutions

  1. We decided to use https (SSL) to encrypt all the content that goes over the network. SSL mainly prevents, man in the middle attack.
  2. We also decided to use HTTP Only Cookie for each call between client and server. We generated a unique token for each user when they login and cleared that token when user logs out.

Token = MD5(user_id + IP + Current Time)

The following is a fragment of the user table containing token information:

Id user id Token Ip address created_time
1 1 xyus#4sdsdoesd 145.10.15.16 09/05/15 11:02 AM
2 2 uops$itusynkk 120.1.12.25 09/05/15 12:40 PM

The generated token is sent to the server with every request over SSL and is compared with the token in the user table to allow access to secure information in the site.

Cross Site Request Forgery

Cross Site Request Forgery or CSRF is forces a malicious action on a legitimate website from an end user’s browser when they are on the site using a valid authenticated session.

Once the user is authenticated on a website, every action performed from his browser will belong to the user. The server assumes that each request is coming from the user.

The key in understanding CSRF attacks is to recognize that websites typically don’t verify that a request came from an authorized user. Instead, they verify only that the request came from the browser of an authorized user.

This attack is commonly done by hackers when users perform actions like: change of password , fund transfer from bank account, purchase of an item etc.

This attack is performed by making fake forms or requests that behaves exactly like an original website. When these requests are sent to a website from an authenticated user’s browser, the website thinks that the request has been made by that user.

CSRF

How CSRF Works ?

  • The user navigates in their browser to an application
  • The server returns a basic web page and a JavaScript application
  • The JavaScript application can’t find an authentication token in the web site’s cookies
  • The JavaScript application displays a login form
  • The user enters correct login credentials and then submits the form
  • The server validates the login information and creates an authentication token for the user
  • The server sets the authentication token in a cookie and returns it to the JavaScript application
  • The JavaScript application makes a request for some protected data, sending the authentication token in a custom header
  • The server validates the token and then returns the data

How to prevent CSRF vulnerability ?

Checking for Referral Header

Checking for a referral header can help in preventing the CSRF. If the request is coming from some other domain, it must be a fake request, so block it. Always allow the requests which come from the same domain.

This method fails if the website has open redirection vulnerabilities. Attackers can perform GET CSRF by using open redirection.This method will also fail, if the website uses https.

Captcha Verification in forms

This is another nice way to prevent CSRF attacks on forms. Captcha verification process was initially developed to prevent BOT spam in forms. But it can also be helpful in preventing CSRF.

As the captcha is generated on the client side randomly, an attacker cannot guess the pattern. So, he will never be able to send the correct Captcha with a fake request, and all fake requests will be blocked by a Captcha verification function.

This method is not user friendly. Most of the users don’t want to fill the Captcha on the website. So, we should find ways that prevent CSRF vulnerability without adding any extra burdens on users.

User side Prevention

CSRF is a harmful vulnerability so, users should also follow few steps to ensure their security. These are the few important points:

  • Always logout important web accounts when not in use.
  • Never use important web accounts (such as online banking) along with free web surfing.
  • Use No-Script browser add-on to protect yourself from malicious scripts.

Cookie-to-Header Token

Cookie-to-Header Tokens are mainly used in web applications which use javascript heavily. This technique works on the principal of same-origin which states that javascript can not access cookies from other websites.

When a user logs into a web application, it sets a cookie (containing a random token) which is going to be used for the remainder of the login session. JavaScript executing on the client side reads its value and copies it into a custom HTTP header sent with each HTTP request to the server.

JavaScript running from a rogue file or email won’t be able to read it and copy into the custom header. Even if the csrf-token cookie is sent with the rogue request, the server will still be expecting a valid X-Csrf-Token header.

This technique is widely implemented in recent frameworks like Angular and Django.

Cross site scripting Attacks

Cross-site Scripting (XSS) refers to client-side code injection attack where an attacker executes malicious scripts into a legitimate web app.

XSS is one of the most prevalent web application vulnerabilities and occurs when a web application uses un-validated or un-encoded user input within the output it generates.

By leveraging XSS, an attacker doesn’t target a victim directly. Instead, when a victim visits a website which has some vulnerabilities, an attacker exploits that as a vehicle to deliver a malicious script to the victim’s browser.

cross-site-scripting

Solution

We validated & cleaned up all the data before applying any business logic on it.We created filters in java so that we could clean Query strings, Headers, Cookies, Parameters etc.

We leveraged OWASP ESAPI libraray and Jsoup library for cleaning the input that we recevive from the client browser. These libraries encode and clean up script and html tags.

We also used techniques like escaping or encoding script tags in the client side.

SQL Injection Attacks

A SQL injection attack as the name suggests is where a hacker tries to “inject” his harmful/malicious SQL code into someone else’s database, and force that database to run his SQL. Injected SQL commands can alter SQL statement and compromise the security of a web application.SQL injection is used to attack any type of SQL database and it can also be used to add, modify and delete records in a database, affecting data integrity.

User login pages are among the most targeted areas because of their direct link to the database since credentials are often checked against a user table of some sort.

By injecting a SQL statement, `like` ‘ ) `OR` 1=1′ an attacker could gain access to information stored in the web application’s database.

The example used in the above given SQL statement represents a relatively simple SQL statement. Ones used by attackers are often much more sophisticated, especially if they know the database schema and the names of tables in the database.

sql-injection-attacks

Solution

Using Prepared/Parametrized statements in the Data Access Layer of a web application is the most prevalent approach to prevent SQL injection attacks.

A PreparedStatement represents a precompiled SQL statement that can be executed multiple times without having to recompile for every execution.

Example of a prepared statement in PHP using PDO:

$oDB=new PDO('... your connection details... ');
$hStmt=$oDB->prepare("select name, age from users where userid=:userid");
$hStmt->execute(array(':userid',$nUserID));

This code is not vulnerable to SQL injection because it correctly uses parameterized queries. By utilizing the PHP PDO module and binding variables to the prepared statements, SQL injection can easily be prevented.

Prepared statements are more secure because they convert the parameters to their specified types. For example, stmt.setString(1, user); will convert the user parameter to a String.

How prepared statements are effective against SQL injection?

The reason why prepared statements help so much in preventing SQL injection is because of the fact that, the values that are inserted into a SQL query are sent to the SQL server after the actual query is sent to the server.

In other words, the data input by a potential hacker is sent separately from the prepared query statement. This clearly means that there is absolutely no way that the data input by a hacker can be interpreted as SQL, so there is no way a hacker could run his own SQL on your application.

Any input that comes in will only be interpreted as data, and can not be interpreted as part of your own application’s SQL code – which is exactly why prepared statements prevent SQL injection attacks.