Jak dołączyć CSRF z Codeigniter do danych ajax

Question

Próbuję przekazać niektóre dane do mojego kontrolera, ale otrzymuję błąd 500. Po pewnych badaniach odkryłem, że jest to spowodowane tym, że token CSRF nie jest wysyłany.

Wydaje się, że muszę to ta wraz z danymi: <?php echo $this->security->get_csrf_token_name(); ?>:"<?php echo $this->security->get_csrf_hash(); ?>"

My JS jest dość słaby, więc jestem trochę mylić o tym, jak zmienić ten obejmuje wyżej.

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#order").sortable({ 
     update : function (event, ui) { 
      order = $('#order').sortable('serialize'); 
      $.ajax({ 
       url: "<?=base_url().'admin/category/update_order'?>", 
       type: "POST", 
       data: order, 
       success: function(response){ 
        console.log(response); 
       } 
      }); 
     } 
    }); 
} 
); 
</script> 

Answer 1

Token musi być przekazywane w data argument $.ajax.

To powinno działać, ale zobacz moje uwagi poniżej.

order['<?php echo $this->security->get_csrf_token_name(); ?>'] = '<?php echo $this->security->get_csrf_hash(); ?>';

Jednakże, istnieje kilka złych praktyk tutaj dzieje. Głównie nie powinieneś używać PHP w javascript, ponieważ uniemożliwia to dostęp do javascript jako osobnego pliku (jest to dobre, ponieważ przeglądarki będą je buforować, aby strona ładowała się szybciej i zużywała mniejszą przepustowość).

Lepiej przechowywać token w celu <form> html tak ..

<input type="hidden" name="<?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>" />

Wtedy będzie się w odcinkach z resztą swoich danych formularzy.

Możesz również zapisać adres URL w atrybucie akcji formularza. Pomoże to skrypt wdzięcznie pogorszyć, a także trzyma URL w jednym miejscu zamiast 2.

<form id="order" method="post" action="<?=base_url()?>admin/category/update_order"> 

W zaproszeniu $.ajax użyć coś takiego url: $('#order').attr('action'), zakładająC#order jest rzeczywisty id forma.

Answer 2

Masz rację, po prostu dodaj token CSRF do swoich danych pocztowych. Można użyć $ .extend funkcji jQuery do scalania już utworzony z tokena danych CSRF swój przedmiot zamówienia, tak:

$.extend(alerts, { 
'<?php echo $this->security->get_csrf_token_name(); ?>' : 
'<?php echo $this->security->get_csrf_hash(); ?>' }); 

Answer 3

przedłużyć form_helper jak MY_form_helper.php służyć CSRF żetony do mojego własnego kodu generacji forma - można użyć coś podobnego: sklepy

function secure_form() { 
     $CI =& get_instance(); 
     return '<input type="hidden" name='.$CI->security->get_csrf_token_name().' value='.$CI->security->get_csrf_hash().'>'; 
    } 

Answer 4

CI CSRF w pliku cookie i można pobrać go stamtąd:

var csrf = $.cookie('csrf_cookie_name'); 

Wadą tej metody jest to, że jQuery nie zapewnia natywnie dostępu do plików cookie. Będziesz więc potrzebował jquery plugin.

Answer 5

Innym rozwiązaniem jest użycie .serialize():

$.post("user/save", $('#frmUser').serialize(),function(html){ 
     $("#results").html(html); 
}); 

że znajdzie ukryte pole, które przechowuje dane CSRF.

Answer 6

Oto inne podejście. Prosta funkcja w Auth.php, która zwraca nazwę tokenu csrf i hash w formacie JSON.Następnie, w naszym javascript, wykonaj dwie wywołania ajax, pierwszą, która pobierze kredyty csrf i wstawi je do ukrytych pól formularzy, a druga zajmie się faktycznym przesłaniem formularza.

// Funkcja miejsce w kontrolerze Auth.php

public function get_csrf() 
{ 
    $csrf['csrf_name'] = $this->security->get_csrf_token_name(); 
    $csrf['csrf_token'] = $this->security->get_csrf_hash(); 

    echo json_encode($csrf); 
} 

// myFunction()

<script type="text/javascript"> 
function myFunction() { 

    // first ajax call to grab the csrf name and token 
    // from our get_csrf() function in Auth.php 
    $.ajax({ 
     type: "GET", 
     dataType: 'json', 
     url: "https://<your_domain>.com/auth/get_csrf", //replace with your domain 
     success: function (data) { 

      // assign csrf name and token to variables 
      csrf_name = data.csrf_name; 
      csrf_token = data.csrf_token; 

      // assign field1 and field2 field values to variables 
      var form_field1 = document.getElementById('field1').value; 
      var form_field2 = document.getElementById('field2').value; 

      // insert csrf creds into form 
      $('#csrftoken').attr('name', csrf_name); 
      $('#csrftoken').val(csrf_token); 

      // second ajax call -- this is our form handler 
      $.ajax({ 
       type: "POST", 
       url: "https://<your_domain>.com/<your_controller>/<your_function>", //replace with your domain/controller/function 
       data: { 
        // ES6 computed property keys are great... 
        [csrf_name] : csrf_token, 
        "field1" : form_field1, 
        "field2" : form_field2 
         }, 
       success: function(data) { 

        // handle the return from your form submit 
        if (data == "ok") { 
         console.log("Success!"); 
         $("#infoMessage").html("<p>Success</p>").fadeIn(300); 

        } else { 

         console.log("Oops!"); 
         $("#infoMessage").html("<p>Oops!</p>"); 

        } 

       } 
      }); 

     } 
    }); 

} 
</script> 

// html

<div id="infoMessage"></div> 

<form method="post" accept-charset="utf-8"> 

    <input type="hidden" id="csrftoken" name="" value="" /> 

    <label for="field1">Field 1:</label> <br /> 
    <input type="text" name="field1" id="field1" /> 

    <label for="field2">Field 2:</label> <br /> 
    <input type="text" name="field2" id="field2" /> 

    <input type="button" name="submit" value="SUBMIT" onclick="myFunction()" /> 

</form>