Cross-site Requests

At this point, you've modified the initial implementation of the StockWatcher application, which simulated stock data in the client-side code. The current implementation now retrieves JSON-formatted data from your local server.

In this session, you'll make a call to a remote server instead. To do so you will have to work around SOP (Same Origin Policy) constraints.

  1. Review the requirements and design: access restrictions and asynchronous communication.
  2. Create a source of JSON data on a remote server.
  3. Request the data from the remote server.
  4. Handle the response.
  5. Test.

Note: For a broader guide to client-server communication in a GWT application, see Communicate with a Server.

Before you begin

The StockWatcher project

This tutorial builds on the GWT concepts and the StockWatcher application created in the Build a Sample GWT Application tutorial. If you have not completed the Build a Sample GWT Application tutorial and are familiar with basic GWT concepts, you can import the StockWatcher project as coded to this point.

  1. Download the StockWatcher project (with JSON).

  2. Unzip the file.

  3. Import the project into Eclipse

    1. From the File menu, select the Import... menu option.
    2. Select the import source General > Existing Projects into Workspace. Click the Next button.
    3. For the root directory, browse to and select the StockWatcher directory (from the unzipped file). Click the Finish button.

If you are using ant, edit the gwt.sdk property in StockWatcher/build.xml to point to where you unzipped GWT.

In order to actually run this tutorial, you will need either access to a server other than where StockWatcher is running, one that can run a PHP script, or be able to run a Python script on your machine.

Reviewing the requirements and design

As you modify the current implementation of StockWatcher to access data on a remote server, there are two issues to address:

  • Access Restrictions: SOP (Same Origin Policy)
  • Asynchronous Communication

Access Restrictions: Same Origin Policy

The Same Origin Policy (SOP) is a browser security measure that restricts client-side JavaScript code from interacting with resources not originating from the same domain name, protocol and port. The browser considers two pages to have the same origin only if these three values are the same. For example, if the StockWatcher application is running in a web page on http://abc.com:80 it cannot interact with stock data loaded from a different domain, http://xyz.com. It can't even load stock data from the same domain if the port is different, for example, http://abc.com:81.

The idea behind SOP is that, for security reasons, the browser should not trust content loaded from arbitrary websites. A malicious web page could inject code that steals data or otherwise compromises security.

As such, for accessing JSON-formatted stock data from another domain or port, the current implementation will not work. The web browser will block the HTTP call to retrieve the JSON.

For a more detailed description of SOP and its effect on GWT, read What is the Same Origin Policy, and how does it affect GWT?

Working around SOP

There are two options for working around SOP security:

  • Proxy on your own server
  • Load the JSON response into a