Copy as cURL(cmd) adds invalid characters to form data - google-chrome-devtools

I want to use Postman to test server side validation so I used the browser to submit (valid) data to the server and in the network tab of Chromes developer tools used "Copy as cURL". Then, in Postman, Import->Paste Raw Text -> Import.
If I look at the request body the data appears on x-www-form-urlencoded tab and every value has a '^' character appended to it. e.g. JobId: 75051^
When I post it the server validation picks it up as invalid data e.g.
The value "75051^" is not valid for JobId
Edit
If I use "Copy as C=cURL(bash)" instead, the ^ characters are removed but the server doesn't like the encoding used on dates and times. e.g. T
The value '11%2F19%2F2018+12%3A15+AM' is not valid for Work Start Time
What is going on here? Can I get "Copy as cURL" to pick up my data correctly, or is there a better way to pick up the request and get it into Postman?

I found a better way to pick up the request and get it into Postman:
Install the Postman Chrome App instead of the desktop
app.
Install the Postman Interceptor Extension.
Open Postman and click on the Interceptor icon in the toolbar to switch the
toggle to “on”.
Browse to your website: the requests appear in Postman's history.
Go to Interceptor missing from native apps #1667 and vote for it
Reference:
Postman Interceptor Extension Documentation

Related

fiddler modify response header

I'm working with an API that doesn't yet have CORS setup. So, instead of waiting until that's setup, I thought I could use fiddler to add the Access-Control-Allow-Origin header to the responses coming from the server. I haven't used fiddler for a while and can't figure out how to add headers to the response. Is this not supported in the free version of fiddler-everywhere?
It's not ideal, but I found a workaround. After the requests have gone off once, I right-click the ones I'm interested in and select "Add new rule". The rule will automatically do an exact match to the URL and sets the action of "Return manually crafted response" If I edit the rule, the header can be added in the raw text.

REST API Testing: How to get response using Google Chrome developer tools?

I'm very new to API testing.
I'm trying to make use of Google Chrome's developer tools to understand and explore this subject.
Question 1:
Is it possible to get the response (possibly in JSON format) of a simple GET request using chrome developer tools?
What I'm currently doing is:
Open chrome developer tools
Go to Network tab
Clear existing logs
Send a post request simply by hitting a URL. e.g. https://stackoverflow.com/questions/ask
Check the corresponding docs loaded
Question 2:
What are the relevance "Reponse Headers" shown on the image above? I mean, am I correct to think that this is the response I am getting after doing the GET request?
Any help or references you can give are much appreciated!
If you want to test a rest api I sugest you get postman which is meant for that purpose.
Going to your questions:
Question 1: Is it possible to get the response (possibly in JSON
format) of a simple GET request using chrome developer tools?
The first point to make clear is that it is the server who will or will not send a json response to the browser. Not the browser who can choose to see any response as json.
If you send a GET request that the server responds with a json object or json array and the Content-type header is set to application/json, you will see that response already formated in the main window of the browser.
If the Content-type is set to text/html, for example, then you will still get the a json text as response in the main window but it won't be nicely formated. Depending on how the response was sent, sometimes you can see it nicely formatted by left clicking the browser window and selecting view source page.
For this you don't need developer's tools unless you want to see how long did it take to receive the response, or check the headers for some specific value, etc, but nothing to do with receiving the response or rendering it on screen.
Developer's tools is more usefull if you are working with javascript/jquery and/or if you are sending ajax requests (GET or POST). In these cases you can debug the function and also see the ajax request to check what actually went out from your browser and what was received as a response.
Question 2: What are the relevance "Reponse Headers" shown on the
image above? I mean, am I correct to think that this is the response I
am getting after doing the GET request?
In the response you get the two things, the headers, and the content. The json objects you see are part of the content not the headers.
The headers will tell the browser, for example, that the body is json (vs. an html documenet or something different), besides of other information like cache-control, or how long the body is.
Search for http headers for more information on which are teh standard headers.
To answer your questions narrowly:
Is it possible to get the response (possibly in JSON format) of a simple GET request using chrome developer tools?
Yes! Just click the Response tab, which is to the right of the Headers tab that's open in your screenshot.
What are the relevance "Reponse Headers" shown on the image above? I mean, am I correct to think that this is the response I am getting after doing the GET request?
Yes, these are the HTTP headers that were sent with the response to your request.
The broader question here is "how do I test a REST API?" DevTools is good for manual testing, but there are automated tools that can make it more efficient. I'll leave that up to you to learn more about that broad topic.

Chrome DevTools - how to track network request when URL triggers Save dialog

