ALBERT SITE

Codeigniter Ajax 사용법

Posted by Albert 4120Day 7Hour 30Min 28Sec ago [2014-01-09]

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 입니다.

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

위 방법을 악용하는 사람이 없었으면 합니다. ㅠㅡㅠ(남의 정보를 빼내는 이들에게ㅠㅡㅠ)

출처: http://codeigniter-kr.org/lecture/view/282/page/1/

LIST