Question

我将使用goo.gl进行URL缩短。我需要提出以下要求：

POST https://www.googleapis.com/urlshortener/v1/url
Content-Type: application/json
{"longUrl": "http://www.google.com/"}

我的HTML： -

<form method="post" action="https://www.googleapis.com/urlshortener/v1/">
    <button type="submit"> submit </button>
</form>

我如何在这里添加'content-type'和json？

Answer 1

浏览器不支持JSON作为表单提交的媒体类型（支持的类型为listed in the spec）。

从网页发出此类请求的唯一方法是使用XMLHttpRequest对象。

Google提供a JavaScript library（包装XMLHttpRequest），可以与URL Shortener API进行互动。

Answer 2

HTML表单不支持JSON，您必须使用AJAX发送JSON。

但是如果你只是想测试一个应用程序的安全性，看看它是否容易受到CSRF攻击，就会发现将JSON数据作为纯文本发送的黑客攻击，如本文所述：https://systemoverlord.com/2016/08/24/posting-json-with-an-html-form.html

HTML表单的优点是不需要启用JavaScript，并且与AJAX XMLHttpRequest不同，它没有同源策略保护，因此HTML表单可以将数据发送到任何第三方域。事实上，看起来也可以使用XMLHttpRequest向第三方域发送GET和POST请求（您只会收到警告，说明您无法读取响应），即使CORS不允许这样做也是如此因为你没有将Content-Type标题更改为＆＃34; application / json＆＃34;：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS?redirectlocale=en-US&redirectslug=HTTP_access_control#Examples_of_access_control_scenarios

以下是文章中的一个例子：

<body onload='document.forms[0].submit()'>
  <form method='POST' enctype='text/plain'>
    <input name='{"secret": 1337, "trash": "' value='"}'>
  </form>
</body>

但是，如果您尝试将enctype表单参数设置为＆＃34; application / json＆＃34;而不是＆＃34; text / plain＆＃34;，它将无法被识别，并且将导致默认的＆＃34; application / x-www-form-urlencoded＆＃34; Content-Type HTTP标头。

某些应用程序将检查Content-Type HTTP标头是＆＃34; application / json＆＃34;，因此它将阻止CSRF攻击（除非您安装了Flash Player：https://www.geekboy.ninja/blog/exploiting-json-cross-site-request-forgery-csrf-using-flash/）。更好的安全性是使用真实性令牌，这将保护HTTP请求，即使数据类型不是JSON。否则，也可以在会话ID cookie上使用sameSite属性来阻止CSRF（https://www.owasp.org/index.php/SameSite）。

Answer 3

使用Ajax请求可以让生活更轻松。

    $.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);
          }
    });

以上作品完美无缺。

Answer 4

可以通过Javascript从浏览器发出JSON POST请求

大多数浏览器（从2020年开始应支持Fetch API）允许您使用JSON发出POST请求。 See the MDN reference here-但您当然必须使用javascript。

发布请求以包含＆＃39;内容类型＆＃39;和JSON

4 个答案:

可以通过Javascript从浏览器发出JSON POST请求