127

Enable CORS using Fiddler

 5 years ago
source link: https://www.tuicool.com/articles/hit/V7NzuuZ
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

An easier way to point localhost to testing or production environments.

3YVFBb2.png!webRBVJ7rU.png!web
monitoring HTTP(s) requests with Fiddler.

Imagine yourself having a pleasant day at work and enjoying your favorite cup of coffee and just then you are informed about an issue being reported with JS code throwing errors on the production environment while everything works fine on your localhost.

Well, probably the day might not feel that pleasant anymore.

Debugging JS code on the production environment is not usually an easy task. minified JS code is hard to understand and the issue could be specific to data residing on the production environment. Getting to the bottom of the issue does get a lot more difficult.

A probable solution would be to try and recreate the same scenario on your localhost. This without any doubt is a tedious task which might require replication of large amounts of data and even a hit & trail approach.

Wouldnt it be easier if you could direct API calls from are localhost client to the production/testing server. This would provide you the power to debug JS code on your local machine with data being fetched from the desired environment. In order to do so, we need to enable the Cross-Origin Resource Sharing (CORS).

Cross-Origin Resource Sharing ( CORS ) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. Here is where Fiddler comes into the picture.

What is Fiddler and how it works?

Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. It allows you to inspect traffic, set breakpoints, and “fiddle” with incoming or outgoing data.

When Fiddler starts to capture traffic, it registers itself with the Windows Internet (WinINet) networking component and requests that all applications (eg. Chrome, Firefox, IE, etc) begin directing their requests to Fiddler. Fiddler then sits between your client and server listening on a port for HTTP(s) traffic providing it the power to record the traffic and also serve as a proxy to modify the HTTP requests and response.

The application is free and available for all major OS on the Fiddler’s website along with tones of documentation and tutorial videos.

Let's get our hands dirty.

You first would need to install and setup Fiddler. Instructions for which are available on the Fiddler’s website .

Fire up the application and navigate to Tools > Fiddler Options > HTTPS > Decrypt HTTPS traffic and install the certifications.

Use CTRL + R or find the Customize Rules... options under Rules menu to open the custom rules script used by Fiddler.

Add the following code under the Handlers class along with the other RulesOption declarations.

public static RulesOption("Force CORS")
var m_ForceCORS: boolean = true;

Next, add the following code within the OnBeforeRequest method

if (m_ForceCORS && oSession.oRequest.headers.HTTPMethod == "OPTIONS") { 
	oSession.utilCreateResponseAndBypassServer();
	
	oSession.oResponse.headers.Add("Access-Control-Allow-Origin", oSession.oRequest.headers["Origin"]) ;
	oSession.oResponse.headers.Add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");			
	oSession.oResponse.headers.Add("Access-Control-Allow-Headers", "Content-Type, Authorization, Accept, Csrf-Token, X-Requested-With, cloudSession, WbeSession, Cookie");
	oSession.oResponse.headers.Add("Access-Control-Max-Age", "1728000");
	oSession.oResponse.headers.Add("Access-Control-Allow-Credentials", "true");
	
	oSession.responseCode = 200;
}

Here we use fiddler to create a response object and add the CORS specific headers. You may want to change the headers mentioned above as per your requirement.

OnBeforeRequest: Called after Fiddler has read a complete HTTP(S) request from the client. You should use this method to update the request headers or the request body if desired.

utilCreateResponseAndBypassServer: Called inside OnBeforeRequest to create a response object and bypass the server.

Next, add the following code within the OnBeforeResponse method

if (m_ForceCORS && oSession.oRequest.headers.Exists("Origin")) { 
	oSession.oResponse.headers.Remove("Access-Control-Allow-Origin");
	oSession.oResponse.headers.Add("Access-Control-Allow-Origin", oSession.oRequest.headers["Origin"]) ;
	
	oSession.oResponse.headers.Remove("Access-Control-Allow-Methods");
	oSession.oResponse.headers.Add("Access-Control-Allow-Methods", oSession.oRequest.headers["Access-Control-Allow-Methods"]);
	
	oSession.oResponse.headers.Remove("Access-Control-Allow-Headers"); 
	oSession.oResponse.headers.Add("Access-Control-Allow-Headers", oSession.oRequest.headers["Access-Control-Allow-Headers"]);
	
	oSession.oResponse.headers.Remove("Access-Control-Max-Age");
	oSession.oResponse.headers.Add("Access-Control-Max-Age", oSession.oRequest.headers["Access-Control-Max-Age"]);
	
	oSession.oResponse.headers.Remove("Access-Control-Allow-Credentials");
	oSession.oResponse.headers.Add("Access-Control-Allow-Credentials", oSession.oRequest.headers["Access-Control-Allow-Credentials"]);
}

OnBeforeResponse: Fires after the complete response has been read from the server. This event fires before the response is returned to the client. You should use this method to update the response headers or the response body if desired.

The above code will modify the HTTP response object received from the server to contain the desired CORS headers.

With all modification done, check that Force CORS option under the Rules menu should now be enabled.

Press F12 or use the Capture Traffic option to start intercepting the HTTP requests via Fiddler. You should now be able to make API to your testing/production environment from your localhost.

fmi6jab.png!webBJZj2ui.png!web
200 Fiddled response with CORS enabled.

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK