CODEWITHSUNDEEP
htmlhttppost
Sangram Singh
Sangram Singh

Reputation: 7191

Post request to include 'Content-Type' and JSON

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?

Upvotes: 22

Views: 73525

Answers (5)

Heena Patidar
Heena Patidar

Reputation: 41

@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.

Upvotes: 0

BenKoshy
BenKoshy

Reputation: 35665

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.

Upvotes: 1

baptx
baptx

Reputation: 3906

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).

Upvotes: 11

Quentin
Quentin

Reputation: 944157

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.

Upvotes: 25

Sangram Singh
Sangram Singh

Reputation: 7191

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.

Upvotes: 1

Related Questions