What is GWT-RPC ?

Google Web Tool-kit (GWT) provides couple of different ways to communicate with the server using HTTP. GWT-RPC is a framework to make a transparent server-side call where GWT takes care of all other low level details , like , object serialization etc.
When your application running in the browser , it needs to interact with the server using a Remote Procedure Call (RPC).GWT provides an RPC mechanism based on Java Servlets to provide access to server side. GWT uses deferred binding to serialize objects across the network. You can read more on GWT-RPC from here.

The application : User Creation Application

The funny thing is , My application creates User alone. Yes , it doesn’t do anything else other than creating user and storing them to the database. But , the important thing is , it uses GWT-RPC and gives enough scope of learning to build an application using GWT-RPC or GWT. My create user screen look like ,

Create User Screen

Setup details :

• Launch your favorite Java IDE. I have used eclipse which can be downloaded from here. If you are not so comfortable with eclipse , you can learn it from here.
• Configure the GWT plug-in for eclipse. Learn how , here.
• Download the project from here and extract into a folder of your choice.
• Download the MySQL Connector/J and copy the jar to the /war/WEB-INF/lib directory.
• Import the extracted project to your eclipse.

Once the project is imported to eclipse , the project structure should be like following :

Project Directory Structure

Now we are all set to go. GWT-RPC uses servlets to communicate with the server-side. GWT provides a servlet called , RemoteServiceServlet. This is a base servlet class for your RPC service implementations. It helps you to automatically deserializes incoming requests from the client and serializes outgoing responses for client/server RPCs.

You should do the following to set your GWT-RPC interface ,

• Create a service interface – Create an interface for your service that extends RemoteService and lists all RPC methods.
• Create a service implementation – Create a class to implement the server-side logic. The class should extends RemoteServiceServlet and implements the interface you created in the above step.
• Create an asynchronous interface to your service to be called from the client-side code.

Create a service interface :
Our Create User program requires at least two service methods . One is to check if the user is already exist in the database and other one is to Save the User into the databse.

import com.etechguide.project.gwtrpcdb.client.exception.UserException;
import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;

/**
 * The client side stub for the RPC service.
 */
@RemoteServiceRelativePath("user")
public interface UserService extends RemoteService {
	 String createUser(User user) throws UserException;
	 boolean checkUserExist(String userName) throws UserException;

}

I have defined both the methods in my service interface. The service interface is annotated with the annotation , @RemoteServiceRelativePath(”user”). This annotation associates a RemoteService with the relative path(/user). we will use this relative path(/user) in the web.xml file while defining the servlet.

Create a service implementation :
This class should extends RemoteServiceServlet and implements the UserService interface . As this implementation class extends RemoteServiceServlet , it is a servlet class by itself.

/**
 * The server side implementation of the RPC service.
 */
@SuppressWarnings("serial")
public class UserServiceImpl extends RemoteServiceServlet implements
		UserService {

	UserDao userDao = new UserDao();
	@Override
	public String createUser(User user) throws UserException {
		String retVal = "true";
		if (!Validator.isValidName(user.getUserName())) {
			throw new UserException(
					"User name must be at least 5 characters long");
		}
		try {
			userDao.createUser(user);
		} catch (ClassNotFoundException e) {
			retVal = "false";
			throw new UserException(e.getLocalizedMessage());
		} catch (SQLException e) {
			retVal = "false";
			throw new UserException(e.getLocalizedMessage());
		}

		return retVal;
	}

	@Override
	public boolean checkUserExist(String userName) throws UserException {
		return userDao.checkUserExist(userName);
	}
}

The implementation class , UserServiceImpl uses the Data Access Object (DAO) to call the data base related methods. The DAO (UserDao.java) would look like ,

public class UserDao {

	Connection connection = null;
	Statement stmt = null;

