May
6th

RIA – Rich Internet Application And Content Management

Today everyone talks about Web 2.0. But while the idea of a collective intelligence, implied here by the term’s inventor Tim O’Reily remains an object of trivial speculations, it is obvious that the World Wide Web is changing. Web applications are increasingly approaching the level of functionality, which is usually found only in desktop applications. And as this trend is gaining momentum, we can already witness the dawn of a new era brought about by a novel kind of web applications – Rich Internet Applications (IRA). At the same time, the popularity of terms like Web 2.0 and RIA makes developers use them as an attractive label on their products, without actually understanding the meaning behind those notions. So what does RIA mean, eventually?

Rich Internet Applications (RIA)

The term Rich Internet Applications (RIA) was first mentioned in Macromedia’s promotional materials in March 2002. By this the company’s managers wanted to point out that the well-known Flash technology is not limited to creating attractive visual web-elements, but can also be used to develop fully functional web-based business applications. Apart from providing user with data, static pages of older-type sites are much less flexible in terms of user-data interaction compared to desktop applications. Every time you request additional data (navigate the site) or upload data to server the pages have to reload. This is often inconvenient and, above all, can compromise security because of the possibility of data loss (say, due to a lost server connection). Yet this is exactly the way Web 1.0 works. Every time you type URL or save data in a web form, server receives instructions which it then uses to form a page you see next. With RIA, there’s no need to reload pages. As you click to receive additional data or send data to server, the latter receives corresponding instructions and uploads the results onto the page. The application receives server’s response and changes accordingly. For example, if you browse an internet catalogue of an older type, every time you hit the button “next 20 items” you will have to wait for the page to reload and for a new page to shape. With a RIA-based site, you can request items 50 to 80 or all items in a specified price range on the same page, and with every new query only the list of items will be updated.

Today RIA can be developed with the help of AJAX, Adobe Flex, Windows Presentation Foundation, Flash, Java-applets, Java and some declarative languages – such as XUL and MXML. Of all these tools only AJAX and Flash gained wide popularity – mainly because they are easily available. And whereas development of Flash-based applications is quite a resource-consuming and expensive process, developing RIA with AJAX takes hardly more time then it would with an older-type, classical web-site. In most current projects Flash is only used when it is needed.

The very name – AJAX (Asynchronous JavaScript and XML) – reveals the essence of the technology. It allows the client engine and the server-based part of the web-application interact asynchronously. This means that your browser can request server at any point (say, when you hover your mouse over a link) and, vice versa, server can upload data to browser at any time, without waiting for a new page to be requested. How does it actually work?

One of the most popular uses that AJAX has found is in the web-based drag & drop technology. You must have already seen the virtual desktop services – such as found at www.netvibes.com and www.pageflakes.com. Their users can arrange widgets (useful data from other servers) on the screen and adjust their size just like we usually do it in Microsoft Windows. These features are now increasingly found in business-applications. For example, at www.atlas.cz users can customize the starting page with as much ease as any virtual desktop.

The possibility to customize pages with the help of ready-made design templates reduced the dependence of CMS (Content Management Systems) users on site developers. Using the mouse a CMS administrator can arrange various data modules, specify their size, color and other attributes at a page. Then s/he can save the current configuration which will later be displayed to site users. Yet advantages provided by Drag&Drop technology to CMS administrators are even greater when it comes to site content management. In latest CMSs all the administrator has to do to change position of any document in the structure (or of an entry in the list) is to drag and drop it at the desirable point. It is exactly the way files are managed in Microsoft Window Explorer.

RIA

As we’ve already mentioned, with RIA there’s no need to upload all the user data at once. Parts of it can be uploaded later, when they are actually requested for. For example, when administrator switches to the CMS’s site structure management interface, only the basic level of the hierarchy tree is loaded. If later user wants to explore any of the tree’s “branches”, the additional data will be uploaded instantly. This feature is even more important in managing various lists. The application returns to the interface only those entries that user specifically requested. Moreover, even data input procedures acquire new features. Modern web-applications increasingly offer input option which acquired wide popularity thanks to Google Suggest service. As soon as you start to type something in the required field, a dropdown list appears with suggestions based on the already typed in elements. Those who at least once had to, say, choose a producer from a seemingly endless dropdown list in the SELECT field will fully appreciate the convenience of this feature.

RIA

The fact that there’s no need to reload the page every time its user performs an operation changes the very perception of a web-interface. You can type in data in several forms placed on one and the same page but, say, on different tabs. Then all the data can be saved simultaneously. And, importantly, in case due to some reason (a lost connection, an internal error etc) the data is not saved, the interface will report it and let you try again. And we all know only too well that poor security was one of the basic flaws with older-type web interfaces.

It is obvious that apart from everything else IRA-based sites can report the status of processes and their results. Today it is only perceived as natural when any element involved in some system operations displays their status on a special bar. Let’s say, for example, that you requested a list of specified items to be displayed by an e-catalogue. In that case you have the right to know what the system is up to from the moment of query to the moment the list is displayed. If due to some reason the server is unable to return the requested data, you should receive the corresponding message.

RIA

With RIA the functionality and security of CMSs reach a totally new level, which earlier was available only with desktop applications. Yet we should not forget that RIA-based interfaces are capable of interacting not only with their own server software, but with third-party applications as well. This fact lets us hope that present-day CMSs will gradually evolve towards ECM (Enterprise Content Management), thus bridging the gap between corporate sites and corporate network information resources.

May
5th

AHAH – Asychronous HTML and HTTP

AJAX ? AHAH ! sounds funny, but AHAH now stands for Asychronous HTML and HTTP, a technique for dynamically updating web pages using JavaScript, involving usage of XMLHTTPRequest to retrieve (X)HTML fragments which are then inserted directly into the web page, whence they can be styled using CSS. Nothing new until now, except that inspite of retreiving XML, AHAH stands for retreiving (X)HTML.

AHAH is intended to be a much simpler way to do web development than AJAX : “Asynchronous JavaScript and XML.” Strictly speaking, AHAH can be considered a subset of AJAX, since (X)HTML is just a special kind of XML.

The main reasons that made AHAH exists :

  • The lack of custom XML schemas dramatically reduces design time
  • AHAH can trivially reuse existing HTML pages, avoiding the need for a custom web service
  • All data transport is done via browser-friendly HTML, easing debugging and testing
  • The HTML is designed to be directly embedded in the page’s DOM, eliminating the need for parsing
  • As HTML, designers can format it using CSS, rather than programmers having to do XSLT transforms
  • Processing is all done on the server, so the client-side programming is essentiall nil (moving opaque bits)

This is a sample code for sending an AHAH request:

function ahah(url,target) {
// native XMLHttpRequest object
document.getElementById(target).innerHTML = 'sending...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ahahDone(target);};
req.open("GET", url, true);
req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {ahahDone(target);};
req.open("GET", url, true);
req.send();
}
}
}

Then to receive an AHAH request

function ahahDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="ahah error:n" +
req.statusText;
}
}
}

AHAH, also called JAH, for Just Asynchronous HTML, was introduced on May 12, 2005 by Kevin Marks. The term “AHAH” was proposed by Ernest Prabhakar during the 2005 Web 2.0 conference, and later adopted as part of the REST-Enabled XHTML microformat for web services. AHAH, now I understand better, did you ?

May
4th

Ajax in a Whitebox

We have already laid out some of the loopholes that could be used by different hackers. In this article we will take a look at a very basic hack that could be done even by none-developers and how to prevent it.

Personally, the biggest problem for any Ajax based developer is the transparency of the source code. To understand this let us take a look at different online applications that runs in a different language. An HTML application for example will only show you a source code with the input box and nothing else. That information is useless for hackers since it just translates a very small part of what they see. An HTML based application securely covers its source code and shows practically nothing. A hacker will probably use a sniffer (network traffic analyzer) but it will just show up some information on what server is used. In that point, a hacker may already create a hacking script but hackers will still have a long way to go through just to infiltrate an HTML-based website.

Unfortunately for Ajax, that is not the case. Ajax based applications have to “show” their source code to the client to ensure the program goes through. It is as simple as installing the right Firefox add-on tool that shows the actual code of the website to know the actual source code. Some even say that a website is not secure enough even the FrontPage application could show the source code. With that, hackers will practically know everything about your website and its process. If they have a sniffer, they can immediately build a small script to hack your website.

There are three recommendations I could give to somehow prevent others from seeing the actual source code:

1. Obfuscate JavaScript – quite an advanced word but it just actually tells the developed to confuse the hacker by getting them confused on what you are writing. There are tools that you can use that enable you to build a confusing website. But this will only confuse the hacker not the system. This will probably discourage the hacker but if the attacker sees the formula, you are back to square one in security.

2. Disable Right-Click Function – Remember those pesky messages that you see in a simple website where they do not allow copying? That will probably work on your website but not for long. Again, you are just buying some time for any hacker to think of alternatives to access your site. But this is good especially protecting yourself from newbie hackers.

3. Code Compression – There are web development companies that sell tools for code compression. To put it simply, the code is scrambled so that it will never be understood by any tool by hackers. Since this is a very complicated security tool, be sure to prepare a little bit of funding since these code compression tools will cost you.

Remember, the first two tips are just simple tricks to buy you time. Be sure to use this when you are just looking for a proper compression tool for your code.

May
4th

What is AJAX

On the surface, Ajax is the acronym for Asynchronous Javascript and XML. However, the acronym doesn’t describe an object, but a technique for web development. The definition incorporates a suite of technologies working in conjunction for web development. These techniques help produce more responsive and interactive web applications. Increased interactivity is required by web applications since so much of the marketplace and the services they require are currently electronic (the “e-market”) and conducted through the Internet.
Web applications allow applications to be accessed through web browsers rather than requiring software to be installed on individual computers. Webapps, as they are commonly referred to, are used to install and run many of the web-based activities that are now part of everyday life. For example, webapps are used to run Webmail, which includes all major e-communication applications that operate through a web browser, like Yahoo!Mail, Hotmail, and Gmail.
Webapps also help run on-line retail sales, auction sites, wikis, and Webblogs. They are essential to the many uses of the Internet we currently take for granted. The webapps supported by Ajax increase speed, interactivity and usability. By allowing web pages to exchange small bits of information with the server without the user’s knowledge, Ajax helps web applications seem more responsive and user-friendly. The entire page doesn’t need to be re-loaded every time a request is made. The ‘refresh’ function takes place behind the scenes.
This article will provide a general discussion of Ajax, its components and uses.

