Creating a Gists Webpage With ReactJS

I decided to build a simple ReactJS webpage to render my personal Gists from GitHub as an basic kata.

However while the ReactJS part was fairly straightforward I was once again reminded about Cross Site Scripting (XSS) issues when trying to call API’s from another domain using javascript. Thankfully JQuery jsonp still works:

componentDidMount(){
    $.ajax({
      url: "https://api.github.com/users/m-x-k/gists",
      jsonp: "$jsonp"
    }).done(function(data) {
      console.log(data);
      this.setState({gists: data});
    }.bind(this));    
}

Obviously in a production situation this isn’t what we would rely on. Reverse proxies like Nginx, HAProxy or Apache are much better suited to revolve these types of issues. Ideally we would setup a reverse proxy on “api.github.com” so that we can share a common domain for the client side requests. For example if your web page url was http://my.gists.com/index.html you might setup a reverse proxy like http://my.gists.com/api/m-x-k/gists.
Note: while its possible to mitigate the problem with headers it’s not an ideal solution as it depends on browser support.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s