How to edit requests and responses, hack, test and tamper with data to websites from browser using Charles web debugging proxy?

Though browsers are very comfortable, ever wondered what’s going on underneath it?
What is it sending and receiving when we visit a webpage?
Can I change it manually? What happens if I try to comment 100 times the same thing?
Wanna hack that Facebook game, or play around with request, response or headers?



Get introduced to Charles - Web debugging proxy Application.

Get it from here and install it.
Open the application & this is how it looks.

Note the two enabled buttons
1.    Record - Starts recording all requests and responses from your PC (only browser traffic)
2.    Breakpoint – Enables you to pause a request for viewing, editing before sending to the web server.

Now open a browser and goto your favourite website.
For beginners, I am opening dictionary.com and searching for the word “hello”
Now go to Charles and you should see something like this.

Select the website you want to see and you can see a lot of information on the right side.
Note the search string “hello” in there.
Play around with the tabs and you see things such as, what request is sent, what response is received, in how much time, etc

In the bottom also you can find a few tabs to see various formats of data. 

QueryString shows you the url parameters sent, Raw is the format in which the browser sends the actual data, Headers are meta data of your browser, OS etc.

Ok now that we can see a soup of data, how to edit them?
We have the breakpoint for that, if you're a programmer, you'd have heard your teacher say 'use breakpoints in debugging the code'. (a web developer? you might have heard firebug). This is the same, but better.
 
Right click on the website name and select breakpoint.

Now interactions with this website are under your control!!

Let’s try searching again for “hello world” now.

Immediately when I click search, the Charles window pops open.

This is the middle step of my request before being sent to the website, now I change the request to “hello world welcome!!” as shown and clicking execute. Charles now displays the response from the website. Clicking execute again, the browser blindly displays the result for edited search.

Check out the resulting web page

The actual search was just “hello world” but we interrupted in between to change it to “hello wold welcome!!”
This is just a tip of ice-berg on the uses and applications of Charles. Actually a lot could be done. I use it mostly to test my websites. It’s popularly used for hacking Facebook games.

You can try options like Repeat, Copy URL, Block cookies etc.

Check out the features of Charles listed in charlesproxy.com,

Please be noted this tutorial is for only educational purpose and be responsible, while we'll back with more posts on this wonderful tool. In case you've any doubt, please leave comments.