如何使用CSRF令牌进行跨域Ajax调用？

Question

我在Django应用程序模板中有一个典型的登录表单（它直接使用Bootstrap，而不是通过某个插件）：

  <form class="form-signin" method="post" action="/site_manager/login/" id="form-signin"> {% csrf_token %}
       <h2 class="form-signin-heading">Please sign in</h2>
      <div class="control-group">
          <label class="control-label" for="login">Login:</label>
          <div class="controls">
              <input size="50" name="username" id="username" required="true" type="text" class="form-control" placeholder="Login" intermediateChanges=false>
          </div>
      </div>
      <div class="control-group">
          <label class="control-label" for="password">Password:</label>
          <div class="controls">
              <input size="50" name="password" id="password" required="true" type="password" class="form-control" placeholder="Password" intermediateChanges=false>
          </div>
      </div>
      <button name="submit" id="submit" value="Log in" type="submit" class="btn btn-primary pull-right">Sign in</button>
  </form>

下面是通过requests module执行远程身份验证的相应视图：

^{pr2}$

{js{Ajax成功的原因是，{csa3}为了其他目的，我可以通过远程Javascript进行一次查询（例如，对于RESTful服务器来说，^和远程查询一样）。正如上面的代码所示，该服务器使用基本身份验证。所以我想在每个Ajax调用的头中设置CSRF令牌，但这并没有遵循相同的源代码原则：

var csrftoken = $.cookie('csrftoken'); // using the jQuery Cookie plugin

$.ajaxSetup({
  headers: {
    'Authorization': "Basic XXXXX"
  }
  beforeSend: function(xhr, settings) {
    xhr.setRequestHeader("X-CSRFToken", csrftoken);
  }
});

$.ajax({
    type: "GET",
    dataType: "jsonp",
    url: remote_server_url+'/api/v1/someRESTfulResource/',
    contentType: 'application/json',
    success: function(data){
        // some operations with data
  }

});

Ajax调用和身份验证中使用的remote_server_url是相同的，并且它与Django应用程序不共享同一个域。据我所知，这是一个安全隐患。出于同样的原因，我也不想在Javascript代码中使用纯文本密码。如何使用用户凭据安全地对远程服务器进行Ajax调用？在

Answer 1

我在Javascript初始化中为一个我想用django发布Ajax帖子的页面执行此操作：

$(document).ajaxSend(function(event, xhr, settings) {

  function sameOrigin(url) {                
    // url could be relative or scheme relative or absolute
    var host = document.location.host; // host + port
    var protocol = document.location.protocol;
    var sr_origin = '//' + host;
    var origin = protocol + sr_origin;              
    // Allow absolute or scheme relative URLs to same origin
    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
        (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
        // or any other URL that isnt scheme relative or absolute i.e relative.
        !(/^(\/\/|http:|https:).*/.test(url));
  }
  function safeMethod(method) {
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }     
  if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
      xhr.setRequestHeader("X-CSRFToken", '{{ csrf_token }}');
  }
});

我不记得我在哪里找到的，但是在使用它之后，我可以做如下的Ajax文章：

^{pr2}$