Proxy server with JavaScript

Circumventing Same-Origin Policy Using a Proxy Server
Best free anonymous proxy server usa - Best free anonymous proxy

I had problems wrapping my head around same-origin policy the first time I encountered it, and I’ve found a lack of in-depth articles about how to deal with it. What follows is a small discussion of what same-origin policy is, and one simple solution for getting around it.

Same-origin policy restricts scripts contained in a web page from accessing data in a second web page unless they share the same origin. It’s a security measure enforced by browsers that restricts malicious websites from running JavaScript inside of websites they don’t own. This article has a good example of the kinds of problems same-origin policy is meant to address:

Assume you are logged into Facebook and visit a malicious website in another browser tab. Without the same origin policy JavaScript on that website could do anything to your Facebook account that you are allowed to do. For example read private messages, post status updates, analyse the HTML DOM-tree after you entered your password before submitting the form.

To protect against these scenarios, browsers restrict this kind of access by default. It is possible, using CORS, to configure a server to allow requests from client-side applications running on outside domains. But this means that if your app uses JavaScript in the browser to interact with a third-party server, you need to have some level of administrative control over that API server. This is often not the case!

The Solution

One common situation is fetching third-party API data with your client side JavaScript application. Same-origin restricts this, so how do you do it? One solution is to use a proxy. The concept is simple: You insert your own server in-between your app and the third-party server. There is no browser enforced same-origin limitation on server-to-server communication, and you do have the administrative control necessary to configure your proxy server to allow requests from your app’s domain.

Your proxy server sits between your JavaScript application and the third-party API server. It takes requests from your application, fetches data from the third-party API, and then forwards that data back to your application in a response that authorizes it using the Access-Control-Allow-Origin header.


Related posts:

  1. Proxy Browser with JavaScript
  2. Proxy server with Port
  3. Proxy server with Java