Django中的X-editable内联编辑-如何获得CSRF保护？

Posted 2023-02-24

【中文标题】Django中的X-editable内联编辑-如何获得CSRF保护？

【英文标题】：X-editable inline editing in Django - how to get CSRF protection?

【发布时间】：2012-11-26 18:26:38

【问题描述】：

我正在尝试在 Django 中对模型进行 X-Editable 内联编辑。我只是想更改模型实例的属性（在本例中为 Dataset 对象的名称）。

我不确定如何编写视图，以便正确捕获来自 ajax 请求的信息：

POST /datasets/9/update_name/

    pk:    3            //primary key (record id)
    value: 'The Updated Name' //new value

然后将新名称保存到 Dataset 对象。

urls.py

# ex: /datasets/3/update_name
url(r'^(?P<pk>\d+)/update_name/$', update_name ,
    name='update_name'),

detail.html

<h1 class="page-title center">
    <a href="#" id="datasetName"> dataset.name </a>
</h1>
<script>
$('#datasetName').editable(
  type: 'text',
  pk:  dataset.pk ,
  url: '% url 'datasets:update_name' dataset.pk %',
  title: 'Edit dataset name'
  params:  csrf: '% csrf_token %' # // This isn't working
);
</script>

views.py

def update_name(request, dataset_id):   
    # ... Update Dataset object ...
    json = simplejson.dumps(request.POST)
    return HttpResponse(json, mimetype='application/json')  

编辑：

我认为问题在于没有 CSRF 保护。如何在 X 可编辑表单中添加它？

** 编辑 2：

我也试过这个，根据文档：

<h1 class="page-title center">
  <a href="#" id="datasetName"> dataset.name </a>
</h1>

<script>
// using jQuery
function getCookie(name) 
  var cookieValue = null;
  if (document.cookie && document.cookie != '') 
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) 
      var cookie = jQuery.trim(cookies[i]);
          // Does this cookie string begin with the name we want?
          if (cookie.substring(0, name.length + 1) == (name + '=')) 
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
            break;
          
        
      
      return cookieValue;
    
    var csrftoken = getCookie('csrftoken');

    function csrfSafeMethod(method) 
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));

$.ajaxSetup( 
 beforeSend: function(xhr, settings) 
   function getCookie(name) 
     var cookieValue = null;
     if (document.cookie && document.cookie != '') 
       var cookies = document.cookie.split(';');
       for (var i = 0; i < cookies.length; i++) 
         var cookie = jQuery.trim(cookies[i]);
                   // Does this cookie string begin with the name we want?
                   if (cookie.substring(0, name.length + 1) == (name + '=')) 
                     cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                     break;
                   
                 
               
               return cookieValue;
             
             if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) 
           // Only send the token to relative URLs i.e. locally.
           xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
         
        
     );
$('#datasetName').editable(
  type: 'text',
  pk:  dataset.pk ,
  url: '% url 'datasets:update_name' dataset.pk %',
  title: 'Edit dataset name',
);
</script>

【问题讨论】：

感谢您分享您的工作，但问题是什么？

对不起。已编辑。我只是不确定如何编写视图来捕获和保存请求中的信息

视图代码是否被调用？ request.POST 是什么样的？ request.is_ajax() 是真的吗？你在前端得到成功响应吗？ form.is_valid() 的结果是什么？

嗯，看起来 DatasetDetail 中的 post 方法甚至没有被调用。我尝试将print repr(request.POST) 放在上面的 post 方法中，当我尝试进行内联编辑时没有任何显示。但是，在服务器输出中，我看到发出了 POST 请求： [08/Dec/2012 16:33:10] "POST /datasets/3/ HTTP/1.1" 403 152221

【参考方案1】：

我认为是正确的，特别是如果您正在使用 rails 来添加

        ajaxOptions: 
            beforeSend: function(xhr) xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content')), 
        ,

内部可编辑功能

        $('#projectname').editable(
            showbuttons: 'bottom',
            ajaxOptions: 
                beforeSend: function(xhr) xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content')), 
            ,              
            type: 'textarea',
            url: '/url/url'

        );

【参考方案2】：

我在我的 php 项目中遇到过这个问题，我使用 ajaxOptions 选项解决了这个问题。从 meta 标签中取出 CSRF Token 并添加到请求头中。

ajaxOptions: 
  dataType: 'json',
  beforeSend: function(xhr)
    xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
       .attr('content'));
               

【参考方案3】：

哇，我在这个问题上花了这么多时间！

入围版本为：

<a href="#" id="projectnameproject.id" data-type="text" data-pk="project.id" data-title="Enter project name" data-url="% url 'updateproject' project.id %" data-params="csrfmiddlewaretoken:'csrf_token'"> project.name </a>

然后，调用

$('#projectnameproject.id').editable();

【讨论】：

谢谢！我遇到了同样的问题！

也谢谢你 :) 还有 x-editable 的优秀员工

【参考方案4】：

csrf 表单字段的正确名称是csrfmiddlewaretoken。