可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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?

回答1:

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.

回答2:

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

回答3:

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.