web-dev-qa-db-fra.com

Poster une demande pour inclure 'Content-Type' et JSON

Je dois travailler avec goo.gl pour le raccourcissement des URL. Je dois faire la demande suivante: 

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

mon html: -

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

comment puis-je ajouter le 'type de contenu' et json ici? 

htmlhttppost
13
Sangram Singh

Les navigateurs ne prennent pas en charge JSON en tant que type de support pour les soumissions de formulaire (les types pris en charge sont listés dans la liste dans la spécification ).

La seule façon de faire une telle demande à partir d'une page Web est d'utiliser l'objet XMLHttpRequest.

Google fournit une bibliothèque JavaScript (qui englobe XMLHttpRequest) pouvant interagir avec leur URL Shortener API .

19
Quentin

Les formulaires HTML ne prennent pas en charge JSON, vous devez utiliser AJAX pour envoyer JSON.

Mais si vous souhaitez simplement tester la sécurité d'une application pour savoir si elle est vulnérable à une attaque CSRF, il existe un hack permettant d'envoyer des données JSON sous forme de texte brut, comme décrit dans cet article: https: // systemoverlord. com/2016/08/24/posting-json-with-an-html-form.html

Un formulaire HTML présente l'avantage de ne pas nécessiter l'activation de JavaScript et ne dispose pas d'une protection de stratégie d'origine identique à la différence de AJAX XMLHttpRequest, de sorte qu'un formulaire HTML peut envoyer des données à n'importe quel domaine tiers . comme il est également possible d’envoyer des requêtes GET et POST à des domaines tiers avec XMLHttpRequest (vous obtiendrez simplement un avertissement indiquant que vous ne pouvez pas lire la réponse), même si cela n’est pas autorisé par CORS tant que vous le souhaitez. ne changez pas l'en-tête Content-Type en "application/json": https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS?redirectlocale=en-US&redirectslug=HTTP_access_control#Examples_of_access_control_scenarios

Voici un exemple tiré de l'article:

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

Toutefois, si vous essayez de définir le paramètre de formulaire enctype sur "application/json" au lieu de "text/plain", il ne sera pas reconnu et le résultat par défaut "application/x-www-form-urlencoded" En-tête HTTP.

Certaines applications vérifieront que l'en-tête HTTP Content-Type est "application/json", ce qui empêchera une attaque CSRF (à moins que Flash Player ne soit installé: https://www.geekboy.ninja/blog/exploiting-json -cross-site-demande-falsification-csrf-using-flash/ ). Une meilleure sécurité consisterait à utiliser un jeton d'authenticité. Cela protégera les requêtes HTTP même si le type de données n'est pas JSON. Sinon, il est également possible d'utiliser l'attribut sameSite sur le cookie d'ID de session pour empêcher CSRF ( https://www.owasp.org/index.php/SameSite ).

5
baptx

Utiliser la requête Ajax rend la vie beaucoup plus facile.

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

Ce qui précède fonctionne parfaitement.

0
Sangram Singh