How to intercept all http requests including form submits How to intercept all http requests including form submits ajax ajax

How to intercept all http requests including form submits


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

Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available).

It takes the form of a JavaScript file that can control the web page/site it is associated with, intercepting and modifying navigation and resource requests

You register a service worker in your application code from a file named, e.g., sw.js by doing:

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

And in the sw.js file (the actual service-worker code): To intercept requests, you attach a fetch event listener to the service worker that calls the respondWith() method and does something with the .request member from the event object:

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

A simple service worker that just passes through requests unchanged looks like this:

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

To add a param to the request body, you need to:

  1. Serialize the request.
  2. Modify that serialized request.
  3. Deserialize the modified request to create a new request.
  4. Call fetch(…) with that new request.

So, a service worker that does all that would look like this (untested):

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);    });  }); // fixed this}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));}

Note: https://serviceworke.rs/request-deferrer_service-worker_doc.html, a page from the Service Worker Cookbook, is where I lifted that serialize(…) code/approach from—by way of the answer at https://stackoverflow.com/questions/35420980/how-to-alter-the-headers-of-a-request/35421644#35421644—and it’s worth taking a look at, because the code there has detailed annotations explaining what it’s all doing


try this 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);