	public void createUser(User user) throws ClassNotFoundException,
                     SQLException{
		String query = null;
		StringBuilder queryBuilder = null;
		queryBuilder = new StringBuilder();
		queryBuilder.append("INSERT INTO user(userName,password,");
		queryBuilder.append("emailId,address)");
		queryBuilder.append(" VALUES( ");
		queryBuilder.append("'"+user.getUserName()+"'");
		queryBuilder.append(",");
		queryBuilder.append("'"+user.getPassword()+"'");
		queryBuilder.append(",");
		queryBuilder.append("'"+user.getEmailId()+"'");
		queryBuilder.append(",");
		queryBuilder.append("'"+user.getAddress()+"'");
		queryBuilder.append(" )");

		query = queryBuilder.toString();
		System.out.println("query from createUser = " + query);
		System.out.println("user to be created ... " + user.toString());
		connection = DbConnection.createConnection();
		stmt = connection.createStatement();
		stmt.executeUpdate(query);
		DbConnection.closeConnection(connection, stmt);
	}

	public boolean checkUserExist(String userName) throws UserException {
		boolean isExist = false;
		String query = null;
		StringBuilder queryBuilder = null;
		ResultSet rs = null;
	    int rowCount = -1;
		queryBuilder = new StringBuilder();
		queryBuilder.append("SELECT count(*) FROM user WHERE userName= '");
		queryBuilder.append(userName);
		queryBuilder.append("'");
		query = queryBuilder.toString();
		System.out.println("query from checkUserExist = " + query);
		try {
			connection = DbConnection.createConnection();
			stmt = connection.createStatement();
			rs = stmt.executeQuery(query);
			rs.next();
			rowCount = rs.getInt(1);
			if(rowCount > 0){
				isExist = true;
			}
		} catch (ClassNotFoundException e) {
			throw new UserException(e.getLocalizedMessage());
		} catch (SQLException e) {
			throw new UserException(e.getLocalizedMessage());
		}finally{
			try {
				DbConnection.closeConnection(connection, stmt,rs);
			} catch (SQLException e) {
				throw new UserException(e.getLocalizedMessage());
			}
		}
		return isExist;
	}

}

So , as of now the story is , you have User Service and the Implementation of that. The Implementation is nothing but a servlet. We call all the database related methods from the implementation class. As it is a servlet and we are building a web application , we must declare this servlet in the web.xml file which is the main deployment descriptor file for any web application. The web.xml file is like ,

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app
    PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
    "http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>

  <!-- Servlets -->
  <servlet>
    <servlet-name>userServlet</servlet-name>
    <servlet-class>
    	com.etechguide.project.gwtrpcdb.server.UserServiceImpl
    </servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>userServlet</servlet-name>
    <url-pattern>/gwtrpcdb/user</url-pattern>
  </servlet-mapping>

  <!-- Default page to serve -->
  <welcome-file-list>
    <welcome-file>GwtRpcDB.html</welcome-file>
  </welcome-file-list>

</web-app>

Look at the url-pattern , it’s the MODULE_NAME/user which we have already specified with RemoteServiceRelativePath in the User Service. Now it is the time to write the asynchronous interface so that the client can use the services created by us.

Create an asynchronous interface :

import com.google.gwt.user.client.rpc.AsyncCallback;

public interface UserServiceAsync {
	void createUser(User user, AsyncCallback<String> callback)
			throws IllegalArgumentException;

	void checkUserExist(String userName, AsyncCallback<Boolean> callback);
}

You should follow certain rules while creating the asynchronous interface.

• The interface name should be the actual service name suffix with the word ‘Async’
• The interface should have the similar methods that the actual service has with some exceptions.
  1. The method should not have any return type other than void.
  2. The methods should have an extra parameter at the end( AsyncCallback<String> callback). Here the <String> is the return type of the method in the actual service(User Service).
• The methods in the async interface are allowed to throw Run-time Exceptions only.

Lets call out services from a client side code. Have a look at the following code.

/**
   * Create a remote service proxy to talk to the server-side User service.
   */
	private final UserServiceAsync userService = GWT
			.create(UserService.class);

userService.createUser(user,
						new AsyncCallback<String>() {
							@Override
							public void onFailure(Throwable caught) {
								// Show the RPC error message to the user
								Window.alert(caught.getLocalizedMessage());

							}
							@Override
							public void onSuccess(String result) {

								if(result.equals("true")){
									Window.alert("User Created Successfully");
								}else{
									Window.alert("User Creation failed");
								}
								clearAll();

							}

						});

nameField.addBlurHandler(new BlurHandler() {
			@Override
			public void onBlur(BlurEvent event) {
				final String userName = nameField.getText();
				if(userName != null
                               && userName.length() >0){
					userService.checkUserExist(userName,
                                                new AsyncCallback<Boolean>() {
						@Override
						public void onFailure(Throwable caught) {
							Window.alert(caught.getLocalizedMessage());

						}
						@Override
						public void onSuccess(Boolean result) {
							if(result.booleanValue()){
								errorLabel.setText("");
								errorLabel.setText(userName+" taken");
								errorLabel.setStyleName("errorLabel");
							}else{
								errorLabel.setText("");
								errorLabel.setText(userName+" available");
								errorLabel.setStyleName("successLabel");
							}
						}
					});
				}
			}
		});

First we create a remote service proxy to talk to the server side user service. Once the proxy is created we give a call to the service methods. We create an anonymous callback class instance and pass to the service methods. AsyncCallback interface has two methods , onSuccess() and inFailure(). Once a request is success and completed , the onSuccess() method gets called. If there is a failure , onFailure() method gets called. One thing to note here , onSuccess() method’s parameter’s type should be same of the service’s called method’s parameter type.

Thats all !! Download the project and start exploring more. Please feel free to write comments if you like it or would like to see any improvement on this post.

Label myLabel = new Label();
myLabel.setText("This is my label");
myLabel.setHtml("This<br>is<br>my<br>label"); // compilation error

To achieve this , you can create your own customized label which extends com.google.gwt.user.client.ui.Widget. Have a look at the following code.

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.Widget;

public class HTMLLabel extends Widget {

	public HTMLLabel(){
		this(null);
	}

	public HTMLLabel(String text)
	{
		setElement(DOM.createLabel());
		if(text != null)
			DOM.setInnerText(getElement(), text);
	}

	public String getText()
	{
		return DOM.getInnerText(getElement());
	}

	public void setHTML(String html){
		DOM.setInnerHTML(getElement(), html);
	}

	public String getHTML(){
		return DOM.getInnerHTML(getElement());
	}
}

We have created a class (HtmlLabel) extending the Widget class provided by GWT. At the line 12 ,we created a label by using the DOM class inside the parametrized constructor . Now we should expose a method so that consumer of this class can set a HTML to the created Label element. At the line 22 , we exposed a method where we set the inner HTML of the created label element.

A consumer of the HTMLLabel can create the HTML label in the following way,

HTMLLabel htmlLabel = new HTMLLabel();
htmlLabel.setHTML("This<br>is<br>my<br>label");

The output is a HTML label. As we have extended the Widget class , you can easily associate any event handlers to the HTML label that supported with normal GWT label. You can also create a SPAN element in GWT by following the above methodology of extending Widget class. I will discuss the SPAN element creation in my future post.

A Path Traversal attack targets the files and directories which are saved outside the root folder. An attacker aims for a files path stored in the web server. An attacker use the combination of dot-dot-slash(../) to browse to arbitrary directories and files. The dot-dot-slash sequence helps an attacker to move up in any directory location. The attacker not only can access any arbitrary files/directories from your web server , it is possible to upload some malicious files to some location in your web server , if the proper care is not taken.

The attack can be made in several different ways. An attacker might not use the dot-dot-slash patter directly in the url , rather can use the Encoding and double encoding value of dot(.) and slash(/).
..%2f represents ../
..%255c represents ..\
%2e%2e\ represents ..\ and so on.
Hence an attacker can use the following type of urls to play with your web server files and directories,
http://web_site.com/toGetFiles?file=../../../../dir/file
http://web_site.com/toGetFiles?file=…%255cdir/file
depending on your operating systems.

How to protect the web application from this attack ?

Anything from an web application can be accessed using a request to the application. Hence we need a strict sanity check for all the possible dot-dot-slash patterns on each request coming to the web application.
The check should be performed well before a request reaches in a state to have response for it. It means , a web application pre-filter should be written to achieve this.

