강좌게시판

제목 Codeigniter Ajax 사용법
글쓴이 샤엠 작성시각 2012/09/07 01:16:00
댓글 : 8 추천 : 1 스크랩 : 1 조회수 : 39031   RSS
jQuery를 이용하여 AJAX를 사용하게 되면 일반적으로
data전송을 하지 않는한 페이지를 로드하는 것은 문제없이 실행이 됩니다.
하지만, 폼데이터를 AJAX를 이용하여 전송하고 그 결과를 가져오려 하면, 에러가 생깁니다.

홈페이지 구축을 하면서 이 문제를 강제적으로 해결하고 이렇게 몇자 적어봅니다.

Codeigniter 버젼은 2.1.2 버젼을 사용하고 있으며
$config['global_xss_filtering'] = TRUE;
autoload.php 파일에서 helper('url','form')
로 설정 되어 있습니다.

 codeigniter 폼 생성문을 이용하여 폼을 생성하게 되면 hidden 으로 추가적으로 생성되는 녀석이 있습니다.
 이녀석은 CSRF_TOKEN_NAME 이라는 name값을 가지는 input 엘리먼트 입니다.
 눈치를 채신 분이시라면, CSRF_TOKEN_NAME이 config 파일의

$config['csrf_protection'] = TRUE;
$config['csrf_token_name'] = 'ci_t';
$config['csrf_cookie_name'] = 'ci_c';
$config['csrf_expire'] = 7200;

이 부분이라는 걸 아셨을 텐데요. 저의 경우에 csrf_token_name 을 ci_t 라고 설정을 해놨기 때문에
hidden 엘리먼트에 ci_t 라는 네임을 가진 녀석이 토큰값을 가지고 있습니다.
이녀석은 쿠키를 살펴보면 ci_c 라는 네임의 쿠키값이 ci_t 값과 동일한 값을 가지고 있습니다.
이 둘중에 한 녀석을 여러분이 구축하는 환경을 고려하셔서 사용하시면 됩니다.
아래 코드는 ci_t 라는 녀석의 value 값(토큰)을 이용하여 작성한 코드입니다.
(위에서 제가 설명하는 hidden 에 대해서 이해가 가지 않으신 분들은 브라우저 개발자도구로 )
(엘리먼트를 살펴 보시면, hidden 속성의 input태그  중에서 여러분이 생성하지 않은 태그를 보실 수 있습니다.)

!javascript!

var csrf_token = $('input[name=ci_t]').val();


$.ajax(
       type: "POST",
       url: 'url',
       data:{ci_t:csrf_token,username:'shyam'},
       success: function(html) {
   alert(html);
                }
);
코드를 보시면 ci_t라는 네임으로 csrf_token 을 전송합니다.
이 토큰을 전송하고자 했던 데이터와 함께 보내시면
AJAX를 정상적으로 이용하실 수 있습니다.

쉽게 정리하자면
토큰을 AJAX로 같이 전송해야만 토큰이 키와 같은 역할을 하여 AJAX를 사용할 수 있게 합니다.
토큰을 포함시키지 않고 AJAX 요청을 하면 500 internal server error 괴로운 상황에 봉착합니다. ㅠㅡㅠ

위는 hidden 폼의 value를 이용한 것이지만, 위에서 말씀 드렸듯이
쿠키에 저장된 값을 전송하셔도 됩니다.

var csrf_token = $.cookie('ci_c');  이렇게.. 저의 경우 쿠키 이름을 ci_c로 설정했기 때문에 ci_c 입니다.

홈페이지 구축에 조금이나 도움이 되셨으면 합니다.

위 방법을 악용하는 사람이 없었으면 합니다. ㅠㅡㅠ(남의 정보를 빼내는 이들에게ㅠㅡㅠ)
태그 ajax사용,ajax,ajax에러
 다음글 성능테스트툴 jMeter사용법 (11)
 이전글 CodeIgniter 보안강화 (11)
목록

댓글

한대승(불의회상) / 2012/09/07 09:52:33 / 추천 0
유용한 정보 감사 합니다. ^^
변종원(웅파) / 2012/09/07 13:36:18 / 추천 0
csrf를 사용할 경우에 해당됩니다. ^^

일반적인 codeigniter ajax 사용에서는 문제가 없습니다.
샤엠 / 2012/09/07 14:41:31 / 추천 0
csrf 사용을 TURE 했을때 해당하는 건데;; 엄한 환경조건을 ;ㅋㅋㅋ
써놓았네요 ㅠ,ㅠ 
변종원(웅파) / 2012/10/09 11:52:15 / 추천 0
샤엠/ 이번에 책 쓰면서 도움을 받았네요. csrf 설정 해놓고 ajax로 호출하면 500 에러가 떨어져서
뭐지? 했는데 쿠키 전송해주면 되는거였네요.
글 참고해서 원고 작성했습니다. 감사합니다.
샤엠 / 2012/10/10 20:25:31 / 추천 0
 도움이 되었다니 저또한 기쁘네요. 좋은 하루 되세요^^
일용직노동자 / 2014/09/22 23:48:08 / 추천 0
아이고.. AJAX 사용법때문에 구글링을 한 일주일동안하다가 겨우 해결됬는데 여기에 이런 좋은 글이 있었네요 ㅠㅠ 
Dexter / 2015/03/26 14:28:46 / 추천 0
쿠키.... 허허....
매번 input hidden 값을 읽고... 그랬네요.... 
진작 찾아볼껄.... 허허...
푸르르른 / 2017/02/06 16:26:01 / 추천 0
감사합니다!!!!