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:

      url: "",
      jsonp: "$jsonp"
    }).done(function(data) {
      this.setState({gists: data});

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 “” so that we can share a common domain for the client side requests. For example if your web page url was you might setup a reverse proxy like
Note: while its possible to mitigate the problem with headers it’s not an ideal solution as it depends on browser support.


Leave a Reply

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

You are commenting using your 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