A Simple Cors Proxy for Javascript Browser applications

Sometimes there are use cases when we have to call third party services (APIs) where cors are not allowed or only enabled for production or have to be dependent on a third party for it. In this post, I will discuss how cors works and then will create a basic cors proxy in Node as a workaround for the cases I have mentioned.

Before writing a Cors proxy it is important to understand how cors works. So let’s get started.

CORS

When you run a web server you can not access images, APIs, etc from different servers if CORS is not enabled by a server(Same origin policy). For example, you are running a web server A and you want to access an ImageB from a server B, You can not access ImageB unless CORS is enabled by Server A.

Image Courtesy: https://www.codecademy.com/

So what is CORS?

Cross-Origin Resource Sharing (CORS) is a security mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource(Images, Scripts, CSS files, etc.)that has a different origin (domain, protocol, or port) from its own.

Cross-origin requests, however, mean that servers must implement ways to handle requests from origins outside of their own. CORS allows servers to specify who (i.e., which origins) can access the assets on the server, among many other things.

How CORS works?

Cross-origin requests are managed by adding new HTTP headers to the standard list of headers. The following are the HTTP headers added by the CORS standard:

• Access-Control-Allow-Origin
• Access-Control-Allow-Credentials
• Access-Control-Allow-Headers
• Access-Control-Allow-Methods
• Access-Control-Expose-Headers
• Access-Control-Max-Age
• Access-Control-Request-Headers
• Access-Control-Request-Method
• Origin

Access-Control-Allow-Origin Header

When Site A tries to fetch content from Site B, Site B can send an Access-Control-Allow-Origin response header to tell the browser that the content of this page is accessible to certain origins. (An origin is a domain, plus a scheme and port number.) By default, Site B's pages are not accessible to any other origin; using the Access-Control-Allow-Origin header opens a door for cross-origin access by specific requesting origins. The Access-Control-Allow-Origin header is critical to resource security.

You can find a description of each CORS header at the following: CORS Headers.

Pre-Flight Request

Most servers will allow GET requests but may block requests to modify resources on the server. Servers don’t just blindly block such requests though; they have a process in place that first checks and then communicates to the client (your web browser) which requests are allowed.

When a request is made using any of the following HTTP request methods, a standard preflight request will be made before the original request.

• PUT
• DELETE
• CONNECT
• OPTIONS
• TRACE
• PATCH

Preflight requests use the OPTIONS header. The preflight request is sent before the original request, hence the term “preflight.” The purpose of the preflight request is to determine whether or not the original request is safe (for example, a DELETE request). The server will respond to the preflight request and indicate whether or not the original request is safe. If the server specifies that the original request is safe, it will allow the original request. Otherwise, it will block the original request.

The request methods above aren’t the only thing that will trigger a preflight request. If any of the headers that are automatically set by your browser (i.e., user agent) are modified, that will also trigger a preflight request.

I hope by now you have a fair understanding of CORS. Now let us get started with creating a basic CORS Proxy.

CORS Proxy

There are two main functions (steps) of a CORS proxy

1. Respond to preflight request: As we discussed a browser sends a preflight request to verify whether cors are allowed for the given method for a given cross-domain. Cors proxy server will implement CORS and will respond to Cors preflight query by setting CORS headers. Further subsequent call proxied to a target server by a CORS server(CORS proxy).
2. Forward CORS request to a target server and receive a response from a target server and send a response back to a client.

CORS Proxy

A Basic CORS Proxy In Nodejs:

A Basic CORS Proxy Server

Usage

When making an API call using JavaScript (using XMLHttpRequest, $.ajax, etc):

1. Substitute the actual service URL with the Proxy URL.
2. Set the request method, query parameters, and body as usual.
3. Set the actual service URL(Target origin) in a header named ‘Target-URL’.
4. Send the request as usual.

CORS Headers

The proxy allows all origins, methods, and headers. You probably want to lock this down in a production environment.

Other Headers

The proxy currently passes the “Authorization” header to the target endpoint. You can modify the proxy to pass additional headers (or all of them).

In The End

The main purpose of this post was to give an overview of CORS and write a basic cors proxy server. The above implementation only supports JSON data and can be extended to support other features. I hope you enjoyed and learned something by reading this post. Thanks for reading! Please drop your comments.