Background

The term Ajax was coined in 2005 by Jesse James Garret to describe a suite of technologies and approach he was presenting to a client. However, the impetus behind the development of Ajax was remote scripting initiated in 1995 by Microsoft. Remote scripting made it possible for interpreted programming languages to carry out functions through another program rather than by a computer processor that hardwired processing instructions.
Remote scripting allows scripts running inside a browser to communicate with and exchange information with a server. Microsoft’s Remote Scripting (MSRS, 1998) allowed for asynchronous loading of specified content without requiring full web page reload, similar to Ajax. Java applets allowed clients to communicate through Javascript, thereby facilitating asynchronous loading through a common language. This developed into Microsoft’s XMLHttpRequest which was introduced in 2000 on Microsoft’s Internet Explorer 5.
Online collaboration in the web development community through newsgroups and blogs, helped XMLHttpRequest replace Java applets for asynchronous web content loading. XMLHttpRequest is an API (application programming interface) that Javascript and certain web browser scripting languages use to move data between web servers (server-side) and users (client-side) using “http” (hypertext transfer protocol). This made communication easier, more standardized and, therefore, more translatable. It is one of the primary components of Ajax technology. However, there is much more technological collaboration that makes Ajax possible.

Components

The technological components that collaborate to make up Ajax technique are various. But, they all work together to increase web page user-friendly accessibility. XHTML is a markup language that provides a more rigid syntax than HTML. It is an intersection of HTML and XML. This provides a broader impact by using the standard XML library to communicate document content. Ajax also requires JavaScript or other client-side scripting language. Client-side scripting languages allow web pages to tailor their content according to user specifications. As previously mentioned, XMLHttpRequest allows asynchronous data exchange with the web server. XML provides a standardized format for client-server transfer of data.

Points of Interest

The primary reason for the development of Ajax was to by-pass existing page-loading requirements through HTML/HTTP-defined web pages. Ajax redefines user web-page interfaces as dynamic, intelligent and based on data. Web pages usually require the heavy operation of reloading the entire page each time a user needs a different dataset to request a different function. Ajax intuitively requests and uses data, through XMLHttpRequest, to make loosely coupled web pages act like tightly coupled applications.
The only interference is the lag time required for the communication to pass though the web browser and this happens almost instantaneously. This allows for a more intelligent recruitment of data based on user specifications. Perhaps the most popular applications of Ajax are observed in Google applications like Google Maps, Google Suggest, and Gmail.

May
3rd

Ajax Security Tips

We are always emphasizing on securing our websites especially when they are Ajax based. There are so many blogs that were written reminding developers the weakness of Ajax because of its complexity. We’ve also written ourselves some tips to ensure the program you just created is as user friendly as it is secure.

But as time goes by, newer hacks are invented so new security measures have to be done. Here are the updated tips that any developer should observe if they are interested in created and maintaining the security of their Ajax based website.

1. Tightening the screws in your code – when you create a program, you don’t just build a program and create codes that coincide with security measures. Apparently, hackers and even security experts already know this and they have come up with another workaround to access the vulnerable Ajax. Be sure not to leave any leaks at all. As what they say, prevention is better than cure.

2. When developing software, use the prototype approach – RAD (Rapid Application Development) and Agile Development Framework are two of the development models that always rely on creating prototypes. As much as possible, use these models so that each part of the program will be thoroughly checked not only in function but also in security.

3. Sandboxing – This term applies to the security measure that is observed in different programs. Before a new application, code or content will be admitted in the program, sandbox will test it in their system first to ensure the code or the information is safe. This is really challenging in an Ajax based code but it’s all worth it as most Ajax based program are used in Web 2.0 sites.

4. Investing in code review tools – the money spent in ensuring the program is secured is better than money spent on recuperating the loss you have because of the lack of internet security. There are two types of code review tools: architecture and code review. Architecture looks at the program in general while code review takes a look each tool to see if there are bugs. Bugs are actually not hacks so code review will not suffice as it could only take care of at least half of the security problems.

5. Hack the program yourself – of course you already know how it works inside and out, create a simulation where you’ll be place the program under attack. Don’t just do this yourself but do it with your fellow developers as well. Although you might have already done this, give it a little boost by documenting every move you make. It is through this documentation that you can actually run a diagnostic test in case something bad happens.

6. Get outside help – if you’re familiar with the program, chances are it’s going to be very easy. Get someone from the outside to hack the program for you. Remember, document all the programmer’s movements and the program’s responses to ensure you have future reference in case an attack happens.