[SOLVED] Csrf for multi ajax request

Saya baru main CI, dan ada project pribadi bikin ajax untuk combobox pake fitur csrf di codeigniter, TANPA menonaktifkan csrf regenerate.

Yang saya inginkan : Saat user milih kategori, maka selectoption yg kedua menampilkan produk sesuai kategori yg dipilih di selectoption pertama. Kemudian saat user milih sebuah produk, maka akan muncul detail produknya.

Berarti ada dua proses request ajax : pertama, request produk berdasarkan kategori yg diplih. kedua, request detail info berdasarkan produk yg dipilih. Jadi saat csrf regenerate diaktifkan, hanya work pada request yg pertama.

Catatan : Kedua request WORK saat diuji dengan cara menonaktifkan csrf regenerate, jadi saya cuma minta bantuan bagaimana cara agar semua request bisa bekerja saat csrf regenerate diaktifkan. (kalo saya baca di internet) Caranya dengan mereturn token csrf yang baru, cuma saya gak tau caranya. :v Jadi saya share di sini, siapa tau ada yang bisa bantu. :)

Berikut sekilas kode di halaman views order :

//JQUERY
<script>
$(document).ready(function(){
  $.ajaxSetup({
  type:"POST",
  url: "<?php echo base_url('order/getdata') ?>",
  cache: false,
  });

  var csrfName = '<?php echo $this->security->get_csrf_token_name(); ?>',
      csrfHash = '<?php echo $this->security->get_csrf_hash(); ?>';

  $("#cat").bind('change', function(){
    var idCat = $(this).val();
    if(idCat > 0){
      $.ajax({
        // csrfnew adalah nama csrf yg saya setting di config.
        data:{csrfnew:csrfHash,cat:'get_produk',id:idCat,idPro:'0'},
        success: function(response){
          $("#produk").html(response);
        }
      })
    }
  });

  $("#produk").bind('change', function(){
    var idCat = $("#cat").val();
    var idPro = $(this).val();
    if(idPro > 0){
      $.ajax({
        data:{csrfnew:csrfHash,cat:'get_info',id:idCat,pro:idPro },
        success: function(response){
          $("#info").html(response);
        }
      })
    }
  });

});
</script>

// HTML
<?php echo form_open(site_url('beli'));?>
<div class="form-group">
  <label>Pilih Kategori :</label>
  <select class="selectpicker form-control" required="required" name="cat" id="cat">
    <option disabled="disabled" selected="selected">--Pilih Kategori--</option>
    <option value="1">kategori 1</option>
    <option value="2">kategori 2</option><
  </select>
</div>
<div class="form-group">
  <label>Pilih Produk :</label>
  <select class="selectpicker form-control" required="required" name="produk" id="produk">
    <option disabled="disabled" selected="selected">--Pilih Produk--</option>
  </select>
</div>
<div id="info">
  // di sini akan tampil detail produk
</div>
<div class="form-group">
  <button type="submit" class="btn btn-primary" name="submit" value="order_smm">Order</button>
</div>
<?php echo form_close();?>

sekilas kode di controller Order :

public function getdata()
{
  $cat = $this->input->post('cat');
  $id = $this->input->post('id');
  $pro = $this->input->post('pro');

  if($cat == "get_produk")
  {
    echo $this->order_model->get_produk($id);
  }
  else if ($cat == "get_info") {
    echo $this->order_model->get_info($id, $pro);
  }

sekilas kode di bagian order_model :

// fungsi mengambil produk berdasrkan kategori
function get_produk($data1)
{
  // di sini ada query requst data dari database. :v
  // 100% benar karena sudah saya uji saat csrf_regenerate dinonatifkan. :v

  return $respon;
}

// fungsi mengambil detail produk
function get_info($data1, $data2)
{
  // sama seperti get_produk, ini juga intinya ngambil data dari database.
  // 100% benar karena sudah saya uji saat csrf_regenerate dinonatifkan. :v

  return $respon;
}

avatar xdnroot
@xdnroot

44 Kontribusi 6 Poin

Diperbarui 5 tahun yang lalu

1 Jawaban:

Jawaban Terpilih

Ini PERBAIKANNYA :)

Tambahkan input hidden di halaman views order untuk menyimpan setiap perubahan csrf token. halaman views order jadinya gini : <pre> //JQUERY &lt;script&gt; $(document).ready(function(){ $.ajaxSetup({ type:"POST", url: "&lt;?php echo base_url('order/getdata') ?&gt;", cache: false, });

$("#cat").bind('change', function(){ var csrfName = '&lt;?php echo $this-&gt;security-&gt;get_csrf_token_name(); ?&gt;', var csrfHash = $('#csrf').val; var idCat = $(this).val(); if(idCat &gt; 0){ $.ajax({ // csrfnew adalah nama csrf yg saya setting di config. data:{csrfnew:csrfHash,cat:'get_produk',id:idCat,idPro:'0'}, success: function(response){ $("#produk").html(response.data); $("#csrf").val(response.csrf); } }) } });

$("#produk").bind('change', function(){ var csrfName = '&lt;?php echo $this-&gt;security-&gt;get_csrf_token_name(); ?&gt;', var csrfHash = $('#csrf').val; var idCat = $("#cat").val(); var idPro = $(this).val(); if(idPro &gt; 0){ $.ajax({ data:{csrfnew:csrfHash,cat:'get_info',id:idCat,pro:idPro }, success: function(response){ $("#info").html(response); $("#produk").html(response.data); $("#csrf").val(response.csrf); } }) } });

}); &lt;/script&gt;

// HTML &lt;form action="&lt;?php echo site_url('order');?&gt;" method="post" accept-charset="utf-8"&gt; &lt;input type="hidden" id="hash" value="&lt;?php echo $this-&gt;security-&gt;get_csrf_hash(); ?&gt;"&gt; &lt;div class="form-group"&gt; &lt;label&gt;Pilih Kategori :&lt;/label&gt; &lt;select class="selectpicker form-control" required="required" name="cat" id="cat"&gt; &lt;option disabled="disabled" selected="selected"&gt;--Pilih Kategori--&lt;/option&gt; &lt;option value="1"&gt;kategori 1&lt;/option&gt; &lt;option value="2"&gt;kategori 2&lt;/option&gt;&lt; &lt;/select&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label&gt;Pilih Produk :&lt;/label&gt; &lt;select class="selectpicker form-control" required="required" name="produk" id="produk"&gt; &lt;option disabled="disabled" selected="selected"&gt;--Pilih Produk--&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div id="info"&gt; // di sini akan tampil detail produk &lt;/div&gt; &lt;div class="form-group"&gt; &lt;button type="submit" class="btn btn-primary" name="submit" value="order_smm"&gt;Order&lt;/button&gt; &lt;/div&gt; &lt;/form&gt; </pre>

Perbaikan di controller Order, merubah respon data dalam bentuk json supaya bisa nampung 2 data (yaitu data respon dan data csrf yang baru). <pre> public function getdata() { $cat = $this-&gt;input-&gt;post('cat'); $id = $this-&gt;input-&gt;post('id'); $pro = $this-&gt;input-&gt;post('pro');

if($cat == "get_produk") { $data = $this-&gt;order_model-&gt;get_produk($id); header('Content-Type: application/json'); echo json_encode(array( 'data' =&gt; $data, 'csrf' =&gt; $this-&gt;security-&gt;get_csrf_hash() )); } else if ($cat == "get_info") { $data = $this-&gt;order_model-&gt;get_info($id, $pro); header('Content-Type: application/json'); echo json_encode(array( 'data' =&gt; $data, 'csrf' =&gt; $this-&gt;security-&gt;get_csrf_hash() )); } </pre>

tidak ada perbaikan di order_model : <pre> // fungsi mengambil produk berdasrkan kategori function get_produk($data1) { // di sini ada query requst data dari database. :v // 100% benar karena sudah saya uji saat csrf_regenerate dinonatifkan. :v

return $respon; }

// fungsi mengambil detail produk function get_info($data1, $data2) { // sama seperti get_produk, ini juga intinya ngambil data dari database. // 100% benar karena sudah saya uji saat csrf_regenerate dinonatifkan. :v

return $respon; } </pre>

avatar xdnroot
@xdnroot

44 Kontribusi 6 Poin

Dipost 5 tahun yang lalu

Login untuk ikut Jawaban