You need to do modification in the web.xml of your web application. Add the following tag in your web application :

Listing 1 : Add filter tag to web.xml file

<filter>
    <filter-name>PTA</filter-name>
        <display-name>PTA</display-name>
        <description>This is a Pre-filter for PTA Prevention</description>
    <filter-class>com.etechGuide.fw.filter.PathTraversalFilter</filter-class>
</filter>
<filter-mapping>
         <filter-name> PTA</filter-name>
         <url-pattern>/*</url-pattern>
</filter-mapping>

As we are looking for filtering all the request and we would like to pass all the request through the filter. Hence we will be writing a Request Wrapper to code our filter logic. Look at the following filter definition.

Listing 2 : The PathTraversalFilter code

public class PathTraversalFilter implements Filter {
	private FilterConfig filterConfig;
	public void init(FilterConfig filterConfig)
                              throws ServletException {
		this.filterConfig = filterConfig;
	}

	public void destroy() {
		this.filterConfig = null;
	}

	public void doFilter(ServletRequest request,
                 ServletResponse response,FilterChain chain)
                           throws IOException, ServletException {

		chain.doFilter(new RequestWrapper((HttpServletRequest) request),
				response);

	}
}

At the line number 16 we wrap the request to filter out all the malicious attacks for Path Traversals. have a look at the RequestWrapper.java file where the actual filtering bypass takes place.

Listing 3 : The RequestWrapper code

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletRequestWrapper;

public final class RequestWrapper extends HttpServletRequestWrapper {

	public RequestWrapper(HttpServletRequest servletRequest) {
		super(servletRequest);
	}

	public String[] getParameterValues(String parameter) {

	  String[] values = super.getParameterValues(parameter);
	  if (values==null)  {
                  return null;
          }
	  int count = values.length;
	  String[] encodedValues = new String[count];
	  for (int i = 0; i < count; i++) {
                 encodedValues[i] = cleanPTA(values[i]);
	   }
	  return encodedValues;
	}

	public String getParameter(String parameter) {
		  String value = super.getParameter(parameter);
		  if (value == null) {
		         return null;
                  }
		  return cleanPTA(value);
	}

	public String getHeader(String name) {
	    String value = super.getHeader(name);
	    if (value == null)
	        return null;
	    return cleanPTA(value);

	}

	private String cleanPTA(String value) {
		// Bypassing all possible dot-dot-slash
                value = value.replaceAll("%2e", "");
		value = value.replaceAll("%2f", "");
		value = value.replaceAll("%5c", "");
		value = value.replaceAll("%25u002e", "");
		value = value.replaceAll("%25u002f", "");
		value = value.replaceAll("%25u005c", "");
		value = value.replaceAll("%c0", "");
		value = value.replaceAll("%ae", "");
		value = value.replaceAll("%af", "");
		value = value.replaceAll("%c1", "");
		value = value.replaceAll("%9c", "");
		value = value.replaceAll("%e0", "");
		value = value.replaceAll("%80", "");
		value = value.replaceAll("%f0", "");
		value = value.replaceAll("%81", "");
		value = value.replaceAll("%f8", "");
		value = value.replaceAll("%fc", "");
		value = value.replaceAll("%25uff3C", "");
		value = value.replaceAll("%25u002E", "");
		value = value.replaceAll("%5C", "");
		value = value.replaceAll("%2F", "");
		value = value.replaceAll("%25uff0E", "");
		value = value.replaceAll("%25uff0F", "");
		value = value.replaceAll("%25ufe68", "");
		value = value.replaceAll("%00", "");
		value = value.replaceAll("%2A", "");
		value = value.replaceAll("%25", "");
		value = value.replaceAll("\\|", ""); 

                /* File.separator is different from one OS to another.
                    Hence the additional check is done below
                */
		String sFileName = value
				.substring(value.lastIndexOf(File.separator) + 1);

		if (sFileName.indexOf("..") >= 0) {
			sFileName = value.substring(value.lastIndexOf("..") + 2);
		}
		if (sFileName.indexOf("\\") >= 0) {
			sFileName = value.substring(value.lastIndexOf("\\") + 1);
		} if (sFileName.indexOf("/") >= 0) {
			sFileName = value.substring(value.lastIndexOf("/") + 1);
		}
		return sFileName;
	}
}

