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?
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).
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.
@I'm to work with goo.gl for URL shortening. I need to make the following request:
Your HTML should be
<form method="post" action="https://www.googleapis.com/urlshortener/v1/" enctype="application/json">
<button type="submit"> submit </button>
</form>
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 and as you have mentioned your content-type is Content-Type: application/json so need to add enctype="application/json" in HTML code.