Post request to include 'Content-Type' and JSON
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).
Using Ajax request makes life much easier.
$.ajax({
url: 'https://www.googleapis.com/urlshortener/v1/url',
type: 'POST',
data: JSON.stringify({
longUrl: $scope.url
}),
contentType: 'application/json',
success: function(got) {
return alert("shortened url: " + got.id);
}
});
The above works perfectly.
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.
JSON POST requests possible from the browser via Javascript
- Most browsers (which should be supporting the Fetch API as of 2020) allow you to make POST requests with JSON. See the MDN reference here - but you'll have to, of course, do that in javascript.