ウェブ開発用のajaxフックはすべてのXMLHttpRequestリクエストを傍受します

クズども · 掲載地 2023/06/22 10:29:45

要件:すべてのXMLHttpRequestリクエストを傍受し、バックエンドインターフェースがログイン無効なステータスコードを返したら、直接ログインインターフェースにジャンプし、それ以上はパスしません。また、統一署名の追加、自動プロトコル解決、インターフェース通話統計などの要求にも利用できます。

復習：

jQueryはAjaxが返す結果をインターセプトします
https://www.itsvse.com/thread-9570-1-1.html

jQueryはAjaxのリクエストを傍受できますが、jQuery内のajaxメソッドを使う呼び出し者に限定され、ネイティブのXMLHttpRequestによるリクエストを傍受することはできません。jQuery内のajaxリクエストはXMLHttpRequestのカプセル化でもあるため、実際にXMLHttpRequestをインターセプトできます。

ajax-hookはブラウザのXMLHttpRequestオブジェクトを傍受するための軽量ライブラリであり、XMLHttpRequestオブジェクトがリクエストを開始する前、応答内容の受信後、エラーが発生する際にリクエスト、レスポンス、エラーを事前処理するために使用できます。 Ajax-hookは非常に互換性が高く、ES6の機能に依存しないため、ES5をサポートするどのブラウザでも動作します。

原則:ajax-hookはXMLHttpRequestのメソッドとプロパティをカスタマイズし、グローバルなXMLHttpRequestオブジェクトを上書きします。 XMLHttpRequestオブジェクトにはプロキシ層がラップされています。

オープンソースアドレス:ハイパーリンクのログインが見えます。

CDNアドレス:ハイパーリンクのログインが見えます。

プロキシとフックの比較

proxy()とhook()の両方を使ってグローバルなXMLHttpRequestを傍受できます。両者の違いは以下の通りです:hook() は細かいインターセプトの粒度を持っていますはXMLHttpRequestオブジェクトの特定のメソッド、属性、またはコールバックに特化することもありますが、使用がより面倒で、多くの場合、ビジネスロジックを様々なコールバックに分散させる必要があり、エラーも起こりやすいです。一方プロキシ()は高度な抽象化を持っていますリクエストコンテキストが構築され(リクエスト情報の設定は各コールバックで直接取得可能)、よりシンプルで効率的に使えます。

ほとんどの場合、私たちはニーズに合わない場合は、proxy()メソッドの使用を推奨します。

ajax-hookにjQuery ajaxリクエストインターセプションとプロキシインターセプションを追加してみてください。コードは以下の通りです:

ログインが見えます。

jQueryを使ってgetリクエストを送信してみてください。そうすれば見えますどちらも傍受可能です、下図に示されているように:

ネイティブのXMLHttpRequestを使ってリクエストを送信し、discoverアヤックスフックだけがインターセプトできる、下図に示されているように:

ログインが見えます。

ajax-hookプロキシのさらなる用途:

ログインが見えます。

例：ハイパーリンクのログインが見えます。

(終わり)

クズども · 掲載地 2023/06/22 10:32:52

fetch() APIリクエストとレスポンスをインターセプトします:https://stackoverflow.com/questi ... onses-in-javascript

クズども · 掲載地 2024/04/18 8:39:18

HTTP応答401の不正ジャンプログインコードを傍受:

ログインが見えます。

[JavaScript] ウェブ開発用のajaxフックはすべてのXMLHttpRequestリクエストを傍受します

関連記事

閲覧したセクション