I'm to work with goo.gl for URL shortening. I need to make the following request:
POST https://www.googleapis.com/urlshortener/v1/url
Content-Type: application/json
{"longUrl": "http://www.google.com/"}
my html:-
<form method="post" action="https://www.googleapis.com/urlshortener/v1/">
<button type="submit"> submit </button>
</form>
how do i add the 'content-type' and json here?
In a POST request, resulting from an HTML form submission, the Content-Type of the request is specified by the enctype attribute on the <form> element.
The correct MIME media type for JSON is application/json . JSP will use it for sending a response to the client. Show activity on this post. “ application/json ” is the correct JSON content type.
You can set a content type header manually if you need to override the one Postman sends automatically. You can use variables in your body data and Postman will populate their current values when sending your request. To beautify your XML or JSON, select the text in the editor and then select ⌘+Option+B or Ctrl+Alt+B.
Browsers do not support JSON as a media type for form submissions (the supported types are listed in the spec).
The only way to make such a request from a web page is to use the XMLHttpRequest object.
Google provide a JavaScript library (which wraps XMLHttpRequest) that can interact with their URL Shortener API.
HTML forms don't support JSON, you have to use AJAX to send JSON.
But if you just want to test the security of an application, to see if it is vulnerable to a CSRF attack, there is a hack to send JSON data as plain text, like described in this article: https://systemoverlord.com/2016/08/24/posting-json-with-an-html-form.html
An HTML form has the advantage to not require JavaScript enabled and does not have a same-origin policy protection unlike AJAX XMLHttpRequest, so an HTML form can send data to any third-party domain. In fact it looks like it is also possible to send GET and POST request to third-party domains with XMLHttpRequest (you will just get a warning saying that you can't read the response), even if not allowed by CORS as long as you don't change the Content-Type header to "application/json": https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS?redirectlocale=en-US&redirectslug=HTTP_access_control#Examples_of_access_control_scenarios
Here is an example from the article:
<body onload='document.forms[0].submit()'>
<form method='POST' enctype='text/plain'>
<input name='{"secret": 1337, "trash": "' value='"}'>
</form>
</body>
However if you try to set the enctype form parameter to "application/json" instead of "text/plain", it will not be recognized and it will result in the default "application/x-www-form-urlencoded" Content-Type HTTP header.
Some applications will check that the Content-Type HTTP header is "application/json", so it will prevent a CSRF attack (unless you have Flash Player installed: https://www.geekboy.ninja/blog/exploiting-json-cross-site-request-forgery-csrf-using-flash/). A better security would be to use an authenticity token, this will protect HTTP requests even if the data type is not JSON. Otherwise, it is also possible to use the sameSite attribute on the session ID cookie to prevent CSRF (https://www.owasp.org/index.php/SameSite).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With