Security in Web-apps: Overview

Introduction

This blog entry intends to bring an overview about security and an introduction of usual mistakes and some tips.

Overview

What does Web application security means?

There are several definitions for this questions, but we can shorten them like:

A process that aims to address and fulfill the four principles of security:

  • Confidentiality: States that the sensitive data stored in the Web application should not be exposed under any circumstances.
  • Integrity: States that the data contained in the Web application is consistent and is not modified by an unauthorized user.
  • Availability: States that the Web application should be accessible to the genuine user within a specified period of time depending on the request.
  • Nonrepudiation: States that the genuine user cannot deny modifying the data contained in the Web application and that the Web application can prove its identity to the genuine user.

How to start working on this

As I mentioned before, security is process not just a patch that we can apply at the end of the project. This process should be transversal to the project, starting on the design phase and following, develop, tests and enhancements.

There’s an international non-profit organization that focus on software security improvements, Open Web Application Security Project (OWASP) that has identified the top 10 vulnerabilities:

  • Injection flaws
    • Injection is an entire class of attacks that rely on injecting data into a web application in order to facilitate the execution or interpretation of malicious data in an unexpected manner.
  • Broken authentication and Session Management
    • This is a vulnerability associated with the complex process of User’s authentication. This can happens in all web servers, application servers, and web application environments.
  • Cross Site Scripting (XSS)
    • XSS occurs when an attacker is capable of injecting a script, often Javascript, into the output of a web application in such a way that it is executed in the client browser.
  • Insecure direct object references
    • Insecure Direct Object References allow attackers to bypass authorization and access resources directly by modifying the value of a parameter used to directly point to an object. Such resources can be database entries belonging to other users, files in the system, and more. This is caused by the fact that the application takes user supplied input and uses it to retrieve an object without performing sufficient authorization checks.
  • Security misconfiguration
    • This is a set of potential flaws can be caused by a wrong configuration of web server or application server. There are a wide variety of server configuration problems that can plague the security of a site.
  • Sensitive data exposure
    • This web security vulnerability is about crypto and resource protection. Sensitive data should be encrypted at all times, including in transit and at rest. No exceptions.
  • Missing function level access control
    • This is simply an authorization failure. It means that when a function is called on the server, proper authorization was not performed.
  • Cross site request forgery (CSRF)
    • This is an attack that forces an end user to execute unwanted actions on a web application in which they’re currently authenticated.
  • Using components with known vulnerabilities
    • This flaws usually happens when 3rd party pieces of code are included in a system even when there are some vulnerabilities reported by the developers or any community.
  • Unvalidated redirects and forwards
    • We will talk about each item in later posts.

Basic Tips

A common expression between experts is “Never blindly trust the user! they don’t care about the problems can be caused to the system after an invalid input”. To avoid accidental or malicious issues caused by input, always sanitize data that will be used by your system.

Is very important you validate not only the inbound data, but also the output one. There are some threads used by hackers that try to inject redirections in large inputs the can be executed by client on output.

Here’s a small snippet that can show how to validate inputs:

...
require_once(dirname(__FILE__).’/<path_to_classes>/PHPSanitizer.php’);
$sanitizer = PHPSanitizer::getInstance();
$sanitizer->setType(PHPSanitizer::PARANOID);
$sanitizer->validate($string); //return a boolean
$sanitizer->cleanup($string); //returns an string with all invalid characters removed
...

Implementation of PARANOID type:

require_once(dirname(__FILE__).'/AbstractSanitizer.php');
require_once(dirname(__FILE__).'/ISanitizer.php');


class SanitizerParanoid extends AbstractSanitizer implements ISanitizer{
   private $pattern = "/[^a-zA-Z0-9]/";
   private $replacement = "";


   public function validate($string){
       return (preg_match_all($this->pattern, $string)===0);
   }


   public function cleanup($string){
       return preg_replace($this->pattern, $this->replacement, $string);
   }
}

Full code can be forked on  PHPSanitizer

Use prepared SQL statement every time you can, this way RDBMS will compile the query and reject invalid type parameters.

Also take care about your server hardening.

  • Avoid list directories on your server
  • Remove banners of your server
  • Add authentications methods
  • Use SSL across all your sensitive URLs

Headless WordPress (A Primer)

What is headless

There are many great open source software packages out there.  Some of the most popular are WordPress, Drupal and Magento.  It has been gaining popularity in recent years to run these apps as headless.  But what does that mean?

Running headless means to use the admin and data collected in an app but use something else to render the front-end.  For instance you could manage all of your content in the wordpress admin but site that the end user sees is rendered in some other technology all together.

At the end of the day the websites that we visit are all HTML, CSS and JavaScript.  Behind the scenes the story get more complex.  Since all your data has been crafted in wordpress you can pull this content out and render it in your favorite

Who is it for?

So why would I decapitate my WordPress site?

Let me start by who it is not for.  If you are using wordPress and have no problems with how your site currently acts or functions than headless is not for you.

If you run a WordPress site but are having issues with scaling, security, and customizations than it is definitely something you should take a look at.  Keep reading 🙂

 

Why headless WordPress

Advantages
There are many advantages to using an app (CMS) like WordPress headless.  To start it allows you take full control of your front-end.   More importantly it allows you to compose your site using the latest front-end technologies of your choosing.  Love Angular, React or some old Famous animation; then use it in a clean way and don’t be stuck trying to use it in a way that only some random module says it can be used.