cleanPTA(String value) method of above class does all the bypassing. This method is open for modification to the reader of this post. The logic can be changed as per the need but the basic by passing is all about what is done above.

Once a request reaches your web application , it has to go through the filter. The filter uses a wrapper on each request and filter out all the malicious attacks.

Listing 1 : Servlet Mapping

<web-app xmlns=”http://java.sun.com/xml/ns/j2ee”
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd”
version=”2.4”>
<servlet>
<servlet-name>CustomerServlet</servlet-name>
<servlet-class>com.etechGuide.CustomerDetailsServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CustomerServlet</servlet-name>
<url-pattern>/getCustomer</url-pattern>
</servlet-mapping>
</web-app>

The URL to access the CustomerServlet should be something like this,
http://YOUR_SERVER_IP:SERVER_PORT/CONTEXT_ROOT/getCustomer
(example : http://localhost:8080/customerdeal/getCustomer) .
Have a look at the above URL to access the servlet. We call the servlet by it’s url-pattern defined into the web.xml , not by it’s servlet-name. So what is the use of the tag? This is for use in other part of the web.xml. A client request a servlet.Requesting a servlet to get the servlet instantiated is done in the following way,

1. Request come to the web server in the form of a URL(http://localhost:8080/customerdeal/getCustomer)
2. Container look at the URL and find the possible url-pattern (in this case it is , getCustomer) in the URL.
3. Container look for the url-pattern inside any servlet-mapping tag into the web.xml file.
4. Once the url-pattern found , container locates the servlet-name tag , inside servlet-mapping tag(servlet name is CustomerServlet in the Listing 1).
5. Once the servlet-name is located , container search for the same servlet-name under a servlet tag.
6. If found , container locates the servlet-class tag element associated with the servlet-name tag it found in the above step.
7. If the servlet class (it is com.etechGuide.CustomerDetailsServlet in the Listing 1) is found , container instantiate the servlet.

So , now we know the importance of the servlet-name in servlet mapping. Servlet name is something client should not bother about but a web developer should map it carefully.
Lets have a look at the url-mapping tag closely. In the above example, url-pattern is getCustomer. Question is , is getCustomer is a resource in the server ? What does the client to do with url-pattern ? Does he really need to bother about it ? No. It is not a resource and client does not have to bother about the meaning of the url-pattern. The URL should have url-pattern in any of the following forms ,
EXACT Match URL Pattern :

<url-pattern>/Customer/getCustomer.do</url-pattern>

This type of pattern must begin with a slash(/) and might have or not have an extension(.do).

EXTENSION Match URL Pattern :

<url-pattern>*.do</url-pattern>

This type of pattern must not begin with a slash(/) but must begin with a asterik(*). There must be an extension(do , com etc) specified after the period(.).

DIRECTORY Match URL Pattern :

<url-pattern>/Customer/*</url-pattern>

This kind of pattern must start with a slash(/) followed by a real or virtual directory name. It must end with a slash(/) and an asterik(*).

lets take an example of an application which supports user management and keeps track of the users accessed by Admin in a History.Requirement is to persist the history information in such a manner so that it should be accessible well after application restart or server restart.So XML could be one of the option where you can write the history info and read it back whenever required.If the XML is to be placed in your war file , it has to be under web/ or web/ where web is your web content directory. The problem with modifying any of the resources under web content directory is , you need to restart your server(tomcat) to see the effect.

Just think about a situation where an admin had accessed 100 users and your code to write to XML executed perfectly to write to the XML file under web content directory.If admin wish to see the history browsing to the history page , he would not be able to see the latest history without restarting the server and the application.You would have written to the XML file successfully but to have the effect of getting the updated(recently written) value , server must be restarted. This is time consuming and none of web application can wait for it.

Solution of this problem is to write the history details in a Collection(it can be a list , map , array) or in a string. populate your GUI(History page) from the collection (of history) or the String. Write the collection to the XML file on log-out from the application.

Lets discuss in a step by step manner.
Step 1 : Put(or insert) all the History object in a collection
Step 2 : For each action listener , if the history is modified ( added or deleted) , modify the History collection.
Step 3 : Make your GUI to read the details(History details) from the collection , not from the history directly.
Step 4 : Write to the XML file , on log-out from the application
Step 5 : Have mechanism to read the XML and populate the Collection on log-in to the application.

Lets have a look at the following picture.

Flow Diagram

This way , you can have your GUI rendering the recent data and can sync the XML file on log-out. There must be different ways to deal with this. Reader of this post is expected to share if any other ways are known.

window.opener.location.reload(true);

This small code is very useful when you try to reflect your changes in parent window on change of anything in your child(opened) window.

I would like to request you all to share other mechanisms to refresh the window using javaScript.

responseVal = response.responseText

If response is in the form of Xml ,

responseVal = response.responseXML

or an object then? Manipulating response always takes some extra effort .

Image Details object

imageDetails = response.split(",");

With XML response , we would get a DOM representation of the text using the request object’s responseXML property.Then we have to use all the DOM mechanisms to work with the object , instead of actual property names.
Here we ca think of something called JSON , i.e JavaScript Standard Object otation.If you need to represent object in your JavaScript, then you should look at Json.When you get Json data from server, you are just getting text which can be easily converted into a JavaScript Object. then you can use dot notation to access the propertirs(fields) of an object like, var imageId = imageDetailsObj.id; When server sends a Json data , the data comes to you as a text , so , it is easy to get the response data using responseText propery of the request object. var jsonata = request.responseText; Lets see , how a Json data look like ,

imageDetails = {"id" : "roseImage",
				"description" : "Rose is red",
				"resources":["http://www.etechGuide.in/",
							"http://www.roseValie.com"]}

Json data is enclosed within curly braces : {json data}. The above imageDetails is an Json object(enclosed in curly braces) consists of two Json String , “id”:”roseImage” and “description”:”Rose is red”. The imageDetails json object has an array which is enclosed in quare braces:[json array]. Each json string is a key-value pair , like , id : roseImage etc.
Once we get the Json object in response text , we have to evaluate the Json text to convert into a java script object. JavaScript provides a very strong method called eval(); which helps us to convert the Json text into a object form. If you pass a text to the eval method , JavaScript would run the statement and give back the result. Hence ,

var imageDetails = request.responseText;
imageDetails = eval('(' + imageDetails + ')');

would convert the servers response into an object. Once the eval() executed , you can access the object property directly as , imageDetails.id , imageDetails.description , imageDetails.resources. You can get all the image resource urls as,

for(var i=0; i<imageDetails.resources.length; i++) {
  var resource = itemDetails.resources[i];
}

Calling eval(); does a lot to evaluate the Json data but we need some more steps to make sure the following things are takes care.
1. A malicious script is not there in our Json data coming from the server.
2. The Json data coming from the server is well-json-formatted.
A simple eval(); can not do all the above. We need a parser to do so. Fortunately http://www.json.org provides a Json parser that does all the above.You can download the script from json.org named json2.js and then use the following command to parse Json-formatted data ,

var imageDetails = JSON.parse(request.responseText);

The JSON object is created when json2.js is loaded by the web browser.parse() method takes the string as an input and return the an object if the input string is a valid Json-formatted data. So it’s always good to use JSON.parse(String) instead of eval().

function newXMLHttpRequest() {
var xmlreq = false;
if (window.XMLHttpRequest) {
// Create XMLHttpRequest object in non-Microsoft browsers
xmlreq = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// Create XMLHttpRequest via MS ActiveX
try {
// Try to create XMLHttpRequest in later versions of Internet Explorer
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
// Failed to create required ActiveXObject
try {
// Try version supported by older versions of Internet Explorer
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
// Unable to create an XMLHttpRequest with ActiveX
}
}
}
return xmlreq;
}