javascript - ブラウザの画像読み込みリクエストの傍受

Question

ブラウザの画像読み込みリクエストを傍受し、サーバーが期待するいくつかのリクエストヘッダーを追加する方法があるかどうかを知りたい.

実際のシナリオはこれです。Web アプリは XHR をサーバーに送信し、認証ハンドシェイクを完了します。後続のすべてのリクエストには、auth ヘッダーを含める必要があります。ブラウザが画像リクエストのヘッダーを送信しないため、画像が壊れています。

前もって感謝します。

Answer 1

適切なヘッダーで AJAX を使用して画像を要求できます。次に、画像バイナリをbase64でエンコードし、設定してDOMに挿入する必要があります

<img src="data:image/png;base64,[base64 encoded image]" />

Answer 2

ブラウザーで画像リクエストをインターセプトする方法があります。

Answer 3

いいえ、それを行う方法はありません。それは非常に良いことでもあります。

(まあ、コードからそれを行う方法はありません。もちろん、ブラウザの所有者は、必要に応じてリクエストを変更するツールをインストールできます。)

ブラウザが独自の厳密な方法でスクリプトと画像の HTTP リクエストを発行するという事実は、XHR を使用するサイトが、含まれていない場合に特定のリクエストをサーバーに拒否させることによって、ある種の CSRF 攻撃 (クロスサイト リクエスト フォージェリ) を防ぐことができることを意味します。サイト独自の XHR コードが追加する特別なヘッダー。

フォームの投稿を含むヘッダーに対してブラウザが何を行うかを正確に制御することもできません。