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.

See the pen on CodePen.