Blog

Signals Blog

Build Interconnected Chemistry Applications with Cross-Origin Resource Sharing (CORS)

A recent post about the Structure-Data Grid in HTML included an example in which molfiles were requested via a JavaScript HTTP call. However, if you try to repeat this example using URLs to your own server's molfiles, the attempt may fail. This posts explains why and shows how to solve the problem.

The Same-Origin Policy

For many years, JavaScript HTTP requests were limited by the Same-Origin Policy. In a nutshell, it was impossible to make an XMLHttpRequest to any hostname other than that of the current page.

There were loopholes, the most important of which being the <script> tag, which could point to any hostname. Over time this led to the JSONP workaround. However, this approach is not always easy to implement and does come with some important security considerations.

CORS

Cross-Origin Resource Sharing (CORS) is an increasingly used W3C Candidate Recommendation that enables client-side JavaScript to fetch data from any URL. CORS was the key component of the recent Structure-Data Grid post.

CORS on the Server

In the simplest case, CORS is implemented by adding a single server-side HTTP header:

Access-Control-Allow-Origin: *
 

You can see the Access-Control-Allow-Origin header at work on the ChemWriter website server, on which the molfiles in the Structure-Data Grid example were hosted.

$ curl -I http://chemwriter.com/data/structure-1.mol
HTTP/1.1 200 OK
Server: nginx/1.4.1
Date: Tue, 27 Aug 2013 18:49:13 GMT
Content-Type: application/octet-stream
Content-Length: 9716
Last-Modified: Tue, 16 Jul 2013 23:47:00 GMT
Connection: keep-alive
ETag: "51e5db74-25f4"
Access-Control-Allow-Origin: *
Accept-Ranges: bytes
 

The CORS website describes how to implement CORS within a variety of server environments.

CORS on the Client

For most HTML 5-capable browsers, CORS requests are made with XMLHttpRequest just like any other HTTP request. However, Internet Explorer 9 requires the XDomainRequest object when making CORS requests. Unfortunately, this object is not without its quirks.

Fortunately, ChemWriter handles the details to ensure that requests for molfiles can be made to any server using the same simple mechanism - regardless of the browser currently in use.

Cross-Origin Image
<!DOCTYPE html>
<html>
  <head>
    <title>Blank Table-Based Grid</title>
    <script src="https://chemwriter.com/sdk/chemwriter.js"></script>
    <link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css">
  </head>
  <body>
    <h1>Ciguatoxin</h1>
    <div style="width: 500px; height: 300px;">
      <div data-chemwriter-ui="image" data-chemwriter-src="http://chemwriter.com/data/structure-1.mol"></div>
    </div>
  </script></body>
</html>

Applications

Enabling CORS on a public-facing chemical structure database opens up exciting new possibilities for building interconnected web applications. Rather spend valuable resources building and hosting their own molfile collections, for example, sites working with a CORS-enabled server can simply link to existing resources. Files and complex datasets can then be pulled together from any number of sources and assembled by a JavaScript application running in a standard browser.

PubChem, a large public-facing chemical database, has already implemented the Access-Control-Allow-Origin header on its raw chemical data collection.

Conclusions

CORS offers a fundamentally new way for scientific web applications to share data and work together. Although implementation is not without costs on the server and client, the burden is relatively low compared to the potential payoff.

Resources