CI4

[코드이그나이터] javascript에서 ajax 통신할때 csrf 값 생성하기

으누아빠 2020. 11. 13. 15:22
반응형

기존에는 php 파일내에 script를 생성하여

        $.ajax({

            type: "POST",

            headers: {

                'X-Requested-With': 'XMLHttpRequest'

            },

            url: url,

            dataType: "json",

            cache: false,

            data: {

                '<?= csrf_token() ?>': '<?= csrf_hash() ?>'

            }

형태로 했으나 만약 php 파일에 javascript를 삽입할수 없을경우

html파일의 헤더내에

<html>
<head>
<meta charset="utf-8">
<?php echo csrf_meta(); ?>
</head>
...

을 추가한 다음에 불러서 사용한다.

            $.ajax({

                headers: {

                    'X-Requested-With': 'XMLHttpRequest',

                    'X-CSRF-TOKEN': $('meta[name=X-CSRF-TOKEN]').attr('content')

                },

                type: 'POST',

                cache: false,

                async: true,

                url: url,

                data: post,

                dataType: 'json'

            })

형태로 사용할수 있음

롯데자일리톨 오리지날 껌 리필, 183g, 2개

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

방법2

이 방법이 최선인듯 싶음

https://makitweb.com/how-to-send-ajax-request-with-csrf-token-in-codeigniter-4/

/* hidden input을 배치 */
<input type="hidden" class="txt_csrfname" name="<?= csrf_token() ?>" value="<?= csrf_hash() ?>" />
   <script type='text/javascript'>
   $(document).ready(function(){

     $('#sel_user').change(function(){

       // html파일에서 선언했던 값을 가져온후 ajax 실행할때 같이보낸다.
       var csrfName = $('.txt_csrfname').attr('name'); // CSRF Token name
       var csrfHash = $('.txt_csrfname').val(); // CSRF hash

       // Username
       var username = $(this).val();

       // AJAX request
       $.ajax({
          url: "<?=site_url('users/userDetails')?>",
          method: 'post',
          data: {username: username,[csrfName]: csrfHash },
          dataType: 'json',
          success: function(response){

            // 결과값중 전달받은 token 값을 html에 반영한다.
            $('.txt_csrfname').val(response.token);

            // Empty the elements
            $('#suname,#sname,#semail').text('');

            if(response.success == 1){
               // Loop on response
               $(response.user).each(function(key,value){

                  var uname = value.username;
                  var name = value.name;
                  var email = value.email;

                  $('#suname').text(uname);
                  $('#sname').text(name);
                  $('#semail').text(email);
               });
            }else{
               // Error
               alert(response.error);
            }

          }
       });
     });
   });
   </script>
//controller에서 갱신 csrf값을 리턴한다.
      $request = service('request');
      $postData = $request->getPost();

      $data = array();

      // Read new token and assign in $data['token']
      $data['token'] = csrf_hash();

      ## Validation
      $validation = \Config\Services::validation();

      $input = $validation->setRules([
        'username' => 'required|min_length[3]'
      ]);

      if ($validation->withRequest($this->request)->run() == FALSE){

         $data['success'] = 0;
         $data['error'] = $validation->getError('username');// Error response

      }else{

         $data['success'] = 1;

         // Fetch record
         $users = new Users();
         $user = $users->select('*')
                ->where('username',$postData['username'])
                ->findAll();

         $data['user'] = $user;

      }

      return $this->response->setJSON($data);