web-dev-qa-db-ja.com

フォーム送信を含むすべてのhttpリクエストをインターセプトする方法

Webページから送信されるすべてのhttp要求をインターセプトし、要求本文にパラメーターを追加したいと思います。ページにフォームが含まれています-フォームの送信もキャプチャしたいです。 Jquery ajaxSendとJavascriptのsetRequestHeaderを使用してみましたが、どちらも機能しませんでした。どうすればこれを達成できますか？

ありがとう

javascriptajaxhttpxmlhttprequesthttp-proxy
14
lenniekid

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

基本的に、サービスワーカーは、Webアプリケーションと、ブラウザとネットワーク（利用可能な場合）の間に位置するプロキシサーバーとして機能します。

関連付けられているWebページ/サイトを制御できるJavaScriptファイルの形式を取り、ナビゲーションおよびリソース要求をインターセプトおよび変更します

これを行うことにより、_sw.js_などの名前のファイルからアプリケーションコードにService Workerを登録します。

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

また、_sw.js_ファイル（実際のサービスワーカーコード）で：リクエストをインターセプトするには、fetchイベントリスナーを、respondWith()メソッドを呼び出すサービスワーカーにアタッチしイベントオブジェクトの_.request_メンバーを持つ何か：

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

リクエストを変更せずにそのまま渡す単純なサービスワーカーは次のようになります。

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

リクエストの本文にパラメータを追加するには、リクエストをシリアル化し、そのシリアル化されたリクエストを変更し、シリアル化を解除して新しいリクエストを再作成し、その新しいリクエストでfetch(…)を呼び出す必要があると思います.

だから私は、このように見えるすべてのことを行うサービスワーカーだと思う（テストされていない）：

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

注：https://serviceworke.rs/request-deferrer_service-worker_doc.html 、からのページ Service Worker Cookbook 、私はserialize(…) code/approachを Requestのヘッダーを変更する方法？ での答えとして持ち上げました。そこにあるコードには、それがすべて何をしているのかを説明する詳細な注釈があるので、見てみる価値があります。

23
sideshowbarker

このコードを試してください：

(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