[jQuery] 폼 전송시 “maximum call stack size exceeded” 에러 해결 방법

HyungJin

9년 ago

로그인 폼을 만들어 테스트하는 도중 콘솔에서 아래 에러 메세지가 출력됩니다.

“maximum call stack size exceeded” (IE에서는 “스택 공간 부족”으로 출력)

발생한 위치는 jQuery 코어 파일이었고 이 뜻은 jQuery 자체 문제라기보다는 어디선가 잘못 사용되고 있을거란 확률이 컸습니다.

일반적으로 위 에러가 출력되는 경우는 크게 2가지 입니다.

동일한 스크립트(.js) 파일을 중첩되게 호출한 경우
잘못된 코드로 인해 무한 루프를 도는 경우

두가지 문제를 점검해보았지만 정답은 아니었습니다. 검색을 해보니 로그인 폼에 사용된 submit 이벤트 문제일 것이라는 단서를 발견 했습니다.

jquery에서 사용되는 submit 이벤트는 submit이 발생할때까지 반복적으로 재귀호출을 하게 되며 이 때문에 무한 루프에 빠질 수 있습니다. 이는 일반적인 경우는 아닙니다.

제 경우에는 iframe을 이용해 다른 서버의 페이지에서 로그인 폼을 출력했고 그 iframe 내에서 submit 이벤트를 처리하면서 문제가 발생한 것이었습니다.

이 이슈에 대한 수정 전 코드와 수정 후 코드입니다.

[수정 전]

// submit 이벤트 리스너
$("#login_form").on("submit", login_proc);

// 로그인 처리 함수
function login_proc() {
    // 필드 검즐 및 전처리
    (..생략)
    
    // 폼 전송
    $(this).submit();
}

[수정 후]

// submit 이벤트 리스너 : form이 아닌 로그인 버튼에 이벤트 처리
$("#btn_login").on("click", login_proc);

// 패스워드 입력 필드에서 엔터키를 누르면 로그인 되도록 키 이벤트 처리
$("#login_passwd").on("keypress", function(event){
    if(event.keyCode == 13) {
        login_proc();
    }
});

// 로그인 처리 함수
function login_proc() {
    // 필드 검즐 및 전처리
    (..생략)
    
    // 폼 전송 : 폼에서 직접 발생하는 이벤트가 아니므로 this 대신 폼 ID를 지정
    $("#login_form").submit();
}

위 코드에 대해 간략하게 설명하자면 Form의 submit 이벤트 대신 로그인 버튼에 click 이벤트를 패스워드 입력 필드에 keypress 이벤트를 추가한 것입니다.

submit 을 사용한다면 폼 내부에서 엔터를 치게되면 submit 버튼이 이벤트를 받아 작동하지만 click 을 사용한다면 직접 마우스로 버튼을 클릭해야 합니다. 따라서 엔터키를 쳤을때 동일하게 동작하도록 이벤트를 추가해준 것입니다.

이로써 “스택 공간 부족” 에러는 해결이 됩니다. 하지만 저처럼 iframe으로 폼을 처리하는 경우라면 추가로 처리해줄 것이 있습니다.

CORS (Cross-Origin Resource Sharing) 즉, 크로스 도메인 허용 처리, 그리고 제3자 쿠키(P3P) 헤더 처리입니다.

CORS 처리 : HTTP 헤더에 “Access-Control-Allow-Origin” 추가
(PHP인 경우 Header(“Access-Control-Allow-Origin: 허용할 도메인명 또는 *”); 코드 추가)
P3P 헤더 (제3자 쿠키) 추가
(PHP인 경우 Header(“p3p: CP=\”CAO DSP AND SO ON\” policyref=\”/w3c/p3p.xml\””); 코드 추가)

Share Content