When the URL entered into the Chrome address bar results in the Save As dialog being popped (Content Type is not recognised), the network request never appears in the network tab in dev tools.
Is there a way I can track this to see the response headers from within Chrome, ie. without resorting to external tools like tcpdump or fiddler?
Yes, it's possible to access the request/response data in a more raw form using the network internals interface provided in Chrome. Navigate to chrome://net-internals/ (can't make it a link)
Click on the 'Events' links to see the recent requests and active sockets. I recommend using the filter at the top to remove some of the noise.
Select the relevant entry corresponding to the source type URL_REQUEST.
On the right hand side, you will see a whole load of data, but the request headers will appear under the HTTP_TRANSACTION_SEND_REQUEST_HEADERS section, and the response headers will appear under the HTTP_TRANSACTION_READ_RESPONSE_HEADERS section.
The following is an example from a simple Node server I set up to return a response with the 'Content-Type': 'application/octet-stream'} header. This forces the browser to download.

How to test REST API using Chrome's extension "Advanced Rest Client"

Following the instructions at the link below, I successfully built a REST API for my Django application: http://django-rest-framework.org/tutorial/quickstart.
I can test it by doing the following from the Unix prompt:
curl -H 'Accept: application/json; indent=4' -u root:myPassword http://www.myWebsite.com/users/
It works :)
However, I would like to use the Chrome extension Advanced Rest Client to test this same functionality.
I have installed the extension, but I don't know where/how to put the fields. When I make my educated-guess (as you can see in the screenshot), it rejects it saying "Authentication credentials were not provided"
How/where should I specify my parameters to the REST API?
The discoverability is dismal, but it's quite clever how Advanced Rest Client handles basic authentication. The shortcut abraham mentioned didn't work for me, but a little poking around revealed how it does it.
The first thing you need to do is add the Authorization header:
Then, a nifty little thing pops up when you focus the value input (note the "construct" box in the lower right):
Clicking it will bring up a box. It even does OAuth, if you want!
Tada! If you leave the value field blank when you click "construct," it will add the Basic part to it (I assume it will also add the necessary OAuth stuff, too, but I didn't try that, as my current needs were for basic authentication), so you don't need to do anything.
From the screenshot I can see that you want to pass "user" and "password" values to the service. You have send the parameter values in the request header part which is wrong.
The values are sent in the request body and not in the request header.
Also your syntax is wrong.
Correct syntax is: {"user":"user_val","password":"password_val"}.
Also check what is the the content type. It should match with the content type you have set to your service.
This seems a very old question, but I am providing an answer, so that it might help others.
You can specify the variables in the second screen in the form section, as shown below or in the
RAW format by appending the variables as shown in the second image.
If your variable and variable values are valid, you should see a successful response in the response section.
The shortcut format generally used for basic auth is http://username:password#example.com/path. You will also want to include the accept header in the request.
in the header section you have to write
Authorization: Basic aG9sY67890vbGNpbQ==
where string after basic is the 64bit encoding value of your username:password.
php example of getting the header values is:
echo "Authorization: Basic " . base64_encode("myUser:myPassword");
n.b: I assumed your authentication method as basic. which can be different as well.
Add authorization header and click pencil button to enter username and passwords
The easy way to get over of this authentication issue is by stealing authentication token using Fiddler.
Steps
Fire up fiddler and browser.
Navigate browser to open the web application (web site) and do the
required authentication.
Open Fiddler and click on HTTP 200 HTML page request.
On the right pane, from request headers, copy cookie header
parameter value.
Open REST Client and click on "Header form" tab and provide the
cookie value from the clip board.
Click on SEND button and it shall fetch results.
With latest ARC for GET request with authentication need to add
a raw header named Authorization:authtoken.
Please find the screen shot Get request with authentication and query params
To add Query param click on drop down arrow on left side of URL box.

Firefox Add-on RESTclient - How to input POST parameters?

I've installed Firefox RESTclient add-on but , I'm having hard time figuring out how to pass POST parameters. Is there a specific format to do this? Or is there any other tool which can be used to debug an REST API on Mac OS X ?
If you want to submit a POST request
You have to set the “request header” section of the Firefox plugin to have a “name” = “Content-Type” and “value” = “application/x-www-form-urlencoded”
Now, you are able to submit parameter like “name=mynamehere&title=TA” in the “request body” text area field
Here is a step by step guide (I think this should come pre-loaded with the add-on):
In the top menu of RESTClient -> Headers -> Custom Header
In the pop-up box, enter Name: Content-Type and Value: application/x-www-form-urlencoded
Check the "Save to favorite" box and click Okay.
Now you will see a "Headers" section with your newly added data.
Then in the Body section, you can enter your data to post like:
username=test&name=Firstname+Lastname
Whenever you want to make a post request, from the Headers main menu, select the Content-Type:application/x-www-form-urlencoded item that you added and it should work.
You can send the parameters in the URL of the POST request itself.
Example URL:
localhost:8080/abc/getDetails?paramter1=value1&parameter2=value2
Once you copy such type of URL in Firefox REST client make a POST call to the server you want
Request header needs to be set as per below image.
request body can be passed as json string in text area.
I tried the methods mentioned in some other answers, but they look like workarounds to me. Using Firefox Add-on RESTclient to send HTTP POST requests with parameters is not straightforward in my opinion, at least for the version I'm currently using, 2.0.1.
Instead, try using other free open source tools, such as Apache JMeter. It is simple and straightforward (see the screenshot as below)