web-dev-qa-db-ja.com

「Content-Type」とJSONを含めるリクエストを送信します

URLを短縮するためにgoo.glを使用します。次のリクエストを行う必要があります。

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を追加するにはどうすればよいですか？

htmlhttppost
15
Sangram Singh

ブラウザは、フォーム送信のメディアタイプとしてJSONをサポートしていません（サポートされているタイプは 仕様にリストされています ）。

Webページからこのようなリクエストを行う唯一の方法は、XMLHttpRequestオブジェクトを使用することです。

Googleが提供する JavaScriptライブラリ （XMLHttpRequestをラップする）は、 RL Shortener API と対話できます。

21
Quentin

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リクエストをサードパーティのドメインにリクエストすることもできます（レスポンスを読み取ることができないという警告が表示されるだけです）。 Content-Typeヘッダーを「application/json」に変更しない限り、CORSで許可： 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フォームパラメータを「text/plain」ではなく「application/json」に設定しようとすると、認識されず、デフォルトの「application/x-www-form-urlencoded」Content-Typeになります。 HTTPヘッダー。

一部のアプリケーションは、Content-Type HTTPヘッダーが「application/json」であることを確認するため、CSRF攻撃を防止します（Flash Playerがインストールされている場合を除きます） https://www.geekboy.ninja/blog/exploiting -json-cross-site-request-forgery-csrf-using-flash / ）。より良いセキュリティは、認証トークンを使用することです。これにより、データタイプがJSONでない場合でもHTTPリクエストが保護されます。それ以外の場合は、セッションID CookieでsameSite属性を使用してCSRFを防止することもできます（ https://www.owasp.org/index.php/SameSite ）。

7
baptx

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

上記は完全に動作します。

0
Sangram Singh