web-dev-qa-db-ja.com

X-CSRF-TokenヘッダーをXMLHttpRequest（）のすべてのインスタンスにグローバルに追加します。

生のXMLHttpRequestを_new XMLHttpRequest_で生成するサードパーティライブラリを使用しています。

これは私のCSRF保護をバイパスし、私のRailsサーバーによって撃墜されます。

インスタンス化時に、事前定義されたCSRFトークン（$('meta[name=csrf-token]').attr('content')）をXMLHttpRequestのすべてのインスタンスにグローバルに追加する方法はありますか？

javascriptajaxsecurityxmlhttprequestcsrf
9
Abraham P

呼び出しを傍受するsendメソッドに次のことをお勧めします：

_(function() {
    var send = XMLHttpRequest.prototype.send,
        token = $('meta[name=csrf-token]').attr('content');
    XMLHttpRequest.prototype.send = function(data) {
        this.setRequestHeader('X-CSRF-Token', token);
        return send.apply(this, arguments);
    };
}());
_

これにより、インスタンス化時にヘッダーは追加されませんが、リクエストが送信される直前に追加されます。 new XMLHttpRequest()への呼び出しもcanインターセプトできますが、ヘッダーの追加を待つ必要があるため、これは役に立ちません。 openが呼び出されました。

リクエストのターゲットURLのテストを含めて、独自のAPIが呼び出されたときにのみヘッダーを追加することもできます。そうしないと、トークンが他の場所にリークしたり、このヘッダーを許可しないクロスドメインCORS呼び出しが中断したりする可能性があります。

26
Bergi

ajax open（）メソッドをラップして開き、ヘッダーをすぐに設定できます。

(function() {
    var op = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function() {
        var resp = op.apply(this, arguments);
        this.setRequestHeader('X-CSRF-Token', $('meta[name=csrf-token]').attr('content'));
        return resp;
    };
}());
5
dandavis

Jqueryに依存しないソリューションが必要な場合は、次のものを使用できます。

  (function() {
      var send = XMLHttpRequest.prototype.send,
          token = document.getElementsByTagName('meta')['csrf-token'].content;
      XMLHttpRequest.prototype.send = function(data) {
          this.setRequestHeader('X-CSRF-Token', token);
          return send.apply(this, arguments);
      };
  }());
3
ErvalhouS