web-dev-qa-db-fra.com

Comment intercepter toutes les requêtes http, y compris les soumissions de formulaire

Je souhaite intercepter toutes les requêtes http sortant de ma page Web et ajouter un paramètre au corps de la requête. Ma page contient des formulaires. Je souhaite également capturer les formulaires soumis. J'ai essayé d'utiliser setRequestHeader avec Jax ajaxSend et Javascript, mais les deux ne m'ont pas fonctionné. Comment est-ce que je réalise ceci?

Merci

javascriptajaxhttpxmlhttprequesthttp-proxy
8
lenniekid

https://developer.mozilla.org/en/docs/Web/API/Service_Worker_API

Les employés de service agissent essentiellement en tant que serveurs proxy situés entre les applications Web, le navigateur et le réseau (le cas échéant).

Il prend la forme d'un fichier JavaScript pouvant contrôler la page Web/le site auquel il est associé, intercepter et modifier la navigation et les demandes de ressources.

Vous enregistrez un technicien de service dans votre code d'application à partir d'un fichier nommé, par exemple, sw.js, en procédant comme suit:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('sw.js').then(function(registration) {
      console.log('Service worker registered with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

Et dans le fichier sw.js (le code effectif de service worker): Pour intercepter des demandes, vous attachez un écouteur d'événement fetch au service worker qui appelle la méthode respondWith() et fait quelque chose avec le membre .request à partir de l'objet événement:

self.addEventListener('fetch', function(event) {
  event.respondWith(
    // intercept requests by handling event.request here
  );
});

Un agent de service simple qui ne fait que transmettre des demandes inchangées ressemble à ceci:

self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request)
  );
});

Pour ajouter un paramètre au corps de la requête, je pense que vous devez sérialiser la requête, modifier cette requête sérialisée, puis la désérialiser pour recréer une nouvelle requête, puis appeler fetch(…) avec cette nouvelle requête.

Donc, je pense un travailleur de service qui fait tout ce qui ressemblerait à ceci (non testé): 

self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetchWithParamAddedToRequestBody(event.request)
  );
});
function fetchWithParamAddedToRequestBody(request) {
  serialize(request).then(function(serialized) {
    // modify serialized.body here to add your request parameter
    deserialize(serialized).then(function(request) {
      return fetch(request);
    });
}
function serialize(request) {
  var headers = {};
  for (var entry of request.headers.entries()) {
    headers[entry[0]] = entry[1];
  }
  var serialized = {
    url: request.url,
    headers: headers,
    method: request.method,
    mode: request.mode,
    credentials: request.credentials,
    cache: request.cache,
    redirect: request.redirect,
    referrer: request.referrer
  };  
  if (request.method !== 'GET' && request.method !== 'HEAD') {
    return request.clone().text().then(function(body) {
      serialized.body = body;
      return Promise.resolve(serialized);
    });
  }
  return Promise.resolve(serialized);
}
function deserialize(data) {
  return Promise.resolve(new Request(data.url, data));
}

Remarque:https://serviceworke.rs/request-deferrer_service-worker_doc.html , une page du Service Worker Cookbook , est l'endroit où j'ai levé ce code/approche serialize(…) depuis - par moyen de la réponse à Comment modifier les en-têtes d’une demande? - et cela vaut la peine d’y jeter un coup d’œil, car le code contient des annotations détaillées expliquant ce que tout cela fait. 

15
sideshowbarker

essayez ce code:

(function(send) {

XMLHttpRequest.prototype.send = function(data) {

    var _valuToAdd = $("input[name='valuToAdd']").val();
    this.setRequestHeader('valueName', _valuToAdd);
    send.call(this, data);
};
})(XMLHttpRequest.prototype.send);
2
abdelhadi