Use can use pure bootstrap (or Foundation) [add links]
Easily integrate JavaScript
If you hate PHP you are not stuck with it, you can use Node.js, RoR, Python or any other language and framework you choose.
Improved security (if you use a more secure front-end)
Improved
It is much easier than it sounds
You can more easily mix wordpress content with non-wordpress content
I’ve done demos using both
Potential for a richer UI/UX and faster browsing
SPA, turn your blog into a single page app and impress your friends

[links to other posts]

Disadvantages
Out of the box WordPress has an easy to use user front-end and numerous themes available for free or cheap on the web.  This

You can no longer use all those free wordpress themes
it does take more than casual programming
For a large site that has lots of content and numerous plugins, going headless could be a little time consuming
If are trying to use both wordpress and Drupal 7 (or lower) you have to use one via an API
I did some experiments in 2014 bootstraping both together and there are just too many conflicts.  Things may be different with Drupal 8

Basic headless

How to get headless working

In order to go headless you need to include wp-load.php, which is in the root of your wordpress code.  In my case I have wordpress in a folder wordpress/ which is inside lib/

define(‘WORDPRESS_ROOT’, ROOT.’/lib/wordpress’);

if ( !isset($wp_did_header) ) {

$wp_did_header = true;

require_once( WORDPRESS_ROOT . ’/wp-load.php’ );

}

after that you have WordPress running headless.

now try to pull some data.  For instance try,

$post = get_post(1); // get post is a WP function to pull a single blog post by post id

var_dump($post);

How-to with Erdiko-WordPress

going headless with Erdiko is very simple if you have composer.  In your favorite composer based framework or micro framework (Laravel, Symfony, Erdiko, Slim, etc) simply run

composer require erdiko/wordpress

you’re done.

To test it out create a route in your app and simply instantiate this model.

$wpModel = new /erdiko/wordpress/Model;

// you can call any wordpress api function for instance get_post()
$post = $wpModel->get_post(1);

var_dump($post);

https://github.com/ArroyoLabs/erdiko-wordpress

Multi-site

Multi-site works in a similar fashion, however some additional steps are needed to let WordPress know which site you are on.  Also depending on the use case there is some auto-routing you can do to make things easier.

This will be part of a future post.  It’s not as clean as the going headless on a single site.  If your multi-site is very complex you may struggle a bit running it headless.

Conclusions

Headless is great, but its not for everybody.  Keep in mind, in an enterprise scenario you either need to go headless or harden your out of the box WordPress app.

Next steps
We will post more examples and advanced use case throughout the year.  Please comment and share your thoughts if you would like to see a specific headless example.  Stay tuned!

Understanding AngularJS 2 vs AngularJS 1: Part 1

As I’m sure you know if you are reading this, the AngularJS team is planning for a major version release “very soon” that will include some major paradigm shifts. A lot of the things you learned while teaching yourself AngularJS 1.x will just not be present in AngularJS 2.

AngularJS 1.x is stable and will definitely be around for a long while with long term support from the original team. But do you really want to pass up on some of those amazing features (3-5x Performance increases, the ability to use Server Side Rendering, bragging rights)? No, of course not.

Just to make sure we can explain the concepts of Angular 2, let’s briefly review the main concepts of Angular 1.

Modules & Controllers

Controllers are just Javascript objects that create scope (more on this later), setting up attributes and functions. It’s the connection point for all scopes, functions and data sources in the application. These are similar to traffic cops that direct the flow and send data back and forth between the parts of your application.

A module can be thought of as the container that holds all the different parts of your AngularJS application. These have the advantage of making your code declarative and well encapsulated.

Directives

Custom HTML elements used to enable and interact with AngularJS. This cool feature is how we instantiate your app (`ng-app`) or create custom elements that transform data and views with JS logic stored in your models and controllers.

Here is an example of a directive in AngularJS 1.3 that replaced a `<burrito />` directive with an image of a burrito:

HTML

   <div>
<burrito></burrito>
</div>

JS

var app = angular.module(‘plunker’, []);

app.controller(‘MainCtrl’, function($scope) { });

app.directive(‘burrito’, function(){
return {
restrict: ‘E’,
replace: true,
scope: true,
template: ’<img src=“[ASSET SOURCE]” />’
};
});

Scope

The Application model and context, defined by an angular element. Defined hierarchically, scopes can be passed between elements

It’s important to note that Controllers, Services and Directives all have their own nested scopes. This can get messy when you are passing around data and need to make sure you aren’t polluting your own scope.

image

 

Databinding

 

While this is a great feature, it’s incredibly slow. Every digest cycle has to check ALL of these variables and update them appropriately.

Data binding is that magic that lets you sync data between your models and your view. In a sentence: your model’s data is bound to the view and your view is bound to your model’s data.

Here is a quick example:

HTML

<fieldset
<h1>Hello {{name}}!</h1>

<fieldset>

<label>an example of databinding:</label>

<br>

<input type=“text” ng-model=“name” />

JS

var app = angular.module(‘plunker’, []);app.controller(‘MainCtrl’, function($scope) {
$scope.name = ‘World’;
});

This is that awesome thing that does that sweet ‘live’ updating of values in your forms. Most likely, this was the huge selling point when you first started learning about AngularJS and the ‘reactive’ web.


We’ll explore where these things start to differ in Angular 2 in our next post