Question

我想在jQuery的更改事件上上传服务器上的图像，但是使用codeigniter csrf我只能上传图像一次。如何使用ajax为多个请求上传图像。请在设置此内容时记住

config['csrf_protection'] = FALSE;

然后我能够发送多个请求jQuery onchange事件，但是当csrf_protection将为false时，我认为没有csrf的优势。所以问题是如何在启用csrf_protection时使用ajax发送多个请求。我的jquery代码如下：

$("#avatar").change(function(){
    var link = $("#avatar").val();     
    $.ajax({
        url : "<?php echo base_url('main/test'); ?>",
        type: 'post',
        data: {'<?php echo $this->security->get_csrf_token_name(); ?>':'<?php echo $this->security->get_csrf_hash(); ?>',"id":"hello","link":link},            
        success : function(data)
        {   
            alert(data);
        }  
    });
});

Answer 1

在我看来，你应该尝试重新创建每个请求的csrf令牌

试试这个代码示例......

对于js funcion

var csrfName = '<?php echo $this->security->get_csrf_token_name(); ?>',
    csrfHash = '<?php echo $this->security->get_csrf_hash(); ?>';
("#avatar").change(function(){
    var link = $("#avatar").val();

    var dataJson = { [csrfName]: csrfHash, id: "hello", link: link };

    $.ajax({
        url : "<?php echo base_url('main/test'); ?>",
        type: 'post',
        data: dataJson,            
        success : function(data)
        {   
            csrfName = data.csrfName;
            csrfHash = data.csrfHash;
            alert(data.message);
        }  
    });
});

和控制器

public function test() { 
    $config['upload_path'] = './uploads/'; 
    $config['allowed_types'] = 'gif|jpg|png'; 
    $config['max_size'] = 500; 
    $config['max_width'] = 260; 
    $config['max_height'] = 260; 

    $reponse = array(
                'csrfName' => $this->security->get_csrf_token_name(),
                'csrfHash' => $this->security->get_csrf_hash()
                )

    $this->load->library('upload', $config); 
    if (!$this->upload->do_upload('link')) { 
        $reponse['message'] = "error"; 
    } 
    else { 
        $data = array('upload_data' => $this->upload->data()); 
        $image_name = $data['upload_data']['file_name']; 
        $reponse['message'] = $image_name; 
    } 

    echo json_encode($reponse);
}

让我知道并祝你好运

注意：如果有人要求您在问题中发布更多数据，请不要将其作为评论或回答发布，最好编辑问题本身并添加那些东西

Answer 2

您可以在config.php

中进行设置

$config['csrf_regenerate'] = FALSE;

所以csrf保护在所有会话时间内都有效，它将解决您的问题。如果你设置 $config['csrf_regenerate'] = true;然后CI会在每个请求中生成新的csrf令牌，因此旧的csrf令牌与新生成的csrf令牌不匹配

Answer 3

您需要做的就是在AJAX响应中重新加载SCRF令牌。就这么简单！

Answer 4

在每个页面加载的js文件中添加它（我把它放在jquery.js的末尾）

    $.ajaxSetup({
        beforeSend:function(jqXHR, Obj){
            var value = "; " + document.cookie;
            var parts = value.split("; csrf_cookie_name=");
            if(parts.length == 2)   
            Obj.data += '&csrf_token='+parts.pop().split(";").shift();
        }
    });

（请注意，在每个ajax请求中，您都不能发送空数据）

＆＃34; csrf_cookie_name＆＃34;在config.php中定义的顶部

$config['csrf_cookie_name'] = 'csrf_cookie_name';

Answer 5

请尝试使用我的代码。它在我的应用程序中正常工作

您的查看文件

wheel

在设置如下jquery post方法之后

$token_name = $this->security->get_csrf_token_name();
$token_hash = $this->security->get_csrf_hash();

<input type="text" id="search-text" name="parent_name" placeholder="Search" value=""  >
<input type="hidden" id="csrf" name="<?php echo $token_name; ?>" value="<?php echo $token_hash; ?>" />

请按如下所示设置您的控制器

// Get Keyup 
jQuery( "#search-text").keyup(function() {
    // Get Data 
    var val       = jQuery("#search-text").val();
    var hashValue = jQuery('#csrf').val();

    // Get jquery post for ajax task
    jQuery.post( 
        '<?php echo $base_controler; ?>',
        {val:val,'<?php echo $this->security->get_csrf_token_name(); ?>':hashValue}, 
        function(data)
        { 
            // Get return data to decode
            var obj = jQuery.parseJSON(data);
            // Get csrf new hash value
            var new_hash = obj.csrfHash;
            // Set csrf new hash value update
            jQuery('#csrf').val(new_hash);

        }
    );        

});

在所有代码之上，每个请求都会重新创建csrf令牌。

Answer 6

$config['csrf_regenerate'] = TRUE;

将auto generate保留为true会更安全。在类似情况下，当csrf在第一个请求中到期时。我实现了什么

$(document).ajaxComplete(function (event, xhr, settings) {
 let response = xhr.responseText,
 let obj = JSON.parse(response),
 let csrfData = obj.csrf;
 document.querySelector('input[name="' + csrfData.name + '"]').value = csrfData.hash; 
}); //Also here you can update any other non input element

在每个ajax响应中，我们都传递csrf数据，其中最新的csrf数据将替换为当前的csrf数据

来自请求的示例响应

{ 
csrf : {
  name : 'csrf_name',
  hash : 'qw76sd7s6f78sdfs8dfs9df8cx9'
 }
}

我在每个ajax请求中更新csrf令牌

Answer 7

每次发出请求时， CI 都会更新csrf_token。这就是 CSRF 仅工作一次的原因。因此，每次发出请求时，我们也需要更新csrf_token。我通过这样做解决了这个问题。

控制器：使用此代码获取更新的csrf 。

public function update_csrf()
{
  $data['csrf_hash'] = $this->security->get_csrf_hash();
  echo json_encode($data);
}

AJAX ：替换您的旧值 csrf name="csrf_token_name"

var jqXHR = $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            data: $(this).serialize(),
            dataType: 'json',
        })
        jqXHR.done(function(response) {
            $('input[name=csrf_token_name]').val(response.csrf_hash); //update the csrf to the form 
        })
        jqXHR.fail(function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        });

重要！：使用dataType: 'json'

因此，现在每次您有一个成功的请求时，csrf_token也会更新，并且您现在摆脱了 403（禁止访问）错误。

Answer 8

也许您可以尝试使用jquery cookie

首先，您需要添加

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

然后将您的代码更改为此

$("#avatar").change(function(){
var link = $("#avatar").val();     
$.ajax({
    url : "<?php echo base_url('main/test'); ?>",
    type: 'post',
    data: {csrf_test_name: $.cookie('csrf_cookie_name'),"id":"hello","link":link},
    dataType : "JSON",
    success : function(data)
    {   
        alert(data);
    }  
});

最后，您可以尝试将csrf_protection设置为true

[csrf_protection] = TRUE;

Answer 9

编辑配置：

$config['csrf_exclude_uris'] = ['controller/method'];

数组可以包含您希望禁用csrf保护的所有列入白名单的控制器/方法。

该数组还可以处理正则表达式，例如：

$config['csrf_exclude_uris'] = array(
                                        'api/record/[0-9]+',
                                        'api/title/[a-z]+'
                                );

有关详细信息，请访问Codeigniter Documentation - Security Class

Codeigniter CSRF仅对ajax请求有效一次

9 个答案: